├── .changeset ├── README.md ├── brave-cats-relax.md ├── brave-poems-press.md ├── brown-adults-deny.md ├── chatty-goats-dream.md ├── chilly-gorillas-study.md ├── config.json ├── curly-lizards-fetch.md ├── dirty-months-wonder.md ├── eight-countries-carry.md ├── empty-buckets-drop.md ├── few-clouds-confess.md ├── fluffy-doors-compare.md ├── friendly-lemons-stare.md ├── funny-weeks-flow.md ├── fuzzy-terms-cross.md ├── gold-bobcats-call.md ├── green-llamas-sort.md ├── healthy-parents-grin.md ├── healthy-ties-suffer.md ├── heavy-hats-knock.md ├── honest-poets-reflect.md ├── khaki-nails-crash.md ├── kind-lobsters-listen.md ├── lazy-shoes-warn.md ├── light-socks-learn.md ├── many-ladybugs-repair.md ├── many-lies-live.md ├── mean-berries-hunt.md ├── metal-buttons-unite.md ├── modern-llamas-try.md ├── moody-penguins-drive.md ├── nasty-rats-hide.md ├── neat-wasps-flash.md ├── new-baboons-carry.md ├── nice-carrots-happen.md ├── nice-shirts-exercise.md ├── old-dryers-pull.md ├── plenty-mayflies-help.md ├── polite-horses-applaud.md ├── polite-queens-whisper.md ├── poor-feet-shake.md ├── poor-scissors-flow.md ├── pre.json ├── purple-icons-help.md ├── real-planes-wonder.md ├── rude-snakes-clean.md ├── serious-carrots-tan.md ├── seven-bottles-applaud.md ├── shaggy-gifts-mate.md ├── silent-singers-cheat.md ├── silver-waves-retire.md ├── six-bottles-remain.md ├── six-eggs-kick.md ├── six-parrots-explode.md ├── sixty-readers-rush.md ├── smooth-horses-move.md ├── sour-otters-burn.md ├── stale-shoes-unite.md ├── strange-files-relate.md ├── strange-rabbits-remember.md ├── tender-forks-confess.md ├── two-tigers-applaud.md ├── violet-emus-hope.md └── witty-teachers-dance.md ├── .commitlintrc ├── .editorconfig ├── .github ├── CONTRIBUTING.md └── workflows │ ├── pull_request_stats.yml │ └── release.yml ├── .gitignore ├── .husky ├── commit-msg └── pre-commit ├── .npmrc ├── .nvmrc ├── .vscode └── settings.json ├── README.md ├── babel.config.js ├── biome.json ├── docs ├── preview.png ├── preview_beta.png ├── showcase │ └── lastplay.png └── stacks.jpeg ├── examples └── basic │ ├── App.tsx │ ├── app.json │ ├── assets │ ├── adaptive-icon.png │ ├── favicon.png │ ├── icon.png │ └── splash.png │ ├── babel.config.js │ ├── block.d.ts │ ├── blocks.config.ts │ ├── index.js │ ├── metro.config.js │ ├── package.json │ ├── src │ ├── components │ │ └── icons │ │ │ ├── Add.tsx │ │ │ ├── Apps.tsx │ │ │ ├── ArrowDropDown.tsx │ │ │ ├── ArrowRightUp.tsx │ │ │ ├── Download.tsx │ │ │ ├── Refresh.tsx │ │ │ └── types.ts │ └── screens │ │ └── docs │ │ └── screen.tsx │ └── tsconfig.json ├── jest.config.js ├── package.json ├── packages ├── @blocks-colors │ ├── CHANGELOG.md │ ├── README.md │ ├── biome.json │ ├── package.json │ ├── radix-ui │ │ └── package.json │ ├── src │ │ ├── index.ts │ │ ├── radixUi │ │ │ ├── amber.ts │ │ │ ├── amberA.ts │ │ │ ├── amberDark.ts │ │ │ ├── amberDarkA.ts │ │ │ ├── blackA.ts │ │ │ ├── blue.ts │ │ │ ├── blueA.ts │ │ │ ├── blueDark.ts │ │ │ ├── blueDarkA.ts │ │ │ ├── bronze.ts │ │ │ ├── bronzeA.ts │ │ │ ├── bronzeDark.ts │ │ │ ├── bronzeDarkA.ts │ │ │ ├── brown.ts │ │ │ ├── brownA.ts │ │ │ ├── brownDark.ts │ │ │ ├── brownDarkA.ts │ │ │ ├── crimson.ts │ │ │ ├── crimsonA.ts │ │ │ ├── crimsonDark.ts │ │ │ ├── crimsonDarkA.ts │ │ │ ├── cyan.ts │ │ │ ├── cyanA.ts │ │ │ ├── cyanDark.ts │ │ │ ├── cyanDarkA.ts │ │ │ ├── gold.ts │ │ │ ├── goldA.ts │ │ │ ├── goldDark.ts │ │ │ ├── goldDarkA.ts │ │ │ ├── grass.ts │ │ │ ├── grassA.ts │ │ │ ├── grassDark.ts │ │ │ ├── grassDarkA.ts │ │ │ ├── gray.ts │ │ │ ├── grayA.ts │ │ │ ├── grayDark.ts │ │ │ ├── grayDarkA.ts │ │ │ ├── green.ts │ │ │ ├── greenA.ts │ │ │ ├── greenDark.ts │ │ │ ├── greenDarkA.ts │ │ │ ├── index.ts │ │ │ ├── indigo.ts │ │ │ ├── indigoA.ts │ │ │ ├── indigoDark.ts │ │ │ ├── indigoDarkA.ts │ │ │ ├── lime.ts │ │ │ ├── limeA.ts │ │ │ ├── limeDark.ts │ │ │ ├── limeDarkA.ts │ │ │ ├── mauve.ts │ │ │ ├── mauveA.ts │ │ │ ├── mauveDark.ts │ │ │ ├── mauveDarkA.ts │ │ │ ├── mint.ts │ │ │ ├── mintA.ts │ │ │ ├── mintDark.ts │ │ │ ├── mintDarkA.ts │ │ │ ├── olive.ts │ │ │ ├── oliveA.ts │ │ │ ├── oliveDark.ts │ │ │ ├── oliveDarkA.ts │ │ │ ├── orange.ts │ │ │ ├── orangeA.ts │ │ │ ├── orangeDark.ts │ │ │ ├── orangeDarkA.ts │ │ │ ├── pink.ts │ │ │ ├── pinkA.ts │ │ │ ├── pinkDark.ts │ │ │ ├── pinkDarkA.ts │ │ │ ├── plum.ts │ │ │ ├── plumA.ts │ │ │ ├── plumDark.ts │ │ │ ├── plumDarkA.ts │ │ │ ├── purple.ts │ │ │ ├── purpleA.ts │ │ │ ├── purpleDark.ts │ │ │ ├── purpleDarkA.ts │ │ │ ├── red.ts │ │ │ ├── redA.ts │ │ │ ├── redDark.ts │ │ │ ├── redDarkA.ts │ │ │ ├── sage.ts │ │ │ ├── sageA.ts │ │ │ ├── sageDark.ts │ │ │ ├── sageDarkA.ts │ │ │ ├── sand.ts │ │ │ ├── sandA.ts │ │ │ ├── sandDark.ts │ │ │ ├── sandDarkA.ts │ │ │ ├── sky.ts │ │ │ ├── skyA.ts │ │ │ ├── skyDark.ts │ │ │ ├── skyDarkA.ts │ │ │ ├── slate.ts │ │ │ ├── slateA.ts │ │ │ ├── slateDark.ts │ │ │ ├── slateDarkA.ts │ │ │ ├── teal.ts │ │ │ ├── tealA.ts │ │ │ ├── tealDark.ts │ │ │ ├── tealDarkA.ts │ │ │ ├── tomato.ts │ │ │ ├── tomatoA.ts │ │ │ ├── tomatoDark.ts │ │ │ ├── tomatoDarkA.ts │ │ │ ├── violet.ts │ │ │ ├── violetA.ts │ │ │ ├── violetDark.ts │ │ │ ├── violetDarkA.ts │ │ │ ├── whiteA.ts │ │ │ ├── yellow.ts │ │ │ ├── yellowA.ts │ │ │ ├── yellowDark.ts │ │ │ └── yellowDarkA.ts │ │ ├── schema.ts │ │ └── tailwindCss │ │ │ ├── amber.ts │ │ │ ├── blue.ts │ │ │ ├── common.ts │ │ │ ├── cyan.ts │ │ │ ├── emerald.ts │ │ │ ├── fuchsia.ts │ │ │ ├── gray.ts │ │ │ ├── green.ts │ │ │ ├── index.ts │ │ │ ├── indigo.ts │ │ │ ├── lime.ts │ │ │ ├── neutral.ts │ │ │ ├── orange.ts │ │ │ ├── pink.ts │ │ │ ├── purple.ts │ │ │ ├── red.ts │ │ │ ├── rose.ts │ │ │ ├── sky.ts │ │ │ ├── slate.ts │ │ │ ├── stone.ts │ │ │ ├── teal.ts │ │ │ ├── violet.ts │ │ │ ├── yellow.ts │ │ │ └── zinc.ts │ ├── tailwind-css │ │ └── package.json │ ├── tsconfig.build.json │ └── tsconfig.json ├── @blocks-primitives │ ├── .ci │ │ └── testHelper.tsx │ ├── CHANGELOG.md │ ├── README.md │ ├── biome.json │ ├── package.json │ ├── src │ │ ├── Box │ │ │ ├── Box.tsx │ │ │ ├── Box.types.ts │ │ │ ├── createBox.tsx │ │ │ ├── index.ts │ │ │ └── tests │ │ │ │ ├── Box.test.tsx │ │ │ │ └── createBox.test.tsx │ │ ├── Stack │ │ │ ├── Stack.tsx │ │ │ ├── Stack.types.ts │ │ │ ├── Stack.utils.ts │ │ │ ├── createStack.tsx │ │ │ ├── index.ts │ │ │ └── tests │ │ │ │ ├── Stack.test.tsx │ │ │ │ └── createStack.test.tsx │ │ ├── Text │ │ │ ├── Text.tsx │ │ │ ├── Text.types.ts │ │ │ ├── createText.tsx │ │ │ ├── index.ts │ │ │ └── tests │ │ │ │ ├── Text.test.tsx │ │ │ │ └── createText.test.tsx │ │ ├── XStack │ │ │ ├── XStack.tsx │ │ │ ├── index.ts │ │ │ └── tests │ │ │ │ └── XStack.test.tsx │ │ ├── YStack │ │ │ ├── YStack.tsx │ │ │ ├── index.ts │ │ │ └── tests │ │ │ │ └── YStack.test.tsx │ │ └── index.ts │ ├── tsconfig.build.json │ └── tsconfig.json ├── @blocks-system │ ├── CHANGELOG.md │ ├── README.md │ ├── biome.json │ ├── package.json │ ├── src │ │ ├── createBlocks.ts │ │ ├── createTokens.ts │ │ ├── index.ts │ │ ├── styleFunction │ │ │ ├── getValuesTokens.ts │ │ │ ├── index.ts │ │ │ ├── styleFunction.ts │ │ │ ├── tests │ │ │ │ ├── getValuesTokens.test.ts │ │ │ │ ├── styleFunction.test.ts │ │ │ │ └── validateProperties.test.ts │ │ │ └── validateProperties.ts │ │ └── tests │ │ │ ├── createBlocks.test.ts │ │ │ └── createTokens.test.ts │ ├── tsconfig.build.json │ └── tsconfig.json ├── @blocks-theme │ ├── CHANGELOG.md │ ├── README.md │ ├── biome.json │ ├── package.json │ ├── src │ │ ├── _isolated-hnrs.ts │ │ ├── baseTheme.ts │ │ ├── index.ts │ │ ├── tests │ │ │ ├── theming.test.tsx │ │ │ └── weakMemoize.test.ts │ │ ├── theme.ts │ │ ├── themeKeys │ │ │ ├── borders.ts │ │ │ ├── colors.ts │ │ │ ├── fonts.ts │ │ │ ├── index.ts │ │ │ ├── radii.ts │ │ │ ├── sizes.ts │ │ │ ├── spacings.ts │ │ │ └── themeKeys.ts │ │ ├── themeTokens │ │ │ ├── borders.ts │ │ │ ├── fonts.ts │ │ │ ├── index.ts │ │ │ ├── radii.ts │ │ │ ├── sizes.ts │ │ │ ├── spacings.ts │ │ │ └── utils.ts │ │ ├── theming.tsx │ │ └── weakMemoize.ts │ ├── tsconfig.build.json │ └── tsconfig.json ├── @blocks-types │ ├── CHANGELOG.md │ ├── README.md │ ├── biome.json │ ├── package.json │ ├── src │ │ ├── StyleFunction.ts │ │ ├── Utility.ts │ │ ├── base.ts │ │ └── index.ts │ ├── tsconfig.build.json │ └── tsconfig.json ├── @blocks-unstyled │ ├── CHANGELOG.md │ ├── README.md │ ├── biome.json │ ├── package.json │ ├── scripts │ │ ├── configPostinstall.js │ │ ├── configPrepublishOnly.js │ │ └── copyFiles.js │ ├── src │ │ ├── Button │ │ │ ├── Button.types.ts │ │ │ ├── ButtonContext.tsx │ │ │ ├── ButtonLabel.tsx │ │ │ ├── ButtonLoading.tsx │ │ │ ├── ButtonRoot.tsx │ │ │ ├── index.tsx │ │ │ └── tests │ │ │ │ └── Button.test.tsx │ │ └── index.ts │ ├── tsconfig.build.json │ └── tsconfig.json ├── @blocks-utils │ ├── CHANGELOG.md │ ├── README.md │ ├── biome.json │ ├── package.json │ ├── scripts │ │ ├── configPostinstall.js │ │ └── copyFiles.js │ ├── src │ │ ├── camelCase.ts │ │ ├── compact.ts │ │ ├── deepmerge.ts │ │ ├── get.ts │ │ ├── index.ts │ │ ├── isDev.ts │ │ ├── isNullOrUndefined.ts │ │ ├── isNumber.ts │ │ ├── isObject.ts │ │ ├── isString.ts │ │ ├── isUndefined.ts │ │ ├── removeEmptyObjects.ts │ │ ├── spacing.ts │ │ ├── tests │ │ │ ├── camelCase.test.ts │ │ │ ├── compact.test.ts │ │ │ ├── deepmerge.test.ts │ │ │ ├── get.test.ts │ │ │ ├── isDev.test.ts │ │ │ ├── isNullOrUndefined.test.ts │ │ │ ├── isNumber.test.ts │ │ │ ├── isObject.test.ts │ │ │ ├── isString.test.ts │ │ │ ├── isUndefined.test.ts │ │ │ ├── removeEmptyObjects.test.ts │ │ │ ├── spacing.test.ts │ │ │ └── toPixels.test.ts │ │ └── toPixels.ts │ ├── tsconfig.build.json │ └── tsconfig.json ├── block │ ├── CHANGELOG.md │ ├── README.md │ ├── biome.json │ ├── package.json │ ├── src │ │ ├── block.ts │ │ ├── createBlock.tsx │ │ ├── css.ts │ │ ├── index.ts │ │ ├── tests │ │ │ ├── block.test.tsx │ │ │ ├── css.test.ts │ │ │ └── utils.test.ts │ │ └── utils.ts │ ├── tsconfig.build.json │ ├── tsconfig.json │ └── types │ │ ├── base.d.ts │ │ └── index.d.ts ├── native │ ├── CHANGELOG.md │ ├── README.md │ ├── biome.json │ ├── package.json │ ├── src │ │ └── index.ts │ ├── tsconfig.build.json │ └── tsconfig.json └── tsconfig │ ├── CHANGELOG.md │ ├── base.json │ └── package.json ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── scripts └── configPostinstall.js ├── tsconfig.json └── turbo.json /.changeset/README.md: -------------------------------------------------------------------------------- 1 | # Changesets 2 | 3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works 4 | with multi-package repos, or single-package repos to help you version and publish your code. You can 5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets) 6 | 7 | We have a quick list of common questions to get you started engaging with this project in 8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) 9 | -------------------------------------------------------------------------------- /.changeset/brave-cats-relax.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@design-blocks/colors': patch 3 | '@design-blocks/primitives': patch 4 | '@design-blocks/system': patch 5 | '@design-blocks/theme': patch 6 | '@design-blocks/types': patch 7 | '@design-blocks/utils': patch 8 | '@design-blocks/native': patch 9 | 'tsconfig': patch 10 | --- 11 | 12 | Fixed deploy 13 | -------------------------------------------------------------------------------- /.changeset/brave-poems-press.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@design-blocks/primitives': minor 3 | '@design-blocks/system': minor 4 | '@design-blocks/utils': minor 5 | --- 6 | 7 | Performance in 📦 8 | -------------------------------------------------------------------------------- /.changeset/brown-adults-deny.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/primitives": minor 3 | "@design-blocks/theme": minor 4 | "@design-blocks/types": minor 5 | "@design-blocks/core": minor 6 | "@design-blocks/colors": minor 7 | "@design-blocks/system": minor 8 | "@design-blocks/utils": minor 9 | "@design-blocks/native": minor 10 | "tsconfig": minor 11 | --- 12 | 13 | Added , , some fix and RFC yn types 14 | -------------------------------------------------------------------------------- /.changeset/chatty-goats-dream.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/primitives": minor 3 | "@design-blocks/unstyled": minor 4 | "@design-blocks/system": minor 5 | "@design-blocks/theme": minor 6 | "@design-blocks/types": minor 7 | "@design-blocks/block": minor 8 | "@design-blocks/colors": minor 9 | "@design-blocks/utils": minor 10 | "@design-blocks/native": minor 11 | "tsconfig": minor 12 | --- 13 | 14 | RFC structure and export utilis 15 | -------------------------------------------------------------------------------- /.changeset/chilly-gorillas-study.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@design-blocks/primitives': minor 3 | --- 4 | 5 | Added primitives `YStack`, `XStack` 💣 6 | -------------------------------------------------------------------------------- /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json", 3 | "changelog": [ 4 | "@changesets/changelog-github", 5 | { "repo": "openkitrun/design-blocks" } 6 | ], 7 | "commit": false, 8 | "linked": [ 9 | [ 10 | "@design-blocks/block", 11 | "@design-blocks/primitives", 12 | "@design-blocks/native" 13 | ] 14 | ], 15 | "access": "public", 16 | "baseBranch": "main", 17 | "ignore": [ 18 | "@examples/basic", 19 | "@design-blocks/colors/radix-ui", 20 | "@design-blocks/colors/tailwind-css" 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /.changeset/curly-lizards-fetch.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@design-blocks/colors': minor 3 | '@design-blocks/primitives': minor 4 | '@design-blocks/system': minor 5 | '@design-blocks/theme': minor 6 | '@design-blocks/types': minor 7 | '@design-blocks/utils': minor 8 | '@design-blocks/native': minor 9 | --- 10 | 11 | Optimizatio make stylesn 12 | -------------------------------------------------------------------------------- /.changeset/dirty-months-wonder.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@design-blocks/colors': patch 3 | '@design-blocks/primitives': patch 4 | '@design-blocks/system': patch 5 | '@design-blocks/theme': patch 6 | '@design-blocks/types': patch 7 | '@design-blocks/utils': patch 8 | '@design-blocks/native': patch 9 | 'tsconfig': patch 10 | --- 11 | 12 | Fixed publish 13 | -------------------------------------------------------------------------------- /.changeset/eight-countries-carry.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/unstyled": minor 3 | --- 4 | 5 | Added accessibility 6 | -------------------------------------------------------------------------------- /.changeset/empty-buckets-drop.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@design-blocks/primitives': minor 3 | --- 4 | 5 | Fixed styles Stack 6 | -------------------------------------------------------------------------------- /.changeset/few-clouds-confess.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/unstyled": minor 3 | --- 4 | 5 | added button export and added test 6 | -------------------------------------------------------------------------------- /.changeset/fluffy-doors-compare.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/types": patch 3 | --- 4 | 5 | Fixed color `TextColorsProps` to `declare module '@design-blocks/native'` 6 | -------------------------------------------------------------------------------- /.changeset/friendly-lemons-stare.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@design-blocks/primitives': minor 3 | '@design-blocks/system': minor 4 | '@design-blocks/types': minor 5 | '@design-blocks/colors': minor 6 | '@design-blocks/theme': minor 7 | '@design-blocks/utils': minor 8 | '@design-blocks/native': minor 9 | --- 10 | 11 | Reafactor performance 12 | -------------------------------------------------------------------------------- /.changeset/funny-weeks-flow.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@design-blocks/primitives': minor 3 | '@design-blocks/system': minor 4 | '@design-blocks/theme': minor 5 | '@design-blocks/types': minor 6 | '@design-blocks/utils': minor 7 | '@design-blocks/core': minor 8 | '@design-blocks/native': minor 9 | '@design-blocks/colors': minor 10 | --- 11 | 12 | Refactor, remove emotion `styled` 13 | -------------------------------------------------------------------------------- /.changeset/fuzzy-terms-cross.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/colors": patch 3 | "@design-blocks/core": patch 4 | "@design-blocks/primitives": patch 5 | "@design-blocks/system": patch 6 | "@design-blocks/theme": patch 7 | "@design-blocks/types": patch 8 | "@design-blocks/utils": patch 9 | "@design-blocks/native": patch 10 | "tsconfig": patch 11 | --- 12 | 13 | Use export 14 | -------------------------------------------------------------------------------- /.changeset/gold-bobcats-call.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@design-blocks/primitives': patch 3 | '@design-blocks/colors': patch 4 | '@design-blocks/system': patch 5 | '@design-blocks/theme': patch 6 | '@design-blocks/types': patch 7 | '@design-blocks/utils': patch 8 | '@design-blocks/core': patch 9 | '@design-blocks/native': patch 10 | --- 11 | 12 | Bump react-native@0.72 and react-native-builder-bob@0.21.3 13 | -------------------------------------------------------------------------------- /.changeset/green-llamas-sort.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/utils": patch 3 | --- 4 | 5 | Fixed export modules 6 | -------------------------------------------------------------------------------- /.changeset/healthy-parents-grin.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/unstyled": minor 3 | --- 4 | 5 | Init version 6 | -------------------------------------------------------------------------------- /.changeset/healthy-ties-suffer.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/system": minor 3 | "@design-blocks/types": minor 4 | "@design-blocks/colors": minor 5 | "@design-blocks/primitives": minor 6 | "@design-blocks/theme": minor 7 | "@design-blocks/unstyled": minor 8 | "@design-blocks/utils": minor 9 | "@design-blocks/block": minor 10 | "@design-blocks/native": minor 11 | "tsconfig": minor 12 | --- 13 | 14 | Added radi support in types and porps value styles 15 | -------------------------------------------------------------------------------- /.changeset/heavy-hats-knock.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/unstyled": minor 3 | "@design-blocks/types": minor 4 | --- 5 | 6 | Added accessibility 7 | -------------------------------------------------------------------------------- /.changeset/honest-poets-reflect.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/primitives": minor 3 | "@design-blocks/unstyled": minor 4 | "@design-blocks/system": minor 5 | "@design-blocks/theme": minor 6 | "@design-blocks/types": minor 7 | "@design-blocks/utils": minor 8 | "@design-blocks/block": minor 9 | "@design-blocks/colors": minor 10 | "@design-blocks/native": minor 11 | "tsconfig": minor 12 | --- 13 | 14 | Added test 15 | -------------------------------------------------------------------------------- /.changeset/khaki-nails-crash.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/theme": patch 3 | --- 4 | 5 | Fixed types 6 | -------------------------------------------------------------------------------- /.changeset/kind-lobsters-listen.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/primitives": patch 3 | "@design-blocks/colors": patch 4 | "@design-blocks/system": patch 5 | "@design-blocks/theme": patch 6 | "@design-blocks/types": patch 7 | "@design-blocks/unstyled": patch 8 | "@design-blocks/utils": patch 9 | "@design-blocks/block": patch 10 | "@design-blocks/native": patch 11 | "tsconfig": patch 12 | --- 13 | 14 | Fixed stacks 15 | -------------------------------------------------------------------------------- /.changeset/lazy-shoes-warn.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/primitives": major 3 | "@design-blocks/colors": major 4 | "@design-blocks/system": major 5 | "@design-blocks/theme": major 6 | "@design-blocks/types": major 7 | "@design-blocks/utils": major 8 | --- 9 | 10 | RFC: remplace build tool to Typescript 11 | -------------------------------------------------------------------------------- /.changeset/light-socks-learn.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/unstyled": major 3 | --- 4 | 5 | RFC export components 6 | -------------------------------------------------------------------------------- /.changeset/many-ladybugs-repair.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/unstyled": minor 3 | --- 4 | 5 | Fixed build 6 | -------------------------------------------------------------------------------- /.changeset/many-lies-live.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@design-blocks/colors': patch 3 | '@design-blocks/primitives': patch 4 | '@design-blocks/system': patch 5 | '@design-blocks/theme': patch 6 | '@design-blocks/types': patch 7 | '@design-blocks/utils': patch 8 | '@design-blocks/native': patch 9 | 'tsconfig': patch 10 | --- 11 | 12 | Fixed publish 13 | -------------------------------------------------------------------------------- /.changeset/mean-berries-hunt.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@design-blocks/primitives': patch 3 | '@design-blocks/system': patch 4 | '@design-blocks/theme': patch 5 | '@design-blocks/types': patch 6 | '@design-blocks/utils': patch 7 | '@design-blocks/core': patch 8 | '@design-blocks/native': patch 9 | '@design-blocks/colors': patch 10 | 'tsconfig': patch 11 | --- 12 | 13 | Fixed source module react-native 14 | -------------------------------------------------------------------------------- /.changeset/metal-buttons-unite.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/unstyled": patch 3 | --- 4 | 5 | Fixed build 6 | -------------------------------------------------------------------------------- /.changeset/modern-llamas-try.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/colors": patch 3 | "@design-blocks/primitives": patch 4 | "@design-blocks/system": patch 5 | "@design-blocks/theme": patch 6 | "@design-blocks/types": patch 7 | "@design-blocks/unstyled": patch 8 | "@design-blocks/utils": patch 9 | "@design-blocks/block": patch 10 | "@design-blocks/native": patch 11 | "tsconfig": patch 12 | --- 13 | 14 | Fixed public 15 | -------------------------------------------------------------------------------- /.changeset/moody-penguins-drive.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/unstyled": minor 3 | --- 4 | 5 | Export modules 6 | -------------------------------------------------------------------------------- /.changeset/nasty-rats-hide.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/colors": minor 3 | "@design-blocks/primitives": minor 4 | "@design-blocks/system": minor 5 | "@design-blocks/theme": minor 6 | "@design-blocks/types": minor 7 | "@design-blocks/unstyled": minor 8 | "@design-blocks/utils": minor 9 | "@design-blocks/block": minor 10 | "@design-blocks/native": minor 11 | "tsconfig": minor 12 | --- 13 | 14 | Export modules 15 | -------------------------------------------------------------------------------- /.changeset/neat-wasps-flash.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/unstyled": minor 3 | --- 4 | 5 | Build and formatPKJson.js 6 | -------------------------------------------------------------------------------- /.changeset/new-baboons-carry.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@design-blocks/primitives': minor 3 | '@design-blocks/colors': minor 4 | '@design-blocks/system': minor 5 | '@design-blocks/theme': minor 6 | '@design-blocks/types': minor 7 | '@design-blocks/utils': minor 8 | '@design-blocks/native': minor 9 | --- 10 | 11 | Use typescript@5 12 | -------------------------------------------------------------------------------- /.changeset/nice-carrots-happen.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/primitives": patch 3 | "@design-blocks/system": patch 4 | "@design-blocks/colors": patch 5 | "@design-blocks/theme": patch 6 | "@design-blocks/types": patch 7 | "@design-blocks/unstyled": patch 8 | "@design-blocks/utils": patch 9 | "@design-blocks/block": patch 10 | "@design-blocks/native": patch 11 | "tsconfig": patch 12 | --- 13 | 14 | Fixed stacks 15 | -------------------------------------------------------------------------------- /.changeset/nice-shirts-exercise.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/system": minor 3 | "@design-blocks/theme": minor 4 | "@design-blocks/colors": minor 5 | "@design-blocks/primitives": minor 6 | "@design-blocks/types": minor 7 | "@design-blocks/unstyled": minor 8 | "@design-blocks/utils": minor 9 | "@design-blocks/block": minor 10 | "@design-blocks/native": minor 11 | "tsconfig": minor 12 | --- 13 | 14 | Use multiple Themes 15 | -------------------------------------------------------------------------------- /.changeset/old-dryers-pull.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/unstyled": patch 3 | "tsconfig": patch 4 | "@design-blocks/colors": patch 5 | "@design-blocks/primitives": patch 6 | "@design-blocks/system": patch 7 | "@design-blocks/theme": patch 8 | "@design-blocks/types": patch 9 | "@design-blocks/utils": patch 10 | "@design-blocks/block": patch 11 | "@design-blocks/native": patch 12 | --- 13 | 14 | Fixed export types 15 | -------------------------------------------------------------------------------- /.changeset/plenty-mayflies-help.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/unstyled": patch 3 | "@design-blocks/utils": patch 4 | --- 5 | 6 | Fixed export Button and name pakages utils 7 | -------------------------------------------------------------------------------- /.changeset/polite-horses-applaud.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@design-blocks/primitives': minor 3 | '@design-blocks/colors': minor 4 | '@design-blocks/system': minor 5 | '@design-blocks/theme': minor 6 | '@design-blocks/utils': minor 7 | '@design-blocks/native': minor 8 | '@design-blocks/types': minor 9 | --- 10 | 11 | Use tool build react-native-builder-bob@0.20.4 12 | -------------------------------------------------------------------------------- /.changeset/polite-queens-whisper.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/colors": patch 3 | "@design-blocks/core": patch 4 | "@design-blocks/primitives": patch 5 | "@design-blocks/system": patch 6 | "@design-blocks/theme": patch 7 | "@design-blocks/types": patch 8 | "@design-blocks/utils": patch 9 | "@design-blocks/native": patch 10 | "tsconfig": patch 11 | --- 12 | 13 | Bump react-native-builder-bob 14 | -------------------------------------------------------------------------------- /.changeset/poor-feet-shake.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/system": minor 3 | "@design-blocks/core": minor 4 | "@design-blocks/colors": minor 5 | "@design-blocks/primitives": minor 6 | "@design-blocks/theme": minor 7 | "@design-blocks/types": minor 8 | "@design-blocks/utils": minor 9 | "@design-blocks/native": minor 10 | "tsconfig": minor 11 | --- 12 | 13 | Added `css` util 14 | -------------------------------------------------------------------------------- /.changeset/poor-scissors-flow.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/unstyled": patch 3 | --- 4 | 5 | Fixed build 6 | -------------------------------------------------------------------------------- /.changeset/purple-icons-help.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/primitives": major 3 | "@design-blocks/colors": major 4 | "@design-blocks/system": major 5 | "@design-blocks/theme": major 6 | "@design-blocks/types": major 7 | "@design-blocks/utils": major 8 | "@design-blocks/native": major 9 | "@design-blocks/block": major 10 | "tsconfig": major 11 | --- 12 | 13 | RFC: remove `@design-blocks/core` to `@design-blocks/block`, remove `@design-blocks/primitives` of export in `@design-blocks/native` 14 | -------------------------------------------------------------------------------- /.changeset/real-planes-wonder.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/unstyled": minor 3 | "@design-blocks/colors": minor 4 | --- 5 | 6 | Added support modules and export default 7 | -------------------------------------------------------------------------------- /.changeset/rude-snakes-clean.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@design-blocks/colors': patch 3 | '@design-blocks/theme': patch 4 | --- 5 | 6 | Fixed colors `tailwindCss` 7 | -------------------------------------------------------------------------------- /.changeset/serious-carrots-tan.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/unstyled": minor 3 | --- 4 | 5 | Fixed version 6 | -------------------------------------------------------------------------------- /.changeset/seven-bottles-applaud.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/unstyled": patch 3 | --- 4 | 5 | Fixed script build 6 | -------------------------------------------------------------------------------- /.changeset/shaggy-gifts-mate.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/primitives": patch 3 | --- 4 | 5 | Fixed export create 6 | -------------------------------------------------------------------------------- /.changeset/silent-singers-cheat.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@design-blocks/theme': minor 3 | --- 4 | 5 | Added theme key `shadowColor` 6 | -------------------------------------------------------------------------------- /.changeset/silver-waves-retire.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/primitives": patch 3 | --- 4 | 5 | Fixed instance Stack 6 | -------------------------------------------------------------------------------- /.changeset/six-bottles-remain.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/theme": minor 3 | "@design-blocks/colors": minor 4 | "@design-blocks/core": minor 5 | "@design-blocks/primitives": minor 6 | "@design-blocks/system": minor 7 | "@design-blocks/types": minor 8 | "@design-blocks/utils": minor 9 | "@design-blocks/native": minor 10 | "tsconfig": minor 11 | --- 12 | 13 | Use `declare module '@design-blocks/native'` 14 | -------------------------------------------------------------------------------- /.changeset/six-eggs-kick.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@design-blocks/primitives': minor 3 | '@design-blocks/system': minor 4 | --- 5 | 6 | Rename Styled to Block 7 | -------------------------------------------------------------------------------- /.changeset/six-parrots-explode.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/primitives": minor 3 | "@design-blocks/system": minor 4 | "@design-blocks/theme": minor 5 | "@design-blocks/types": minor 6 | --- 7 | 8 | Added support for sizes and borders and fixed in `createBlocks` 9 | -------------------------------------------------------------------------------- /.changeset/sixty-readers-rush.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/native": patch 3 | --- 4 | 5 | fixed stacks 6 | -------------------------------------------------------------------------------- /.changeset/smooth-horses-move.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/unstyled": major 3 | --- 4 | 5 | Export modules 6 | -------------------------------------------------------------------------------- /.changeset/sour-otters-burn.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/primitives": minor 3 | "@design-blocks/system": minor 4 | "@design-blocks/theme": minor 5 | "@design-blocks/types": minor 6 | --- 7 | 8 | Added support for colors in text components and solving some bugs 9 | -------------------------------------------------------------------------------- /.changeset/stale-shoes-unite.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/utils": minor 3 | --- 4 | 5 | Export modules 6 | -------------------------------------------------------------------------------- /.changeset/strange-files-relate.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/unstyled": minor 3 | --- 4 | 5 | added postinstall 6 | -------------------------------------------------------------------------------- /.changeset/strange-rabbits-remember.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/primitives": patch 3 | "@design-blocks/system": patch 4 | "@design-blocks/colors": patch 5 | "@design-blocks/theme": patch 6 | "@design-blocks/types": patch 7 | "@design-blocks/unstyled": patch 8 | "@design-blocks/utils": patch 9 | "@design-blocks/block": patch 10 | "@design-blocks/native": patch 11 | "tsconfig": patch 12 | --- 13 | 14 | Fixed stacks 15 | -------------------------------------------------------------------------------- /.changeset/tender-forks-confess.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/colors": patch 3 | "@design-blocks/primitives": patch 4 | "@design-blocks/system": patch 5 | "@design-blocks/theme": patch 6 | "@design-blocks/types": patch 7 | "@design-blocks/unstyled": patch 8 | "@design-blocks/utils": patch 9 | "@design-blocks/block": patch 10 | "@design-blocks/native": patch 11 | "tsconfig": patch 12 | --- 13 | 14 | Fixed types 15 | -------------------------------------------------------------------------------- /.changeset/two-tigers-applaud.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@design-blocks/colors': major 3 | '@design-blocks/primitives': major 4 | '@design-blocks/system': major 5 | '@design-blocks/theme': major 6 | '@design-blocks/types': major 7 | '@design-blocks/utils': major 8 | '@design-blocks/native': major 9 | 'tsconfig': major 10 | --- 11 | 12 | Initial version beta 13 | -------------------------------------------------------------------------------- /.changeset/violet-emus-hope.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@design-blocks/primitives": patch 3 | "@design-blocks/colors": patch 4 | "@design-blocks/system": patch 5 | "@design-blocks/theme": patch 6 | "@design-blocks/types": patch 7 | "@design-blocks/unstyled": patch 8 | "@design-blocks/utils": patch 9 | "@design-blocks/block": patch 10 | "@design-blocks/native": patch 11 | "tsconfig": patch 12 | --- 13 | 14 | fixed instance Stack 15 | -------------------------------------------------------------------------------- /.changeset/witty-teachers-dance.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@design-blocks/primitives': minor 3 | '@design-blocks/colors': minor 4 | '@design-blocks/system': minor 5 | '@design-blocks/theme': minor 6 | '@design-blocks/types': minor 7 | '@design-blocks/utils': minor 8 | '@design-blocks/core': minor 9 | '@design-blocks/native': minor 10 | --- 11 | 12 | Bump pakages, fixed types, added Theme in colors and remove Theme props in primitives 13 | -------------------------------------------------------------------------------- /.commitlintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["@commitlint/config-conventional"], 3 | "rules": { 4 | 'scope-case': [2, 'always', ['lower-case', 'camel-case', 'upper-case', 'pascal-case']], 5 | "type-enum": [2, 'always', ['chore', 'docs', 'feat', 'fix', 'hotfix', 'rfc', 'ci', 'revert', 'test']], 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | insert_final_newline = true 7 | indent_style = space 8 | indent_size = 2 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | 14 | [*.{js,jsx,ts,tsx,json,yml}] 15 | charset = utf-8 16 | indent_style = space 17 | indent_size = 2 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Environment files 2 | .DS_Store 3 | .history 4 | 5 | # Node directories 6 | node_modules 7 | 8 | build 9 | build-temp 10 | dist 11 | *.log 12 | .turbo 13 | 14 | # IDEs 15 | .idea 16 | **/*.iml 17 | 18 | # secrets 19 | secrets/ 20 | 21 | # Jest 22 | coverage/ 23 | 24 | # Swap the comments on the following lines if you don't wish to use zero-installs 25 | # Documentation here: https://yarnpkg.com/features/zero-installs 26 | .yarn/cache 27 | #.pnp.* 28 | 29 | 30 | .expo/ 31 | dist/ 32 | npm-debug.* 33 | *.jks 34 | *.p8 35 | *.p12 36 | *.key 37 | *.mobileprovision 38 | *.orig.* 39 | web-build/ 40 | 41 | # macOS 42 | .DS_Store 43 | 44 | # Temporary files created by Metro to check the health of the file watcher 45 | .metro-health-check* 46 | 47 | # Ignores folders generated by script `build` with `pnpm run build` 48 | ./packages/@blocks-unstyle/Button 49 | 50 | .vscode/* 51 | !.vscode/settings.json 52 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | pnpm commitlint --edit $1 5 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | pnpm run lint 5 | pnpm run bundlesize 6 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | node-linker=hoisted 2 | enable-pre-post-scripts=true 3 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | lts/fermium 2 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "files.exclude": { 3 | "packages/@blocks-unstyled/{Button,*.js,*.d.ts}": false, 4 | "packages/@blocks-colors/{radix-ui,tailwind-css,*.js,*.d.ts}": false 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('ts-jest').JestConfigWithTsJest} */ 2 | module.exports = { 3 | presets: ["module:metro-react-native-babel-preset"], 4 | }; 5 | -------------------------------------------------------------------------------- /biome.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://biomejs.dev/schemas/1.2.2/schema.json", 3 | "organizeImports": { 4 | "enabled": true 5 | }, 6 | "linter": { 7 | "enabled": true, 8 | "rules": { 9 | "recommended": true, 10 | "suspicious": { 11 | "noConsoleLog": "error", 12 | "noEmptyInterface": "off", 13 | "noExplicitAny": "off" 14 | }, 15 | "performance": { 16 | "noDelete": "error" 17 | }, 18 | "complexity": { 19 | "noBannedTypes": "off" 20 | }, 21 | "nursery": { 22 | "useGroupedTypeImport": "error", 23 | "useHookAtTopLevel": "error", 24 | "useExhaustiveDependencies": "error" 25 | } 26 | } 27 | }, 28 | "formatter": { 29 | "enabled": true, 30 | "formatWithErrors": false, 31 | "indentStyle": "space", 32 | "indentSize": 2, 33 | "lineWidth": 120, 34 | "ignore": [] 35 | }, 36 | "javascript": { 37 | "formatter": { 38 | "semicolons": "always", 39 | "quoteStyle": "single", 40 | "jsxQuoteStyle": "single" 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /docs/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openkitrun/design-blocks/7619f1f81eae0b80e358bc6ef4b5d0b9994fd548/docs/preview.png -------------------------------------------------------------------------------- /docs/preview_beta.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openkitrun/design-blocks/7619f1f81eae0b80e358bc6ef4b5d0b9994fd548/docs/preview_beta.png -------------------------------------------------------------------------------- /docs/showcase/lastplay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openkitrun/design-blocks/7619f1f81eae0b80e358bc6ef4b5d0b9994fd548/docs/showcase/lastplay.png -------------------------------------------------------------------------------- /docs/stacks.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openkitrun/design-blocks/7619f1f81eae0b80e358bc6ef4b5d0b9994fd548/docs/stacks.jpeg -------------------------------------------------------------------------------- /examples/basic/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { SafeAreaView, useColorScheme } from 'react-native'; 3 | 4 | import { StatusBar } from 'expo-status-bar'; 5 | 6 | import { ThemeProvider } from '@design-blocks/native'; 7 | 8 | import { themes, block } from './blocks.config'; 9 | 10 | import DocsScreen from './src/screens/docs/screen'; 11 | 12 | const SafeAreaViewBlock = block(SafeAreaView)(({ theme }) => { 13 | return { 14 | backgroundColor: theme.colors.zinc[950], 15 | height: '100%', 16 | }; 17 | }); 18 | 19 | export default function App() { 20 | const colorScheme = useColorScheme(); 21 | 22 | return ( 23 | 24 | 25 | 26 | 27 | 28 | 29 | ); 30 | } 31 | -------------------------------------------------------------------------------- /examples/basic/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "basic", 4 | "slug": "basic", 5 | "version": "1.0.0", 6 | "orientation": "portrait", 7 | "icon": "./assets/icon.png", 8 | "userInterfaceStyle": "light", 9 | "splash": { 10 | "image": "./assets/splash.png", 11 | "resizeMode": "contain", 12 | "backgroundColor": "#ffffff" 13 | }, 14 | "assetBundlePatterns": [ 15 | "**/*" 16 | ], 17 | "ios": { 18 | "supportsTablet": true 19 | }, 20 | "android": { 21 | "adaptiveIcon": { 22 | "foregroundImage": "./assets/adaptive-icon.png", 23 | "backgroundColor": "#ffffff" 24 | } 25 | }, 26 | "web": { 27 | "favicon": "./assets/favicon.png" 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /examples/basic/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openkitrun/design-blocks/7619f1f81eae0b80e358bc6ef4b5d0b9994fd548/examples/basic/assets/adaptive-icon.png -------------------------------------------------------------------------------- /examples/basic/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openkitrun/design-blocks/7619f1f81eae0b80e358bc6ef4b5d0b9994fd548/examples/basic/assets/favicon.png -------------------------------------------------------------------------------- /examples/basic/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openkitrun/design-blocks/7619f1f81eae0b80e358bc6ef4b5d0b9994fd548/examples/basic/assets/icon.png -------------------------------------------------------------------------------- /examples/basic/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openkitrun/design-blocks/7619f1f81eae0b80e358bc6ef4b5d0b9994fd548/examples/basic/assets/splash.png -------------------------------------------------------------------------------- /examples/basic/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /examples/basic/blocks.config.ts: -------------------------------------------------------------------------------- 1 | import { createBlocks, createTokens } from '@design-blocks/native'; 2 | import colors from '@design-blocks/colors/tailwind-css'; 3 | 4 | export const lightTheme = { 5 | tokens: { 6 | colors: { 7 | ...colors, 8 | }, 9 | }, 10 | extendTokens: { 11 | spacings: { 12 | '7xl': 76, 13 | '8xl': 80, 14 | }, 15 | radii: { 16 | '6xl': 32, 17 | '7xl': 36, 18 | }, 19 | fontSizes: { 20 | '10xl': 80, 21 | }, 22 | }, 23 | } as const; 24 | 25 | export const darkTheme = { 26 | tokens: { 27 | colors: { 28 | ...colors, 29 | }, 30 | }, 31 | extendTokens: { 32 | spacings: { 33 | '7xl': 76, 34 | '8xl': 80, 35 | }, 36 | radii: { 37 | '6xl': 32, 38 | '7xl': 36, 39 | }, 40 | fontSizes: { 41 | '10xl': 80, 42 | }, 43 | }, 44 | } as const; 45 | 46 | const [themeTokens] = createTokens({ theme: lightTheme }); 47 | const [darkThemeTokens] = createTokens({ theme: darkTheme }); 48 | 49 | export const { block, css, themes } = createBlocks({ 50 | themes: { light: themeTokens, dark: darkThemeTokens }, 51 | }); 52 | -------------------------------------------------------------------------------- /examples/basic/index.js: -------------------------------------------------------------------------------- 1 | import { registerRootComponent } from "expo"; 2 | 3 | import App from "./App"; 4 | 5 | // registerRootComponent calls AppRegistry.registerComponent('main', () => App); 6 | // It also ensures that whether you load the app in Expo Go or in a native build, 7 | // the environment is set up appropriately 8 | registerRootComponent(App); 9 | -------------------------------------------------------------------------------- /examples/basic/metro.config.js: -------------------------------------------------------------------------------- 1 | // Learn more https://docs.expo.dev/guides/monorepos 2 | const { getDefaultConfig } = require("expo/metro-config"); 3 | const { FileStore } = require("metro-cache"); 4 | const path = require("path"); 5 | 6 | const projectRoot = __dirname; 7 | const workspaceRoot = path.resolve(projectRoot, "../.."); 8 | 9 | const config = getDefaultConfig(projectRoot); 10 | 11 | // #1 - Watch all files in the monorepo 12 | config.watchFolders = [workspaceRoot]; 13 | // #3 - Force resolving nested modules to the folders below 14 | config.resolver.disableHierarchicalLookup = true; 15 | // #2 - Try resolving with project modules first, then workspace modules 16 | config.resolver.nodeModulesPaths = [ 17 | path.resolve(projectRoot, "node_modules"), 18 | path.resolve(workspaceRoot, "node_modules"), 19 | ]; 20 | 21 | // Use turborepo to restore the cache when possible 22 | config.cacheStores = [ 23 | new FileStore({ 24 | root: path.join(projectRoot, "node_modules", ".cache", "metro"), 25 | }), 26 | ]; 27 | 28 | module.exports = config; 29 | -------------------------------------------------------------------------------- /examples/basic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@examples/basic", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "scripts": { 6 | "start": "expo start", 7 | "android": "expo start --android", 8 | "dev:ios": "expo start --ios", 9 | "web": "expo start --web" 10 | }, 11 | "dependencies": { 12 | "@design-blocks/colors": "workspace:*", 13 | "@design-blocks/native": "workspace:*", 14 | "@design-blocks/primitives": "workspace:*", 15 | "@design-blocks/unstyled": "workspace:*", 16 | "expo": "~49.0.15", 17 | "expo-status-bar": "~1.6.0", 18 | "react": "18.2.0", 19 | "react-native": "0.72.6", 20 | "react-native-svg": "14.1.0" 21 | }, 22 | "devDependencies": { 23 | "@babel/core": "^7.20.0", 24 | "@types/react": "~18.2.14", 25 | "typescript": "^5.1.3" 26 | }, 27 | "private": true 28 | } 29 | -------------------------------------------------------------------------------- /examples/basic/src/components/icons/Add.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Svg, { Path } from 'react-native-svg'; 3 | 4 | import { IconProps } from './types'; 5 | 6 | function IconAdd({ color = '#000', size = 24, ...props }: IconProps) { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | } 13 | 14 | export default IconAdd; 15 | -------------------------------------------------------------------------------- /examples/basic/src/components/icons/Apps.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Svg, { Path } from 'react-native-svg'; 3 | 4 | import { IconProps } from './types'; 5 | 6 | function IconApps({ color = '#000', size = 24, ...props }: IconProps) { 7 | return ( 8 | 9 | 13 | 14 | ); 15 | } 16 | 17 | export default IconApps; 18 | -------------------------------------------------------------------------------- /examples/basic/src/components/icons/ArrowDropDown.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Svg, { Path } from 'react-native-svg'; 3 | 4 | import { IconProps } from './types'; 5 | 6 | function IconArrowDropDown({ color = '#000', size = 24, ...props }: IconProps) { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | } 13 | 14 | export default IconArrowDropDown; 15 | -------------------------------------------------------------------------------- /examples/basic/src/components/icons/ArrowRightUp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Svg, { Path } from 'react-native-svg'; 3 | 4 | import { IconProps } from './types'; 5 | 6 | function IconArrowRightUp({ color = '#000', size = 24, ...props }: IconProps) { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | } 13 | 14 | export default IconArrowRightUp; 15 | -------------------------------------------------------------------------------- /examples/basic/src/components/icons/Download.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Svg, { Path } from 'react-native-svg'; 3 | 4 | import { IconProps } from './types'; 5 | 6 | function IconDownload({ color = '#000', size = 24, ...props }: IconProps) { 7 | return ( 8 | 9 | 13 | 14 | ); 15 | } 16 | 17 | export default IconDownload; 18 | -------------------------------------------------------------------------------- /examples/basic/src/components/icons/Refresh.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Svg, { Path } from 'react-native-svg'; 3 | 4 | import { IconProps } from './types'; 5 | 6 | function IconRefresh({ color = '#000', size = 24, ...props }: IconProps) { 7 | return ( 8 | 9 | 13 | 14 | ); 15 | } 16 | 17 | export default IconRefresh; 18 | -------------------------------------------------------------------------------- /examples/basic/src/components/icons/types.ts: -------------------------------------------------------------------------------- 1 | export interface IconProps { 2 | size?: string | number; 3 | color?: string; 4 | style?: any; 5 | xmlns?: string; 6 | className?: string; 7 | strokeWidth?: number; 8 | xmlSpace?: string; 9 | enableBackground?: string; 10 | } 11 | -------------------------------------------------------------------------------- /examples/basic/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: "react-native", 3 | modulePathIgnorePatterns: [ 4 | "/node_modules", 5 | "/packages/(.+)/dist/", 6 | ], 7 | // collectCoverageFrom: [ 8 | // "packages/**/*.{js,jsx,ts,tsx}", 9 | // "!@blocks-primitives/.ci/*.tsx", 10 | // ], 11 | globals: { 12 | __DEV__: true, 13 | }, 14 | setupFilesAfterEnv: [ 15 | "@testing-library/jest-native/extend-expect", 16 | "@testing-library/react-native/extend-expect", 17 | ], 18 | }; 19 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@design-blocks/root", 3 | "version": "0.0.0", 4 | "repository": "git@github.com:openkitrun/design-blocks.git", 5 | "author": "Jorge Luis Calleja A. - wootsbot", 6 | "license": "MIT", 7 | "private": true, 8 | "engines": { 9 | "node": ">=18", 10 | "pnpm": ">=8" 11 | }, 12 | "scripts": { 13 | "prepare": "husky install", 14 | "postinstall": "husky install", 15 | "build": "turbo run build", 16 | "bundlesize": "turbo run bundlesize", 17 | "clean": "turbo run clean", 18 | "changeset": "changeset", 19 | "version": "changeset version", 20 | "release": "changeset publish", 21 | "version:dev": "changeset version --snapshot dev", 22 | "release:dev": "changeset publish --tag dev", 23 | "test": "jest", 24 | "test:coverage": "jest --coverage", 25 | "biome:check": "biome check ./src/**/*.ts", 26 | "biome:format": "biome format ./src/**/*.ts --write", 27 | "lint": "turbo run lint", 28 | "lint:fix": "turbo run lint:fix" 29 | }, 30 | "devDependencies": { 31 | "@biomejs/biome": "1.2.2", 32 | "@changesets/changelog-github": "0.4.8", 33 | "@changesets/cli": "2.26.1", 34 | "@changesets/get-release-plan": "3.0.16", 35 | "@changesets/types": "5.2.1", 36 | "@commitlint/cli": "17.7.2", 37 | "@commitlint/config-conventional": "17.7.0", 38 | "@testing-library/jest-native": "5.4.3", 39 | "@testing-library/react": "14.1.2", 40 | "@testing-library/react-native": "12.4.1", 41 | "@types/jest": "29.5.11", 42 | "@types/node": "20.7.0", 43 | "cross-env": "7.0.3", 44 | "husky": "8.0.3", 45 | "jest": "29.7.0", 46 | "tsconfig": "workspace:*", 47 | "turbo": "1.11.2", 48 | "typescript": "5.0.4" 49 | }, 50 | "packageManager": "pnpm@8.12.1", 51 | "pnpm": { 52 | "overrides": { 53 | "@types/react": "18.2.45", 54 | "react-native-builder-bob": "0.23.2" 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /packages/@blocks-colors/README.md: -------------------------------------------------------------------------------- 1 | # Design Blocks Colors 2 | 3 | A set of open-source color systems to design your apps beautiful and accessible. 4 | 5 | Choose the color scheme that best fits your project: 6 | 7 | - [Tailwind CSS Colors](https://tailwindcss.com/docs/customizing-colors) 8 | - [Radix Colors](https://www.radix-ui.com/colors) 9 | 10 | ## Super quick start 11 | 12 | ```bash 13 | // with pnpm 14 | pnpm add @design-blocks/colors 15 | 16 | // with yarn 17 | yarn add @design-blocks/colors 18 | 19 | // with npm 20 | npm add @design-blocks/colors 21 | ``` 22 | 23 | ### Tailwind CSS 24 | 25 | ```tsx 26 | import colors from '@design-blocks/colors/tailwind-css'; 27 | 28 | ; 29 | ``` 30 | `or` 31 | 32 | ```tsx 33 | import {tailwindCssColors} from '@design-blocks/colors'; 34 | 35 | ; 36 | ``` 37 | 38 | ### Radix Colors 39 | ```tsx 40 | import colors from '@design-blocks/colors/radix-ui'; 41 | 42 | ; 43 | ``` 44 | 45 | `or` 46 | 47 | ```tsx 48 | import {radixUiColors} from '@design-blocks/colors'; 49 | 50 | ; 51 | ``` 52 | 53 | ## with `@design-blocks`; 54 | 55 | ```ts 56 | import '@design-blocks/native'; 57 | import type { Colors } from '@design-blocks/colors/tailwind-css'; 58 | 59 | declare module '@design-blocks/native' { 60 | export interface Theme { 61 | colors: Colors; 62 | } 63 | } 64 | ``` 65 | -------------------------------------------------------------------------------- /packages/@blocks-colors/biome.json: -------------------------------------------------------------------------------- 1 | ../../biome.json -------------------------------------------------------------------------------- /packages/@blocks-colors/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@design-blocks/colors", 3 | "version": "1.0.0-beta.37", 4 | "main": "dist/commonjs/index.js", 5 | "module": "dist/module/index.js", 6 | "types": "dist/typescript/index.d.ts", 7 | "source": "src/index.ts", 8 | "files": [ 9 | "src", 10 | "dist", 11 | "tailwind-css", 12 | "radix-ui" 13 | ], 14 | "exports": { 15 | "./package.json": "./package.json", 16 | ".": { 17 | "types": "./dist/typescript/index.d.ts", 18 | "import": "./dist/module/index.js", 19 | "require": "./dist/commonjs/index.js" 20 | } 21 | }, 22 | "repository": { 23 | "type": "git", 24 | "repository": "git@github.com:openkitrun/design-blocks.git", 25 | "directory": "@blocks-colors" 26 | }, 27 | "scripts": { 28 | "build": "pnpm clean:build && pnpm build:native", 29 | "build:native": "bob build", 30 | "clean": "pnpm clean:build && rimraf -rf .turbo", 31 | "clean:build": "rimraf -rf dist", 32 | "lint": "../../node_modules/.bin/biome check src", 33 | "lint:fix": "../../node_modules/.bin/biome check --apply-unsafe src", 34 | "bundlesize": "bundlesize" 35 | }, 36 | "keywords": [], 37 | "bundlesize": [ 38 | { 39 | "path": "./dist/commonjs/index.js", 40 | "maxSize": "0.5kB" 41 | }, 42 | { 43 | "path": "./dist/module/index.js", 44 | "maxSize": "100B" 45 | }, 46 | { 47 | "path": "./dist/typescript/index.d.ts", 48 | "maxSize": "100B" 49 | } 50 | ], 51 | "dependencies": { 52 | "@design-blocks/types": "workspace:*" 53 | }, 54 | "devDependencies": { 55 | "bundlesize": "0.18.1", 56 | "react-native-builder-bob": "0.23.2", 57 | "rimraf": "4.1.2", 58 | "tsconfig": "workspace:*", 59 | "typescript": "5.0.4" 60 | }, 61 | "react-native-builder-bob": { 62 | "source": "src", 63 | "output": "dist", 64 | "targets": [ 65 | "commonjs", 66 | "module", 67 | [ 68 | "typescript", 69 | { 70 | "project": "tsconfig.build.json" 71 | } 72 | ] 73 | ] 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /packages/@blocks-colors/radix-ui/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@design-blocks/colors/radix-ui", 3 | "version": "1.0.0", 4 | "private": true, 5 | "sideEffects": false, 6 | "module": "../dist/module/radixUi/index.js", 7 | "main": "../dist/commonjs/radixUi/index.js", 8 | "types": "../dist/typescript/radixUi/index.d.ts" 9 | } 10 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './schema'; 2 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/amber.ts: -------------------------------------------------------------------------------- 1 | export const amber = { 2 | amber1: '#fefdfb', 3 | amber2: '#fff9ed', 4 | amber3: '#fff4d5', 5 | amber4: '#ffecbc', 6 | amber5: '#ffe3a2', 7 | amber6: '#ffd386', 8 | amber7: '#f3ba63', 9 | amber8: '#ee9d2b', 10 | amber9: '#ffb224', 11 | amber10: '#ffa01c', 12 | amber11: '#ad5700', 13 | amber12: '#4e2009', 14 | } as const; 15 | 16 | export default amber; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/amberA.ts: -------------------------------------------------------------------------------- 1 | export const amberA = { 2 | amberA1: '#c08205', 3 | amberA2: '#ffab02', 4 | amberA3: '#ffbb01', 5 | amberA4: '#ffb700', 6 | amberA5: '#ffb300', 7 | amberA6: '#ffa201', 8 | amberA7: '#ec8d00', 9 | amberA8: '#ea8900', 10 | amberA9: '#ffa600', 11 | amberA10: '#ff9500', 12 | amberA11: '#ab5300', 13 | amberA12: '#481800', 14 | } as const; 15 | 16 | export default amberA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/amberDark.ts: -------------------------------------------------------------------------------- 1 | export const amberDark = { 2 | amber1: '#1f1300', 3 | amber2: '#271700', 4 | amber3: '#341c00', 5 | amber4: '#3f2200', 6 | amber5: '#4a2900', 7 | amber6: '#573300', 8 | amber7: '#693f05', 9 | amber8: '#824e00', 10 | amber9: '#ffb224', 11 | amber10: '#ffcb47', 12 | amber11: '#f1a10d', 13 | amber12: '#fef3dd', 14 | } as const; 15 | 16 | export default amberDark; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/amberDarkA.ts: -------------------------------------------------------------------------------- 1 | export const amberDarkA = { 2 | amberA1: '#000000', 3 | amberA2: '#fd8300', 4 | amberA3: '#fe7300', 5 | amberA4: '#ff7b00', 6 | amberA5: '#ff8400', 7 | amberA6: '#ff9500', 8 | amberA7: '#ff970f', 9 | amberA8: '#ff9900', 10 | amberA9: '#ffb625', 11 | amberA10: '#ffce48', 12 | amberA11: '#ffab0e', 13 | amberA12: '#fff8e1', 14 | } as const; 15 | 16 | export default amberDarkA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/blackA.ts: -------------------------------------------------------------------------------- 1 | export const blackA = { 2 | blackA1: '#000000', 3 | blackA2: '#000000', 4 | blackA3: '#000000', 5 | blackA4: '#000000', 6 | blackA5: '#000000', 7 | blackA6: '#000000', 8 | blackA7: '#000000', 9 | blackA8: '#000000', 10 | blackA9: '#000000', 11 | blackA10: '#000000', 12 | blackA11: '#000000', 13 | blackA12: '#000000', 14 | } as const; 15 | 16 | export default blackA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/blue.ts: -------------------------------------------------------------------------------- 1 | export const blue = { 2 | blue1: '#fbfdff', 3 | blue2: '#f5faff', 4 | blue3: '#edf6ff', 5 | blue4: '#e1f0ff', 6 | blue5: '#cee7fe', 7 | blue6: '#b7d9f8', 8 | blue7: '#96c7f2', 9 | blue8: '#5eb0ef', 10 | blue9: '#0091ff', 11 | blue10: '#0081f1', 12 | blue11: '#006adc', 13 | blue12: '#00254d', 14 | } as const; 15 | 16 | export default blue; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/blueA.ts: -------------------------------------------------------------------------------- 1 | export const blueA = { 2 | blueA1: '#0582ff', 3 | blueA2: '#0582ff', 4 | blueA3: '#0280ff', 5 | blueA4: '#0180ff', 6 | blueA5: '#0180ef', 7 | blueA6: '#0177e6', 8 | blueA7: '#0077df', 9 | blueA8: '#0082e6', 10 | blueA9: '#0091ff', 11 | blueA10: '#0080f1', 12 | blueA11: '#0066db', 13 | blueA12: '#002149', 14 | } as const; 15 | 16 | export default blueA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/blueDark.ts: -------------------------------------------------------------------------------- 1 | export const blueDark = { 2 | blue1: '#0f1720', 3 | blue2: '#0f1b2d', 4 | blue3: '#10243e', 5 | blue4: '#102a4c', 6 | blue5: '#0f3058', 7 | blue6: '#0d3868', 8 | blue7: '#0a4481', 9 | blue8: '#0954a5', 10 | blue9: '#0091ff', 11 | blue10: '#369eff', 12 | blue11: '#52a9ff', 13 | blue12: '#eaf6ff', 14 | } as const; 15 | 16 | export default blueDark; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/blueDarkA.ts: -------------------------------------------------------------------------------- 1 | export const blueDarkA = { 2 | blueA1: '#000000', 3 | blueA2: '#0f5afc', 4 | blueA3: '#1677fe', 5 | blueA4: '#1476fe', 6 | blueA5: '#0f7bfe', 7 | blueA6: '#097cff', 8 | blueA7: '#047dff', 9 | blueA8: '#057eff', 10 | blueA9: '#0095ff', 11 | blueA10: '#37a1ff', 12 | blueA11: '#53acff', 13 | blueA12: '#effbff', 14 | } as const; 15 | 16 | export default blueDarkA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/bronze.ts: -------------------------------------------------------------------------------- 1 | export const bronze = { 2 | bronze1: '#fdfcfc', 3 | bronze2: '#fdf8f6', 4 | bronze3: '#f8f1ee', 5 | bronze4: '#f2e8e4', 6 | bronze5: '#eaddd7', 7 | bronze6: '#e0cec7', 8 | bronze7: '#d1b9b0', 9 | bronze8: '#bfa094', 10 | bronze9: '#a18072', 11 | bronze10: '#977669', 12 | bronze11: '#846358', 13 | bronze12: '#43302b', 14 | } as const; 15 | 16 | export default bronze; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/bronzeA.ts: -------------------------------------------------------------------------------- 1 | export const bronzeA = { 2 | bronzeA1: '#580505', 3 | bronzeA2: '#c73c05', 4 | bronzeA3: '#972e01', 5 | bronzeA4: '#842600', 6 | bronzeA5: '#792700', 7 | bronzeA6: '#722100', 8 | bronzeA7: '#6e2100', 9 | bronzeA8: '#671d00', 10 | bronzeA9: '#551a00', 11 | bronzeA10: '#4e1600', 12 | bronzeA11: '#431100', 13 | bronzeA12: '#1d0600', 14 | } as const; 15 | 16 | export default bronzeA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/bronzeDark.ts: -------------------------------------------------------------------------------- 1 | export const bronzeDark = { 2 | bronze1: '#191514', 3 | bronze2: '#1f1917', 4 | bronze3: '#2a211f', 5 | bronze4: '#332824', 6 | bronze5: '#3b2e29', 7 | bronze6: '#453530', 8 | bronze7: '#57433c', 9 | bronze8: '#74594e', 10 | bronze9: '#a18072', 11 | bronze10: '#b08c7d', 12 | bronze11: '#cba393', 13 | bronze12: '#f9ede7', 14 | } as const; 15 | 16 | export default bronzeDark; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/bronzeDarkA.ts: -------------------------------------------------------------------------------- 1 | export const bronzeDarkA = { 2 | bronzeA1: '#000000', 3 | bronzeA2: '#f7aa83', 4 | bronzeA3: '#ffb7a9', 5 | bronzeA4: '#fdbca0', 6 | bronzeA5: '#ffbea2', 7 | bronzeA6: '#febca6', 8 | bronzeA7: '#ffbfa8', 9 | bronzeA8: '#ffc1a6', 10 | bronzeA9: '#ffcab3', 11 | bronzeA10: '#ffcab4', 12 | bronzeA11: '#ffccb8', 13 | bronzeA12: '#fff3ed', 14 | } as const; 15 | 16 | export default bronzeDarkA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/brown.ts: -------------------------------------------------------------------------------- 1 | export const brown = { 2 | brown1: '#fefdfc', 3 | brown2: '#fcf9f6', 4 | brown3: '#f8f1ea', 5 | brown4: '#f4e9dd', 6 | brown5: '#efddcc', 7 | brown6: '#e8cdb5', 8 | brown7: '#ddb896', 9 | brown8: '#d09e72', 10 | brown9: '#ad7f58', 11 | brown10: '#a07653', 12 | brown11: '#886349', 13 | brown12: '#3f2c22', 14 | } as const; 15 | 16 | export default brown; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/brownA.ts: -------------------------------------------------------------------------------- 1 | export const brownA = { 2 | brownA1: '#ab5805', 3 | brownA2: '#ab5805', 4 | brownA3: '#ab5602', 5 | brownA4: '#ad5a01', 6 | brownA5: '#af5500', 7 | brownA6: '#b05201', 8 | brownA7: '#ac5300', 9 | brownA8: '#aa4f00', 10 | brownA9: '#823d00', 11 | brownA10: '#723300', 12 | brownA11: '#582500', 13 | brownA12: '#220c00', 14 | } as const; 15 | export default brownA; 16 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/brownDark.ts: -------------------------------------------------------------------------------- 1 | export const brownDark = { 2 | brown1: '#191513', 3 | brown2: '#221813', 4 | brown3: '#2e201a', 5 | brown4: '#36261e', 6 | brown5: '#3e2c22', 7 | brown6: '#493528', 8 | brown7: '#5c4332', 9 | brown8: '#775940', 10 | brown9: '#ad7f58', 11 | brown10: '#bd8b60', 12 | brown11: '#dba16e', 13 | brown12: '#faf0e5', 14 | } as const; 15 | 16 | export default brownDark; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/brownDarkA.ts: -------------------------------------------------------------------------------- 1 | export const brownDarkA = { 2 | brownA1: '#000000', 3 | brownA2: '#ff6913', 4 | brownA3: '#fd9163', 5 | brownA4: '#fe9f6c', 6 | brownA5: '#feac72', 7 | brownA6: '#feb079', 8 | brownA7: '#feb47e', 9 | brownA8: '#febc82', 10 | brownA9: '#ffba7e', 11 | brownA10: '#ffbb7f', 12 | brownA11: '#ffbb7f', 13 | brownA12: '#fff5e9', 14 | } as const; 15 | 16 | export default brownDarkA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/crimson.ts: -------------------------------------------------------------------------------- 1 | export const crimson = { 2 | crimson1: '#fffcfd', 3 | crimson2: '#fff7fb', 4 | crimson3: '#feeff6', 5 | crimson4: '#fce5f0', 6 | crimson5: '#f9d8e7', 7 | crimson6: '#f4c6db', 8 | crimson7: '#edadc8', 9 | crimson8: '#e58fb1', 10 | crimson9: '#e93d82', 11 | crimson10: '#e03177', 12 | crimson11: '#d31e66', 13 | crimson12: '#3d0d1d', 14 | } as const; 15 | 16 | export default crimson; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/crimsonA.ts: -------------------------------------------------------------------------------- 1 | export const crimsonA = { 2 | crimsonA1: '#ff0558', 3 | crimsonA2: '#ff0582', 4 | crimsonA3: '#ef0170', 5 | crimsonA4: '#e2006d', 6 | crimsonA5: '#d80061', 7 | crimsonA6: '#ce015d', 8 | crimsonA7: '#c70053', 9 | crimsonA8: '#c4004f', 10 | crimsonA9: '#e2005a', 11 | crimsonA10: '#d90057', 12 | crimsonA11: '#cd0052', 13 | crimsonA12: '#330011', 14 | } as const; 15 | 16 | export default crimsonA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/crimsonDark.ts: -------------------------------------------------------------------------------- 1 | export const crimsonDark = { 2 | crimson1: '#1d1418', 3 | crimson2: '#27141c', 4 | crimson3: '#3c1827', 5 | crimson4: '#481a2d', 6 | crimson5: '#541b33', 7 | crimson6: '#641d3b', 8 | crimson7: '#801d45', 9 | crimson8: '#ae1955', 10 | crimson9: '#e93d82', 11 | crimson10: '#f04f88', 12 | crimson11: '#f76190', 13 | crimson12: '#feecf4', 14 | } as const; 15 | 16 | export default crimsonDark; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/crimsonDarkA.ts: -------------------------------------------------------------------------------- 1 | export const crimsonDarkA = { 2 | crimsonA1: '#000000', 3 | crimsonA2: '#fb1471', 4 | crimsonA3: '#fe3186', 5 | crimsonA4: '#fe3384', 6 | crimsonA5: '#fe3186', 7 | crimsonA6: '#fe3186', 8 | crimsonA7: '#fe287e', 9 | crimsonA8: '#ff1c77', 10 | crimsonA9: '#ff418d', 11 | crimsonA10: '#ff538f', 12 | crimsonA11: '#ff6495', 13 | crimsonA12: '#fff0f8', 14 | } as const; 15 | 16 | export default crimsonDarkA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/cyan.ts: -------------------------------------------------------------------------------- 1 | export const cyan = { 2 | cyan1: '#fafdfe', 3 | cyan2: '#f2fcfd', 4 | cyan3: '#e7f9fb', 5 | cyan4: '#d8f3f6', 6 | cyan5: '#c4eaef', 7 | cyan6: '#aadee6', 8 | cyan7: '#84cdda', 9 | cyan8: '#3db9cf', 10 | cyan9: '#05a2c2', 11 | cyan10: '#0894b3', 12 | cyan11: '#0c7792', 13 | cyan12: '#04313c', 14 | } as const; 15 | 16 | export default cyan; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/cyanA.ts: -------------------------------------------------------------------------------- 1 | export const cyanA = { 2 | cyanA1: '#059bcd', 3 | cyanA2: '#00c6d8', 4 | cyanA3: '#02c0d5', 5 | cyanA4: '#00b1c4', 6 | cyanA5: '#01a4ba', 7 | cyanA6: '#019cb4', 8 | cyanA7: '#0097b2', 9 | cyanA8: '#00a3c0', 10 | cyanA9: '#00a1c1', 11 | cyanA10: '#0090b0', 12 | cyanA11: '#00718d', 13 | cyanA12: '#002d38', 14 | } as const; 15 | 16 | export default cyanA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/cyanDark.ts: -------------------------------------------------------------------------------- 1 | export const cyanDark = { 2 | cyan1: '#07191d', 3 | cyan2: '#061e24', 4 | cyan3: '#072830', 5 | cyan4: '#07303b', 6 | cyan5: '#073844', 7 | cyan6: '#064150', 8 | cyan7: '#045063', 9 | cyan8: '#00647d', 10 | cyan9: '#05a2c2', 11 | cyan10: '#00b1cc', 12 | cyan11: '#00c2d7', 13 | cyan12: '#e1f8fa', 14 | } as const; 15 | 16 | export default cyanDark; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/cyanDarkA.ts: -------------------------------------------------------------------------------- 1 | export const cyanDarkA = { 2 | cyanA1: '#000000', 3 | cyanA2: '#00bbff', 4 | cyanA3: '#07cbfc', 5 | cyanA4: '#07c5ff', 6 | cyanA5: '#07cdfe', 7 | cyanA6: '#02c8ff', 8 | cyanA7: '#00ccff', 9 | cyanA8: '#00c8ff', 10 | cyanA9: '#04d5ff', 11 | cyanA10: '#00ddff', 12 | cyanA11: '#00e5fe', 13 | cyanA12: '#e6fdff', 14 | } as const; 15 | 16 | export default cyanDarkA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/gold.ts: -------------------------------------------------------------------------------- 1 | export const gold = { 2 | gold1: '#fdfdfc', 3 | gold2: '#fbf9f2', 4 | gold3: '#f5f2e9', 5 | gold4: '#eeeadd', 6 | gold5: '#e5dfd0', 7 | gold6: '#dad1bd', 8 | gold7: '#cbbda4', 9 | gold8: '#b8a383', 10 | gold9: '#978365', 11 | gold10: '#8c795d', 12 | gold11: '#776750', 13 | gold12: '#3b352b', 14 | } as const; 15 | 16 | export default gold; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/goldA.ts: -------------------------------------------------------------------------------- 1 | export const goldA = { 2 | goldA1: '#585805', 3 | goldA2: '#b08a00', 4 | goldA3: '#8c6a02', 5 | goldA4: '#806301', 6 | goldA5: '#725201', 7 | goldA6: '#704d00', 8 | goldA7: '#6e4500', 9 | goldA8: '#6d4200', 10 | goldA9: '#533200', 11 | goldA10: '#4a2d00', 12 | goldA11: '#392100', 13 | goldA12: '#130c00', 14 | } as const; 15 | 16 | export default goldA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/goldDark.ts: -------------------------------------------------------------------------------- 1 | export const goldDark = { 2 | gold1: '#171613', 3 | gold2: '#1c1a15', 4 | gold3: '#26231c', 5 | gold4: '#2e2a21', 6 | gold5: '#353026', 7 | gold6: '#3e382c', 8 | gold7: '#504737', 9 | gold8: '#6b5d48', 10 | gold9: '#978365', 11 | gold10: '#a59071', 12 | gold11: '#bfa888', 13 | gold12: '#f7f4e7', 14 | } as const; 15 | 16 | export default goldDark; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/goldDarkA.ts: -------------------------------------------------------------------------------- 1 | export const goldDarkA = { 2 | goldA1: '#000000', 3 | goldA2: '#facb6e', 4 | goldA3: '#fede9d', 5 | goldA4: '#fdde9f', 6 | goldA5: '#fedda5', 7 | goldA6: '#fedfa7', 8 | goldA7: '#ffdda6', 9 | goldA8: '#fed9a5', 10 | goldA9: '#ffdca7', 11 | goldA10: '#ffdcac', 12 | goldA11: '#ffe0b4', 13 | goldA12: '#fffcee', 14 | } as const; 15 | 16 | export default goldDarkA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/grass.ts: -------------------------------------------------------------------------------- 1 | export const grass = { 2 | grass1: '#fbfefb', 3 | grass2: '#f3fcf3', 4 | grass3: '#ebf9eb', 5 | grass4: '#dff3df', 6 | grass5: '#ceebcf', 7 | grass6: '#b7dfba', 8 | grass7: '#97cf9c', 9 | grass8: '#65ba75', 10 | grass9: '#46a758', 11 | grass10: '#3d9a50', 12 | grass11: '#297c3b', 13 | grass12: '#1b311e', 14 | } as const; 15 | 16 | export default grass; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/grassA.ts: -------------------------------------------------------------------------------- 1 | export const grassA = { 2 | grassA1: '#05c005', 3 | grassA2: '#05c005', 4 | grassA3: '#02b302', 5 | grassA4: '#01a001', 6 | grassA5: '#019706', 7 | grassA6: '#018e0c', 8 | grassA7: '#008a0c', 9 | grassA8: '#008d1a', 10 | grassA9: '#008619', 11 | grassA10: '#007a19', 12 | grassA11: '#006316', 13 | grassA12: '#001904', 14 | } as const; 15 | 16 | export default grassA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/grassDark.ts: -------------------------------------------------------------------------------- 1 | export const grassDark = { 2 | grass1: '#0d1912', 3 | grass2: '#0f1e13', 4 | grass3: '#132819', 5 | grass4: '#16301d', 6 | grass5: '#193921', 7 | grass6: '#1d4427', 8 | grass7: '#245530', 9 | grass8: '#2f6e3b', 10 | grass9: '#46a758', 11 | grass10: '#55b467', 12 | grass11: '#63c174', 13 | grass12: '#e5fbeb', 14 | } as const; 15 | export default grassDark; 16 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/grassDarkA.ts: -------------------------------------------------------------------------------- 1 | export const grassDarkA = { 2 | grassA1: '#000000', 3 | grassA2: '#68fc3f', 4 | grassA3: '#68fc7b', 5 | grassA4: '#67ff80', 6 | grassA5: '#63fe7d', 7 | grassA6: '#63ff82', 8 | grassA7: '#65ff84', 9 | grassA8: '#69ff82', 10 | grassA9: '#69ff82', 11 | grassA10: '#78ff91', 12 | grassA11: '#83ff97', 13 | grassA12: '#eafff0', 14 | } as const; 15 | 16 | export default grassDarkA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/gray.ts: -------------------------------------------------------------------------------- 1 | export const gray = { 2 | gray1: '#fcfcfc', 3 | gray2: '#f8f8f8', 4 | gray3: '#f3f3f3', 5 | gray4: '#ededed', 6 | gray5: '#e8e8e8', 7 | gray6: '#e2e2e2', 8 | gray7: '#dbdbdb', 9 | gray8: '#c7c7c7', 10 | gray9: '#8f8f8f', 11 | gray10: '#858585', 12 | gray11: '#6f6f6f', 13 | gray12: '#171717', 14 | } as const; 15 | export default gray; 16 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/grayA.ts: -------------------------------------------------------------------------------- 1 | export const grayA = { 2 | grayA1: '#000000', 3 | grayA2: '#000000', 4 | grayA3: '#000000', 5 | grayA4: '#000000', 6 | grayA5: '#000000', 7 | grayA6: '#000000', 8 | grayA7: '#000000', 9 | grayA8: '#000000', 10 | grayA9: '#000000', 11 | grayA10: '#000000', 12 | grayA11: '#000000', 13 | grayA12: '#000000', 14 | } as const; 15 | export default grayA; 16 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/grayDark.ts: -------------------------------------------------------------------------------- 1 | export const grayDark = { 2 | gray1: '#161616', 3 | gray2: '#1c1c1c', 4 | gray3: '#232323', 5 | gray4: '#282828', 6 | gray5: '#2e2e2e', 7 | gray6: '#343434', 8 | gray7: '#3e3e3e', 9 | gray8: '#505050', 10 | gray9: '#707070', 11 | gray10: '#7e7e7e', 12 | gray11: '#a0a0a0', 13 | gray12: '#ededed', 14 | } as const; 15 | 16 | export default grayDark; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/grayDarkA.ts: -------------------------------------------------------------------------------- 1 | export const grayDarkA = { 2 | grayA1: '#ffffff', 3 | grayA2: '#ffffff', 4 | grayA3: '#ffffff', 5 | grayA4: '#ffffff', 6 | grayA5: '#ffffff', 7 | grayA6: '#ffffff', 8 | grayA7: '#ffffff', 9 | grayA8: '#ffffff', 10 | grayA9: '#ffffff', 11 | grayA10: '#ffffff', 12 | grayA11: '#ffffff', 13 | grayA12: '#ffffff', 14 | } as const; 15 | 16 | export default grayDarkA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/green.ts: -------------------------------------------------------------------------------- 1 | export const green = { 2 | green1: '#fbfefc', 3 | green2: '#f2fcf5', 4 | green3: '#e9f9ee', 5 | green4: '#ddf3e4', 6 | green5: '#ccebd7', 7 | green6: '#b4dfc4', 8 | green7: '#92ceac', 9 | green8: '#5bb98c', 10 | green9: '#30a46c', 11 | green10: '#299764', 12 | green11: '#18794e', 13 | green12: '#153226', 14 | } as const; 15 | export default green; 16 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/greenA.ts: -------------------------------------------------------------------------------- 1 | export const greenA = { 2 | greenA1: '#05c043', 3 | greenA2: '#00c43b', 4 | greenA3: '#02ba3c', 5 | greenA4: '#01a635', 6 | greenA5: '#009b36', 7 | greenA6: '#019336', 8 | greenA7: '#008c3d', 9 | greenA8: '#00934c', 10 | greenA9: '#008f4a', 11 | greenA10: '#008346', 12 | greenA11: '#006b3b', 13 | greenA12: '#002012', 14 | } as const; 15 | 16 | export default greenA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/greenDark.ts: -------------------------------------------------------------------------------- 1 | export const greenDark = { 2 | green1: '#0d1912', 3 | green2: '#0c1f17', 4 | green3: '#0f291e', 5 | green4: '#113123', 6 | green5: '#133929', 7 | green6: '#164430', 8 | green7: '#1b543a', 9 | green8: '#236e4a', 10 | green9: '#30a46c', 11 | green10: '#3cb179', 12 | green11: '#4cc38a', 13 | green12: '#e5fbeb', 14 | } as const; 15 | 16 | export default greenDark; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/greenDarkA.ts: -------------------------------------------------------------------------------- 1 | export const greenDarkA = { 2 | greenA1: '#000000', 3 | greenA2: '#00f7ca', 4 | greenA3: '#2afebe', 5 | greenA4: '#33feb3', 6 | greenA5: '#38feb5', 7 | greenA6: '#3dffb1', 8 | greenA7: '#43ffad', 9 | greenA8: '#49ffaa', 10 | greenA9: '#47ffa6', 11 | greenA10: '#54ffaf', 12 | greenA11: '#62ffb3', 13 | greenA12: '#eafff0', 14 | } as const; 15 | 16 | export default greenDarkA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/indigo.ts: -------------------------------------------------------------------------------- 1 | export const indigo = { 2 | indigo1: '#fdfdfe', 3 | indigo2: '#f8faff', 4 | indigo3: '#f0f4ff', 5 | indigo4: '#e6edfe', 6 | indigo5: '#d9e2fc', 7 | indigo6: '#c6d4f9', 8 | indigo7: '#aec0f5', 9 | indigo8: '#8da4ef', 10 | indigo9: '#3e63dd', 11 | indigo10: '#3a5ccc', 12 | indigo11: '#3451b2', 13 | indigo12: '#101d46', 14 | } as const; 15 | 16 | export default indigo; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/indigoA.ts: -------------------------------------------------------------------------------- 1 | export const indigoA = { 2 | indigoA1: '#050582', 3 | indigoA2: '#054cff', 4 | indigoA3: '#0144ff', 5 | indigoA4: '#0247f5', 6 | indigoA5: '#023ceb', 7 | indigoA6: '#013de4', 8 | indigoA7: '#0038e0', 9 | indigoA8: '#0134db', 10 | indigoA9: '#0031d2', 11 | indigoA10: '#002cbd', 12 | indigoA11: '#00259e', 13 | indigoA12: '#000e3a', 14 | } as const; 15 | 16 | export default indigoA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/indigoDark.ts: -------------------------------------------------------------------------------- 1 | export const indigoDark = { 2 | indigo1: '#131620', 3 | indigo2: '#15192d', 4 | indigo3: '#192140', 5 | indigo4: '#1c274f', 6 | indigo5: '#1f2c5c', 7 | indigo6: '#22346e', 8 | indigo7: '#273e89', 9 | indigo8: '#2f4eb2', 10 | indigo9: '#3e63dd', 11 | indigo10: '#5373e7', 12 | indigo11: '#849dff', 13 | indigo12: '#eef1fd', 14 | } as const; 15 | 16 | export default indigoDark; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/indigoDarkA.ts: -------------------------------------------------------------------------------- 1 | export const indigoDarkA = { 2 | indigoA1: '#000000', 3 | indigoA2: '#3549fc', 4 | indigoA3: '#3c63fe', 5 | indigoA4: '#3d67ff', 6 | indigoA5: '#3f69fe', 7 | indigoA6: '#3e6bff', 8 | indigoA7: '#3d6aff', 9 | indigoA8: '#3e6bff', 10 | indigoA9: '#4571ff', 11 | indigoA10: '#5a7eff', 12 | indigoA11: '#86a0ff', 13 | indigoA12: '#f2f5ff', 14 | } as const; 15 | 16 | export default indigoDarkA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/lime.ts: -------------------------------------------------------------------------------- 1 | export const lime = { 2 | lime1: '#fcfdfa', 3 | lime2: '#f7fcf0', 4 | lime3: '#eefadc', 5 | lime4: '#e4f7c7', 6 | lime5: '#d7f2b0', 7 | lime6: '#c9e894', 8 | lime7: '#b1d16a', 9 | lime8: '#94ba2c', 10 | lime9: '#99d52a', 11 | lime10: '#93c926', 12 | lime11: '#5d770d', 13 | lime12: '#263209', 14 | } as const; 15 | 16 | export default lime; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/limeA.ts: -------------------------------------------------------------------------------- 1 | export const limeA = { 2 | limeA1: '#699b05', 3 | limeA2: '#77cc01', 4 | limeA3: '#84db01', 5 | limeA4: '#83db00', 6 | limeA5: '#7cd500', 7 | limeA6: '#7fc800', 8 | limeA7: '#78b000', 9 | limeA8: '#7eac00', 10 | limeA9: '#85cd00', 11 | limeA10: '#80c000', 12 | limeA11: '#547000', 13 | limeA12: '#1e2b00', 14 | } as const; 15 | export default limeA; 16 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/limeDark.ts: -------------------------------------------------------------------------------- 1 | export const limeDark = { 2 | lime1: '#141807', 3 | lime2: '#181d08', 4 | lime3: '#1e260d', 5 | lime4: '#252e0f', 6 | lime5: '#2b3711', 7 | lime6: '#344213', 8 | lime7: '#415215', 9 | lime8: '#536716', 10 | lime9: '#99d52a', 11 | lime10: '#c4f042', 12 | lime11: '#87be22', 13 | lime12: '#effbdd', 14 | } as const; 15 | 16 | export default limeDark; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/limeDarkA.ts: -------------------------------------------------------------------------------- 1 | export const limeDarkA = { 2 | limeA1: '#000000', 3 | limeA2: '#cafb35', 4 | limeA3: '#b8fd6a', 5 | limeA4: '#c4fd5b', 6 | limeA5: '#befe51', 7 | limeA6: '#c5ff49', 8 | limeA7: '#c8fe3f', 9 | limeA8: '#ccff33', 10 | limeA9: '#b7ff32', 11 | limeA10: '#d1ff46', 12 | limeA11: '#b5ff2c', 13 | limeA12: '#f4ffe1', 14 | } as const; 15 | 16 | export default limeDarkA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/mauve.ts: -------------------------------------------------------------------------------- 1 | export const mauve = { 2 | mauve1: '#fdfcfd', 3 | mauve2: '#f9f8f9', 4 | mauve3: '#f4f2f4', 5 | mauve4: '#eeedef', 6 | mauve5: '#e9e8ea', 7 | mauve6: '#e4e2e4', 8 | mauve7: '#dcdbdd', 9 | mauve8: '#c8c7cb', 10 | mauve9: '#908e96', 11 | mauve10: '#86848d', 12 | mauve11: '#6f6e77', 13 | mauve12: '#1a1523', 14 | } as const; 15 | 16 | export default mauve; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/mauveA.ts: -------------------------------------------------------------------------------- 1 | export const mauveA = { 2 | mauveA1: '#580558', 3 | mauveA2: '#290529', 4 | mauveA3: '#270027', 5 | mauveA4: '#10011e', 6 | mauveA5: '#0d0218', 7 | mauveA6: '#120112', 8 | mauveA7: '#08010f', 9 | mauveA8: '#050012', 10 | mauveA9: '#050012', 11 | mauveA10: '#040013', 12 | mauveA11: '#020010', 13 | mauveA12: '#05000f', 14 | } as const; 15 | 16 | export default mauveA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/mauveDark.ts: -------------------------------------------------------------------------------- 1 | export const mauveDark = { 2 | mauve1: '#161618', 3 | mauve2: '#1c1c1f', 4 | mauve3: '#232326', 5 | mauve4: '#28282c', 6 | mauve5: '#2e2e32', 7 | mauve6: '#34343a', 8 | mauve7: '#3e3e44', 9 | mauve8: '#504f57', 10 | mauve9: '#706f78', 11 | mauve10: '#7e7d86', 12 | mauve11: '#a09fa6', 13 | mauve12: '#ededef', 14 | } as const; 15 | 16 | export default mauveDark; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/mauveDarkA.ts: -------------------------------------------------------------------------------- 1 | export const mauveDarkA = { 2 | mauveA1: '#000000', 3 | mauveA2: '#d7d7fa', 4 | mauveA3: '#ebebfe', 5 | mauveA4: '#e5e5fe', 6 | mauveA5: '#eaeafe', 7 | mauveA6: '#e1e1fe', 8 | mauveA7: '#e8e8fe', 9 | mauveA8: '#eae7ff', 10 | mauveA9: '#eeecff', 11 | mauveA10: '#f0eeff', 12 | mauveA11: '#f7f5ff', 13 | mauveA12: '#fdfdff', 14 | } as const; 15 | 16 | export default mauveDarkA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/mint.ts: -------------------------------------------------------------------------------- 1 | export const mint = { 2 | mint1: '#f9fefd', 3 | mint2: '#effefa', 4 | mint3: '#e1fbf4', 5 | mint4: '#d2f7ed', 6 | mint5: '#c0efe3', 7 | mint6: '#a5e4d4', 8 | mint7: '#7dd4c0', 9 | mint8: '#40c4aa', 10 | mint9: '#70e1c8', 11 | mint10: '#69d9c1', 12 | mint11: '#147d6f', 13 | mint12: '#09342e', 14 | } as const; 15 | 16 | export default mint; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/mintA.ts: -------------------------------------------------------------------------------- 1 | export const mintA = { 2 | mintA1: '#05d5ac', 3 | mintA2: '#01efb0', 4 | mintA3: '#01dda2', 5 | mintA4: '#01d29a', 6 | mintA5: '#01be8f', 7 | mintA6: '#00b386', 8 | mintA7: '#00ab83', 9 | mintA8: '#00b08d', 10 | mintA9: '#00c99e', 11 | mintA10: '#00be95', 12 | mintA11: '#007263', 13 | mintA12: '#002d27', 14 | } as const; 15 | export default mintA; 16 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/mintDark.ts: -------------------------------------------------------------------------------- 1 | export const mintDark = { 2 | mint1: '#081917', 3 | mint2: '#05201e', 4 | mint3: '#052926', 5 | mint4: '#04312c', 6 | mint5: '#033a34', 7 | mint6: '#01453d', 8 | mint7: '#00564a', 9 | mint8: '#006d5b', 10 | mint9: '#70e1c8', 11 | mint10: '#95f3d9', 12 | mint11: '#25d0ab', 13 | mint12: '#e7fcf7', 14 | } as const; 15 | 16 | export default mintDark; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/mintDarkA.ts: -------------------------------------------------------------------------------- 1 | export const mintDarkA = { 2 | mintA1: '#000000', 3 | mintA2: '#00fbfb', 4 | mintA3: '#00fded', 5 | mintA4: '#00fde0', 6 | mintA5: '#00fee0', 7 | mintA6: '#00fedc', 8 | mintA7: '#00fed8', 9 | mintA8: '#00fed0', 10 | mintA9: '#80ffe3', 11 | mintA10: '#9dffe3', 12 | mintA11: '#2cffd1', 13 | mintA12: '#ecfffb', 14 | } as const; 15 | 16 | export default mintDarkA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/olive.ts: -------------------------------------------------------------------------------- 1 | export const olive = { 2 | olive1: '#fcfdfc', 3 | olive2: '#f8faf8', 4 | olive3: '#f2f4f2', 5 | olive4: '#ecefec', 6 | olive5: '#e6e9e6', 7 | olive6: '#e0e4e0', 8 | olive7: '#d8dcd8', 9 | olive8: '#c3c8c2', 10 | olive9: '#8b918a', 11 | olive10: '#818780', 12 | olive11: '#6b716a', 13 | olive12: '#141e12', 14 | } as const; 15 | 16 | export default olive; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/oliveA.ts: -------------------------------------------------------------------------------- 1 | export const oliveA = { 2 | oliveA1: '#055805', 3 | oliveA2: '#054d05', 4 | oliveA3: '#002700', 5 | oliveA4: '#022a02', 6 | oliveA5: '#022102', 7 | oliveA6: '#012201', 8 | oliveA7: '#001a00', 9 | oliveA8: '#051a01', 10 | oliveA9: '#020f00', 11 | oliveA10: '#030e00', 12 | oliveA11: '#020c00', 13 | oliveA12: '#020d00', 14 | } as const; 15 | 16 | export default oliveA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/oliveDark.ts: -------------------------------------------------------------------------------- 1 | export const oliveDark = { 2 | olive1: '#151715', 3 | olive2: '#1a1d19', 4 | olive3: '#20241f', 5 | olive4: '#262925', 6 | olive5: '#2b2f2a', 7 | olive6: '#313530', 8 | olive7: '#3b3f3a', 9 | olive8: '#4c514b', 10 | olive9: '#687366', 11 | olive10: '#778175', 12 | olive11: '#9aa299', 13 | olive12: '#eceeec', 14 | } as const; 15 | 16 | export default oliveDark; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/oliveDarkA.ts: -------------------------------------------------------------------------------- 1 | export const oliveDarkA = { 2 | oliveA1: '#000000', 3 | oliveA2: '#d5feaf', 4 | oliveA3: '#d6fbc4', 5 | oliveA4: '#effee2', 6 | oliveA5: '#e9fedf', 7 | oliveA6: '#ecfee5', 8 | oliveA7: '#f1feeb', 9 | oliveA8: '#f1ffed', 10 | oliveA9: '#e6ffe1', 11 | oliveA10: '#ebffe7', 12 | oliveA11: '#f3fff1', 13 | oliveA12: '#fdfffd', 14 | } as const; 15 | 16 | export default oliveDarkA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/orange.ts: -------------------------------------------------------------------------------- 1 | export const orange = { 2 | orange1: '#fefcfb', 3 | orange2: '#fef8f4', 4 | orange3: '#fff1e7', 5 | orange4: '#ffe8d7', 6 | orange5: '#ffdcc3', 7 | orange6: '#ffcca7', 8 | orange7: '#ffb381', 9 | orange8: '#fa934e', 10 | orange9: '#f76808', 11 | orange10: '#ed5f00', 12 | orange11: '#bd4b00', 13 | orange12: '#451e11', 14 | } as const; 15 | 16 | export default orange; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/orangeA.ts: -------------------------------------------------------------------------------- 1 | export const orangeA = { 2 | orangeA1: '#c04305', 3 | orangeA2: '#e86005', 4 | orangeA3: '#ff6c03', 5 | orangeA4: '#ff6e00', 6 | orangeA5: '#ff6b01', 7 | orangeA6: '#ff6b01', 8 | orangeA7: '#ff6601', 9 | orangeA8: '#f86300', 10 | orangeA9: '#f76300', 11 | orangeA10: '#ed5b00', 12 | orangeA11: '#bc4800', 13 | orangeA12: '#380e00', 14 | } as const; 15 | 16 | export default orangeA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/orangeDark.ts: -------------------------------------------------------------------------------- 1 | export const orangeDark = { 2 | orange1: '#1f1206', 3 | orange2: '#2b1400', 4 | orange3: '#391a03', 5 | orange4: '#441f04', 6 | orange5: '#4f2305', 7 | orange6: '#5f2a06', 8 | orange7: '#763205', 9 | orange8: '#943e00', 10 | orange9: '#f76808', 11 | orange10: '#ff802b', 12 | orange11: '#ff8b3e', 13 | orange12: '#feeadd', 14 | } as const; 15 | 16 | export default orangeDark; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/orangeDarkA.ts: -------------------------------------------------------------------------------- 1 | export const orangeDarkA = { 2 | orangeA1: '#000000', 3 | orangeA2: '#fd3700', 4 | orangeA3: '#fd5400', 5 | orangeA4: '#fe6100', 6 | orangeA5: '#fe6201', 7 | orangeA6: '#ff6506', 8 | orangeA7: '#ff6403', 9 | orangeA8: '#fe6600', 10 | orangeA9: '#ff6b08', 11 | orangeA10: '#ff842c', 12 | orangeA11: '#ff8c3f', 13 | orangeA12: '#ffeee1', 14 | } as const; 15 | export default orangeDarkA; 16 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/pink.ts: -------------------------------------------------------------------------------- 1 | export const pink = { 2 | pink1: '#fffcfe', 3 | pink2: '#fff7fc', 4 | pink3: '#feeef8', 5 | pink4: '#fce5f3', 6 | pink5: '#f9d8ec', 7 | pink6: '#f3c6e2', 8 | pink7: '#ecadd4', 9 | pink8: '#e38ec3', 10 | pink9: '#d6409f', 11 | pink10: '#d23197', 12 | pink11: '#cd1d8d', 13 | pink12: '#3b0a2a', 14 | } as const; 15 | 16 | export default pink; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/pinkA.ts: -------------------------------------------------------------------------------- 1 | export const pinkA = { 2 | pinkA1: '#ff05ac', 3 | pinkA2: '#ff059f', 4 | pinkA3: '#f00194', 5 | pinkA4: '#e2008b', 6 | pinkA5: '#d80081', 7 | pinkA6: '#c9017c', 8 | pinkA7: '#c40079', 9 | pinkA8: '#c00076', 10 | pinkA9: '#c8007f', 11 | pinkA10: '#c7007e', 12 | pinkA11: '#c7007e', 13 | pinkA12: '#330021', 14 | } as const; 15 | 16 | export default pinkA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/pinkDark.ts: -------------------------------------------------------------------------------- 1 | export const pinkDark = { 2 | pink1: '#1f121b', 3 | pink2: '#271421', 4 | pink3: '#3a182f', 5 | pink4: '#451a37', 6 | pink5: '#501b3f', 7 | pink6: '#601d48', 8 | pink7: '#7a1d5a', 9 | pink8: '#a71873', 10 | pink9: '#d6409f', 11 | pink10: '#e34ba9', 12 | pink11: '#f65cb6', 13 | pink12: '#feebf7', 14 | } as const; 15 | 16 | export default pinkDark; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/pinkDarkA.ts: -------------------------------------------------------------------------------- 1 | export const pinkDarkA = { 2 | pinkA1: '#000000', 3 | pinkA2: '#fd4ac1', 4 | pinkA3: '#fe44c0', 5 | pinkA4: '#ff41bf', 6 | pinkA5: '#ff3bc1', 7 | pinkA6: '#fe38b6', 8 | pinkA7: '#ff2db5', 9 | pinkA8: '#ff1cac', 10 | pinkA9: '#ff4abd', 11 | pinkA10: '#ff53bd', 12 | pinkA11: '#ff5fbc', 13 | pinkA12: '#ffeffb', 14 | } as const; 15 | 16 | export default pinkDarkA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/plum.ts: -------------------------------------------------------------------------------- 1 | export const plum = { 2 | plum1: '#fefcff', 3 | plum2: '#fff8ff', 4 | plum3: '#fceffc', 5 | plum4: '#f9e5f9', 6 | plum5: '#f3d9f4', 7 | plum6: '#ebc8ed', 8 | plum7: '#dfafe3', 9 | plum8: '#cf91d8', 10 | plum9: '#ab4aba', 11 | plum10: '#a43cb4', 12 | plum11: '#9c2bad', 13 | plum12: '#340c3b', 14 | } as const; 15 | 16 | export default plum; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/plumA.ts: -------------------------------------------------------------------------------- 1 | export const plumA = { 2 | plumA1: '#ac05ff', 3 | plumA2: '#ff05ff', 4 | plumA3: '#d001d0', 5 | plumA4: '#c400c4', 6 | plumA5: '#af02b5', 7 | plumA6: '#a300ac', 8 | plumA7: '#9800a6', 9 | plumA8: '#8f00a5', 10 | plumA9: '#89009e', 11 | plumA10: '#88009d', 12 | plumA11: '#88009c', 13 | plumA12: '#2a0031', 14 | } as const; 15 | 16 | export default plumA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/plumDark.ts: -------------------------------------------------------------------------------- 1 | export const plumDark = { 2 | plum1: '#1d131d', 3 | plum2: '#251425', 4 | plum3: '#341a34', 5 | plum4: '#3e1d40', 6 | plum5: '#48214b', 7 | plum6: '#542658', 8 | plum7: '#692d6f', 9 | plum8: '#883894', 10 | plum9: '#ab4aba', 11 | plum10: '#bd54c6', 12 | plum11: '#d864d8', 13 | plum12: '#fbecfc', 14 | } as const; 15 | 16 | export default plumDark; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/plumDarkA.ts: -------------------------------------------------------------------------------- 1 | export const plumDarkA = { 2 | plumA1: '#000000', 3 | plumA2: '#fb2ffb', 4 | plumA3: '#fe58fe', 5 | plumA4: '#f153ff', 6 | plumA5: '#f158fe', 7 | plumA6: '#ee5cfe', 8 | plumA7: '#ee5aff', 9 | plumA8: '#e959ff', 10 | plumA9: '#ea62ff', 11 | plumA10: '#f36aff', 12 | plumA11: '#ff75ff', 13 | plumA12: '#fff0ff', 14 | } as const; 15 | 16 | export default plumDarkA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/purple.ts: -------------------------------------------------------------------------------- 1 | export const purple = { 2 | purple1: '#fefcfe', 3 | purple2: '#fdfaff', 4 | purple3: '#f9f1fe', 5 | purple4: '#f3e7fc', 6 | purple5: '#eddbf9', 7 | purple6: '#e3ccf4', 8 | purple7: '#d3b4ed', 9 | purple8: '#be93e4', 10 | purple9: '#8e4ec6', 11 | purple10: '#8445bc', 12 | purple11: '#793aaf', 13 | purple12: '#2b0e44', 14 | } as const; 15 | 16 | export default purple; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/purpleA.ts: -------------------------------------------------------------------------------- 1 | const purpleA = { 2 | purpleA1: '#ab05ab', 3 | purpleA2: '#9b05ff', 4 | purpleA3: '#9200ed', 5 | purpleA4: '#8002e0', 6 | purpleA5: '#8001d5', 7 | purpleA6: '#7500c8', 8 | purpleA7: '#6b01c2', 9 | purpleA8: '#6600bf', 10 | purpleA9: '#5c00ad', 11 | purpleA10: '#5700a3', 12 | purpleA11: '#510097', 13 | purpleA12: '#1f0039', 14 | } as const; 15 | 16 | export default purpleA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/purpleDark.ts: -------------------------------------------------------------------------------- 1 | export const purpleDark = { 2 | purple1: '#1b141d', 3 | purple2: '#221527', 4 | purple3: '#301a3a', 5 | purple4: '#3a1e48', 6 | purple5: '#432155', 7 | purple6: '#4e2667', 8 | purple7: '#5f2d84', 9 | purple8: '#7938b2', 10 | purple9: '#8e4ec6', 11 | purple10: '#9d5bd2', 12 | purple11: '#bf7af0', 13 | purple12: '#f7ecfc', 14 | } as const; 15 | 16 | export default purpleDark; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/purpleDarkA.ts: -------------------------------------------------------------------------------- 1 | export const purpleDarkA = { 2 | purpleA1: '#000000', 3 | purpleA2: '#b52afb', 4 | purpleA3: '#bc43fe', 5 | purpleA4: '#be48fe', 6 | purpleA5: '#bc49ff', 7 | purpleA6: '#b74bff', 8 | purpleA7: '#b14aff', 9 | purpleA8: '#ab4bff', 10 | purpleA9: '#b561ff', 11 | purpleA10: '#bd6dff', 12 | purpleA11: '#cb81ff', 13 | purpleA12: '#fcf0ff', 14 | } as const; 15 | 16 | export default purpleDarkA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/red.ts: -------------------------------------------------------------------------------- 1 | export const red = { 2 | red1: '#fffcfc', 3 | red2: '#fff8f8', 4 | red3: '#ffefef', 5 | red4: '#ffe5e5', 6 | red5: '#fdd8d8', 7 | red6: '#f9c6c6', 8 | red7: '#f3aeaf', 9 | red8: '#eb9091', 10 | red9: '#e5484d', 11 | red10: '#dc3d43', 12 | red11: '#cd2b31', 13 | red12: '#381316', 14 | } as const; 15 | 16 | export default red; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/redA.ts: -------------------------------------------------------------------------------- 1 | export const redA = { 2 | redA1: '#ff0505', 3 | redA2: '#ff0505', 4 | redA3: '#ff0101', 5 | redA4: '#ff0000', 6 | redA5: '#f20000', 7 | redA6: '#e40101', 8 | redA7: '#d90004', 9 | redA8: '#d10004', 10 | redA9: '#db0007', 11 | redA10: '#d10007', 12 | redA11: '#c30007', 13 | redA12: '#280003', 14 | } as const; 15 | 16 | export default redA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/redDark.ts: -------------------------------------------------------------------------------- 1 | export const redDark = { 2 | red1: '#1f1315', 3 | red2: '#291415', 4 | red3: '#3c181a', 5 | red4: '#481a1d', 6 | red5: '#541b1f', 7 | red6: '#671e22', 8 | red7: '#822025', 9 | red8: '#aa2429', 10 | red9: '#e5484d', 11 | red10: '#f2555a', 12 | red11: '#ff6369', 13 | red12: '#feecee', 14 | } as const; 15 | 16 | export default redDark; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/redDarkA.ts: -------------------------------------------------------------------------------- 1 | export const redDarkA = { 2 | redA1: '#000000', 3 | redA2: '#fd2815', 4 | redA3: '#fe3a3d', 5 | redA4: '#fe3940', 6 | redA5: '#ff353f', 7 | redA6: '#ff353c', 8 | redA7: '#ff303b', 9 | redA8: '#ff2f36', 10 | redA9: '#ff4f55', 11 | redA10: '#ff595f', 12 | redA11: '#ff646a', 13 | redA12: '#fff0f2', 14 | } as const; 15 | 16 | export default redDarkA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/sage.ts: -------------------------------------------------------------------------------- 1 | export const sage = { 2 | sage1: '#fbfdfc', 3 | sage2: '#f8faf9', 4 | sage3: '#f1f4f3', 5 | sage4: '#ecefed', 6 | sage5: '#e6e9e8', 7 | sage6: '#dfe4e2', 8 | sage7: '#d7dcda', 9 | sage8: '#c2c9c6', 10 | sage9: '#8a918e', 11 | sage10: '#808784', 12 | sage11: '#6a716e', 13 | sage12: '#111c18', 14 | } as const; 15 | 16 | export default sage; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/sageA.ts: -------------------------------------------------------------------------------- 1 | export const sageA = { 2 | sageA1: '#058244', 3 | sageA2: '#054d29', 4 | sageA3: '#003725', 5 | sageA4: '#022a0f', 6 | sageA5: '#022117', 7 | sageA6: '#012919', 8 | sageA7: '#002013', 9 | sageA8: '#011e11', 10 | sageA9: '#000f09', 11 | sageA10: '#000e08', 12 | sageA11: '#000c07', 13 | sageA12: '#000c08', 14 | } as const; 15 | 16 | export default sageA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/sageDark.ts: -------------------------------------------------------------------------------- 1 | export const sageDark = { 2 | sage1: '#141716', 3 | sage2: '#191d1b', 4 | sage3: '#1f2421', 5 | sage4: '#252a27', 6 | sage5: '#2a2f2c', 7 | sage6: '#303633', 8 | sage7: '#393f3c', 9 | sage8: '#4a524e', 10 | sage9: '#66736d', 11 | sage10: '#75817b', 12 | sage11: '#99a29e', 13 | sage12: '#eceeed', 14 | } as const; 15 | 16 | export default sageDark; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/sageDarkA.ts: -------------------------------------------------------------------------------- 1 | export const sageDarkA = { 2 | sageA1: '#000000', 3 | sageA2: '#d4fed6', 4 | sageA3: '#d5fbd7', 5 | sageA4: '#e3ffe5', 6 | sageA5: '#e8feea', 7 | sageA6: '#e5feee', 8 | sageA7: '#eafef2', 9 | sageA8: '#e8fef2', 10 | sageA9: '#e3fff1', 11 | sageA10: '#e8fff3', 12 | sageA11: '#f2fff9', 13 | sageA12: '#fdfffe', 14 | } as const; 15 | 16 | export default sageDarkA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/sand.ts: -------------------------------------------------------------------------------- 1 | export const sand = { 2 | sand1: '#fdfdfc', 3 | sand2: '#f9f9f8', 4 | sand3: '#f3f3f2', 5 | sand4: '#eeeeec', 6 | sand5: '#e9e9e6', 7 | sand6: '#e3e3e0', 8 | sand7: '#dbdbd7', 9 | sand8: '#c8c7c1', 10 | sand9: '#90908c', 11 | sand10: '#868682', 12 | sand11: '#706f6c', 13 | sand12: '#1b1b18', 14 | } as const; 15 | 16 | export default sand; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/sandA.ts: -------------------------------------------------------------------------------- 1 | export const sandA = { 2 | sandA1: '#585805', 3 | sandA2: '#292905', 4 | sandA3: '#141400', 5 | sandA4: '#1c1c02', 6 | sandA5: '#212102', 7 | sandA6: '#1a1a01', 8 | sandA7: '#1a1a00', 9 | sandA8: '#1e1901', 10 | sandA9: '#090900', 11 | sandA10: '#090900', 12 | sandA11: '#070600', 13 | sandA12: '#040400', 14 | } as const; 15 | export default sandA; 16 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/sandDark.ts: -------------------------------------------------------------------------------- 1 | export const sandDark = { 2 | sand1: '#161615', 3 | sand2: '#1c1c1a', 4 | sand3: '#232320', 5 | sand4: '#282826', 6 | sand5: '#2e2e2b', 7 | sand6: '#353431', 8 | sand7: '#3e3e3a', 9 | sand8: '#51504b', 10 | sand9: '#717069', 11 | sand10: '#7f7e77', 12 | sand11: '#a1a09a', 13 | sand12: '#ededec', 14 | } as const; 15 | 16 | export default sandDark; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/sandDarkA.ts: -------------------------------------------------------------------------------- 1 | export const sandDarkA = { 2 | sandA1: '#000000', 3 | sandA2: '#fdfdd5', 4 | sandA3: '#fefeda', 5 | sandA4: '#fdfdef', 6 | sandA5: '#fdfde9', 7 | sandA6: '#fdf6e6', 8 | sandA7: '#ffffec', 9 | sandA8: '#fefbea', 10 | sandA9: '#fffcec', 11 | sandA10: '#fffdee', 12 | sandA11: '#fffdf4', 13 | sandA12: '#fffffe', 14 | } as const; 15 | 16 | export default sandDarkA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/sky.ts: -------------------------------------------------------------------------------- 1 | export const sky = { 2 | sky1: '#f9feff', 3 | sky2: '#f1fcff', 4 | sky3: '#e4f9ff', 5 | sky4: '#d5f4fd', 6 | sky5: '#c1ecf9', 7 | sky6: '#a4dff1', 8 | sky7: '#79cfea', 9 | sky8: '#2ebde5', 10 | sky9: '#68ddfd', 11 | sky10: '#5fd4f4', 12 | sky11: '#0078a1', 13 | sky12: '#003242', 14 | } as const; 15 | 16 | export default sky; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/skyA.ts: -------------------------------------------------------------------------------- 1 | export const skyA = { 2 | skyA1: '#05d5ff', 3 | skyA2: '#01c8ff', 4 | skyA3: '#01c8ff', 5 | skyA4: '#00baf3', 6 | skyA5: '#01b1e7', 7 | skyA6: '#00a5d8', 8 | skyA7: '#00a5d7', 9 | skyA8: '#00afdf', 10 | skyA9: '#00c5fc', 11 | skyA10: '#00baed', 12 | skyA11: '#00759f', 13 | skyA12: '#002e3e', 14 | } as const; 15 | 16 | export default skyA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/skyDark.ts: -------------------------------------------------------------------------------- 1 | export const skyDark = { 2 | sky1: '#0c1820', 3 | sky2: '#071d2a', 4 | sky3: '#082636', 5 | sky4: '#082d41', 6 | sky5: '#08354c', 7 | sky6: '#083e59', 8 | sky7: '#064b6b', 9 | sky8: '#005d85', 10 | sky9: '#68ddfd', 11 | sky10: '#8ae8ff', 12 | sky11: '#2ec8ee', 13 | sky12: '#eaf8ff', 14 | } as const; 15 | 16 | export default skyDark; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/skyDarkA.ts: -------------------------------------------------------------------------------- 1 | export const skyDarkA = { 2 | skyA1: '#000000', 3 | skyA2: '#0087fe', 4 | skyA3: '#00a5fe', 5 | skyA4: '#00a6ff', 6 | skyA5: '#00a9fe', 7 | skyA6: '#00aefe', 8 | skyA7: '#00aefe', 9 | skyA8: '#00aeff', 10 | skyA9: '#6ae1ff', 11 | skyA10: '#8decff', 12 | skyA11: '#31d6ff', 13 | skyA12: '#effdff', 14 | } as const; 15 | 16 | export default skyDarkA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/slate.ts: -------------------------------------------------------------------------------- 1 | export const slate = { 2 | slate1: '#fbfcfd', 3 | slate2: '#f8f9fa', 4 | slate3: '#f1f3f5', 5 | slate4: '#eceef0', 6 | slate5: '#e6e8eb', 7 | slate6: '#dfe3e6', 8 | slate7: '#d7dbdf', 9 | slate8: '#c1c8cd', 10 | slate9: '#889096', 11 | slate10: '#7e868c', 12 | slate11: '#687076', 13 | slate12: '#11181c', 14 | } as const; 15 | 16 | export default slate; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/slateA.ts: -------------------------------------------------------------------------------- 1 | export const slateA = { 2 | slateA1: '#054482', 3 | slateA2: '#05294d', 4 | slateA3: '#002549', 5 | slateA4: '#021c37', 6 | slateA5: '#021735', 7 | slateA6: '#012139', 8 | slateA7: '#001a33', 9 | slateA8: '#011e32', 10 | slateA9: '#00111e', 11 | slateA10: '#00101b', 12 | slateA11: '#000e18', 13 | slateA12: '#00080c', 14 | } as const; 15 | 16 | export default slateA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/slateDark.ts: -------------------------------------------------------------------------------- 1 | export const slateDark = { 2 | slate1: '#151718', 3 | slate2: '#1a1d1e', 4 | slate3: '#202425', 5 | slate4: '#26292b', 6 | slate5: '#2b2f31', 7 | slate6: '#313538', 8 | slate7: '#3a3f42', 9 | slate8: '#4c5155', 10 | slate9: '#697177', 11 | slate10: '#787f85', 12 | slate11: '#9ba1a6', 13 | slate12: '#ecedee', 14 | } as const; 15 | 16 | export default slateDark; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/slateDarkA.ts: -------------------------------------------------------------------------------- 1 | export const slateDarkA = { 2 | slateA1: '#000000', 3 | slateA2: '#d5feff', 4 | slateA3: '#d6fbfc', 5 | slateA4: '#e2f0fd', 6 | slateA5: '#dff3fd', 7 | slateA6: '#dfeffe', 8 | slateA7: '#e0f3ff', 9 | slateA8: '#e5f2fe', 10 | slateA9: '#e1f1ff', 11 | slateA10: '#e7f3ff', 12 | slateA11: '#eff7ff', 13 | slateA12: '#fdfeff', 14 | } as const; 15 | 16 | export default slateDarkA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/teal.ts: -------------------------------------------------------------------------------- 1 | export const teal = { 2 | teal1: '#fafefd', 3 | teal2: '#f1fcfa', 4 | teal3: '#e7f9f5', 5 | teal4: '#d9f3ee', 6 | teal5: '#c7ebe5', 7 | teal6: '#afdfd7', 8 | teal7: '#8dcec3', 9 | teal8: '#53b9ab', 10 | teal9: '#12a594', 11 | teal10: '#0e9888', 12 | teal11: '#067a6f', 13 | teal12: '#10302b', 14 | } as const; 15 | 16 | export default teal; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/tealA.ts: -------------------------------------------------------------------------------- 1 | export const tealA = { 2 | tealA1: '#05cd9b', 3 | tealA2: '#01c8a4', 4 | tealA3: '#02c097', 5 | tealA4: '#02af8c', 6 | tealA5: '#00a489', 7 | tealA6: '#009980', 8 | tealA7: '#01927a', 9 | tealA8: '#009783', 10 | tealA9: '#009e8c', 11 | tealA10: '#009281', 12 | tealA11: '#00776b', 13 | tealA12: '#00221d', 14 | } as const; 15 | 16 | export default tealA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/tealDark.ts: -------------------------------------------------------------------------------- 1 | export const tealDark = { 2 | teal1: '#091915', 3 | teal2: '#04201b', 4 | teal3: '#062923', 5 | teal4: '#07312b', 6 | teal5: '#083932', 7 | teal6: '#09443c', 8 | teal7: '#0b544a', 9 | teal8: '#0c6d62', 10 | teal9: '#12a594', 11 | teal10: '#10b3a3', 12 | teal11: '#0ac5b3', 13 | teal12: '#e1faf4', 14 | } as const; 15 | 16 | export default tealDark; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/tealDarkA.ts: -------------------------------------------------------------------------------- 1 | export const tealDarkA = { 2 | tealA1: '#000000', 3 | tealA2: '#00fbd5', 4 | tealA3: '#00fddc', 5 | tealA4: '#00fde8', 6 | tealA5: '#02fee4', 7 | tealA6: '#09ffe6', 8 | tealA7: '#11ffe3', 9 | tealA8: '#11ffe7', 10 | tealA9: '#18ffe4', 11 | tealA10: '#13ffe7', 12 | tealA11: '#0affe7', 13 | tealA12: '#e6fff9', 14 | } as const; 15 | 16 | export default tealDarkA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/tomato.ts: -------------------------------------------------------------------------------- 1 | export const tomato = { 2 | tomato1: '#fffcfc', 3 | tomato2: '#fff8f7', 4 | tomato3: '#fff0ee', 5 | tomato4: '#ffe6e2', 6 | tomato5: '#fdd8d3', 7 | tomato6: '#fac7be', 8 | tomato7: '#f3b0a2', 9 | tomato8: '#ea9280', 10 | tomato9: '#e54d2e', 11 | tomato10: '#db4324', 12 | tomato11: '#ca3214', 13 | tomato12: '#341711', 14 | } as const; 15 | 16 | export default tomato; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/tomatoA.ts: -------------------------------------------------------------------------------- 1 | export const tomatoA = { 2 | tomatoA1: '#ff0505', 3 | tomatoA2: '#ff2605', 4 | tomatoA3: '#ff1f01', 5 | tomatoA4: '#ff2201', 6 | tomatoA5: '#f41d01', 7 | tomatoA6: '#ec2300', 8 | tomatoA7: '#de2500', 9 | tomatoA8: '#d52401', 10 | tomatoA9: '#df2500', 11 | tomatoA10: '#d52400', 12 | tomatoA11: '#c62100', 13 | tomatoA12: '#260600', 14 | } as const; 15 | 16 | export default tomatoA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/tomatoDark.ts: -------------------------------------------------------------------------------- 1 | export const tomatoDark = { 2 | tomato1: '#1d1412', 3 | tomato2: '#2a1410', 4 | tomato3: '#3b1813', 5 | tomato4: '#481a14', 6 | tomato5: '#541c15', 7 | tomato6: '#652016', 8 | tomato7: '#7f2315', 9 | tomato8: '#a42a12', 10 | tomato9: '#e54d2e', 11 | tomato10: '#ec5e41', 12 | tomato11: '#f16a50', 13 | tomato12: '#feefec', 14 | } as const; 15 | 16 | export default tomatoDark; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/tomatoDarkA.ts: -------------------------------------------------------------------------------- 1 | export const tomatoDarkA = { 2 | tomatoA1: '#000000', 3 | tomatoA2: '#fd1500', 4 | tomatoA3: '#ff3019', 5 | tomatoA4: '#fe331c', 6 | tomatoA5: '#fe351e', 7 | tomatoA6: '#ff391e', 8 | tomatoA7: '#ff3719', 9 | tomatoA8: '#ff3a12', 10 | tomatoA9: '#ff5431', 11 | tomatoA10: '#ff6445', 12 | tomatoA11: '#ff7054', 13 | tomatoA12: '#fff3f0', 14 | } as const; 15 | 16 | export default tomatoDarkA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/violet.ts: -------------------------------------------------------------------------------- 1 | export const violet = { 2 | violet1: '#fdfcfe', 3 | violet2: '#fbfaff', 4 | violet3: '#f5f2ff', 5 | violet4: '#ede9fe', 6 | violet5: '#e4defc', 7 | violet6: '#d7cff9', 8 | violet7: '#c4b8f3', 9 | violet8: '#aa99ec', 10 | violet9: '#6e56cf', 11 | violet10: '#644fc1', 12 | violet11: '#5746af', 13 | violet12: '#20134b', 14 | } as const; 15 | 16 | export default violet; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/violetA.ts: -------------------------------------------------------------------------------- 1 | export const violetA = { 2 | violetA1: '#5805ab', 3 | violetA2: '#3705ff', 4 | violetA3: '#3c00ff', 5 | violetA4: '#2e02f4', 6 | violetA5: '#2f01e8', 7 | violetA6: '#2a01df', 8 | violetA7: '#2b01d4', 9 | violetA8: '#2a00d0', 10 | violetA9: '#2500b6', 11 | violetA10: '#1f00a5', 12 | violetA11: '#180091', 13 | violetA12: '#0e003d', 14 | } as const; 15 | 16 | export default violetA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/violetDark.ts: -------------------------------------------------------------------------------- 1 | export const violetDark = { 2 | violet1: '#17151f', 3 | violet2: '#1c172b', 4 | violet3: '#251e40', 5 | violet4: '#2c2250', 6 | violet5: '#32275f', 7 | violet6: '#392c72', 8 | violet7: '#443592', 9 | violet8: '#5842c3', 10 | violet9: '#6e56cf', 11 | violet10: '#7c66dc', 12 | violet11: '#9e8cfc', 13 | violet12: '#f1eefe', 14 | } as const; 15 | 16 | export default violetDark; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/violetDarkA.ts: -------------------------------------------------------------------------------- 1 | export const violetDarkA = { 2 | violetA1: '#000000', 3 | violetA2: '#743afd', 4 | violetA3: '#7452fe', 5 | violetA4: '#7650ff', 6 | violetA5: '#7654ff', 7 | violetA6: '#7253ff', 8 | violetA7: '#7053ff', 9 | violetA8: '#6f52ff', 10 | violetA9: '#8668ff', 11 | violetA10: '#8e75ff', 12 | violetA11: '#a18eff', 13 | violetA12: '#f5f2ff', 14 | } as const; 15 | 16 | export default violetDarkA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/whiteA.ts: -------------------------------------------------------------------------------- 1 | export const whiteA = { 2 | whiteA1: '#ffffff', 3 | whiteA2: '#ffffff', 4 | whiteA3: '#ffffff', 5 | whiteA4: '#ffffff', 6 | whiteA5: '#ffffff', 7 | whiteA6: '#ffffff', 8 | whiteA7: '#ffffff', 9 | whiteA8: '#ffffff', 10 | whiteA9: '#ffffff', 11 | whiteA10: '#ffffff', 12 | whiteA11: '#ffffff', 13 | whiteA12: '#ffffff', 14 | } as const; 15 | 16 | export default whiteA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/yellow.ts: -------------------------------------------------------------------------------- 1 | export const yellow = { 2 | yellow1: '#fdfdf9', 3 | yellow2: '#fffce8', 4 | yellow3: '#fffbd1', 5 | yellow4: '#fff8bb', 6 | yellow5: '#fef2a4', 7 | yellow6: '#f9e68c', 8 | yellow7: '#efd36c', 9 | yellow8: '#ebbc00', 10 | yellow9: '#f5d90a', 11 | yellow10: '#f7ce00', 12 | yellow11: '#946800', 13 | yellow12: '#35290f', 14 | } as const; 15 | 16 | export default yellow; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/yellowA.ts: -------------------------------------------------------------------------------- 1 | export const yellowA = { 2 | yellowA1: '#abab05', 3 | yellowA2: '#ffdd02', 4 | yellowA3: '#ffea01', 5 | yellowA4: '#ffe601', 6 | yellowA5: '#fcdb00', 7 | yellowA6: '#f2c900', 8 | yellowA7: '#e3b200', 9 | yellowA8: '#ebbc00', 10 | yellowA9: '#f5d800', 11 | yellowA10: '#f7ce00', 12 | yellowA11: '#926600', 13 | yellowA12: '#291c00', 14 | } as const; 15 | 16 | export default yellowA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/yellowDark.ts: -------------------------------------------------------------------------------- 1 | export const yellowDark = { 2 | yellow1: '#1c1500', 3 | yellow2: '#221a00', 4 | yellow3: '#2c2100', 5 | yellow4: '#352800', 6 | yellow5: '#3e3000', 7 | yellow6: '#493c00', 8 | yellow7: '#594a05', 9 | yellow8: '#705e00', 10 | yellow9: '#f5d90a', 11 | yellow10: '#ffef5c', 12 | yellow11: '#f0c000', 13 | yellow12: '#fffad1', 14 | } as const; 15 | 16 | export default yellowDark; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/radixUi/yellowDarkA.ts: -------------------------------------------------------------------------------- 1 | export const yellowDarkA = { 2 | yellowA1: '#000000', 3 | yellowA2: '#facd00', 4 | yellowA3: '#fdbe00', 5 | yellowA4: '#fdc200', 6 | yellowA5: '#fec700', 7 | yellowA6: '#fed800', 8 | yellowA7: '#ffdb13', 9 | yellowA8: '#fed800', 10 | yellowA9: '#ffe20a', 11 | yellowA10: '#fff45e', 12 | yellowA11: '#ffcc00', 13 | yellowA12: '#ffffd5', 14 | } as const; 15 | 16 | export default yellowDarkA; 17 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/schema.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @radix-Ui-ui Colors 3 | */ 4 | export { colors as radixUiColors } from './radixUi'; 5 | export type { Colors as RadixUiColors } from './radixUi'; 6 | export type { IColors as IRadixUiColors } from './radixUi'; 7 | 8 | /** 9 | * @tailwindCss Colors 10 | */ 11 | export { colors as tailwindCssColors } from './tailwindCss'; 12 | export type { Colors as TailwindCssColors } from './tailwindCss'; 13 | export type { IColors as ITailwindCssColors } from './tailwindCss'; 14 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/tailwindCss/amber.ts: -------------------------------------------------------------------------------- 1 | export const amber = { 2 | 50: '#fffbeb', 3 | 100: '#fef3c7', 4 | 200: '#fde68a', 5 | 300: '#fcd34d', 6 | 400: '#fbbf24', 7 | 500: '#f59e0b', 8 | 600: '#d97706', 9 | 700: '#b45309', 10 | 800: '#92400e', 11 | 900: '#78350f', 12 | 950: '#451a03', 13 | } as const; 14 | 15 | export default amber; 16 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/tailwindCss/blue.ts: -------------------------------------------------------------------------------- 1 | export const blue = { 2 | 50: '#eff6ff', 3 | 100: '#dbeafe', 4 | 200: '#bfdbfe', 5 | 300: '#93c5fd', 6 | 400: '#60a5fa', 7 | 500: '#3b82f6', 8 | 600: '#2563eb', 9 | 700: '#1d4ed8', 10 | 800: '#1e40af', 11 | 900: '#1e3a8a', 12 | 950: '#172554', 13 | } as const; 14 | 15 | export default blue; 16 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/tailwindCss/common.ts: -------------------------------------------------------------------------------- 1 | export const common = { 2 | inherit: 'inherit', 3 | current: 'currentColor', 4 | transparent: 'transparent', 5 | black: '#000', 6 | white: '#fff', 7 | } as const; 8 | 9 | export default common; 10 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/tailwindCss/cyan.ts: -------------------------------------------------------------------------------- 1 | export const cyan = { 2 | 50: '#ecfeff', 3 | 100: '#cffafe', 4 | 200: '#a5f3fc', 5 | 300: '#67e8f9', 6 | 400: '#22d3ee', 7 | 500: '#06b6d4', 8 | 600: '#0891b2', 9 | 700: '#0e7490', 10 | 800: '#155e75', 11 | 900: '#164e63', 12 | 950: '#083344', 13 | } as const; 14 | 15 | export default cyan; 16 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/tailwindCss/emerald.ts: -------------------------------------------------------------------------------- 1 | export const emerald = { 2 | 50: '#ecfdf5', 3 | 100: '#d1fae5', 4 | 200: '#a7f3d0', 5 | 300: '#6ee7b7', 6 | 400: '#34d399', 7 | 500: '#10b981', 8 | 600: '#059669', 9 | 700: '#047857', 10 | 800: '#065f46', 11 | 900: '#064e3b', 12 | 950: '#022c22', 13 | } as const; 14 | 15 | export default emerald; 16 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/tailwindCss/fuchsia.ts: -------------------------------------------------------------------------------- 1 | export const fuchsia = { 2 | 50: '#fdf4ff', 3 | 100: '#fae8ff', 4 | 200: '#f5d0fe', 5 | 300: '#f0abfc', 6 | 400: '#e879f9', 7 | 500: '#d946ef', 8 | 600: '#c026d3', 9 | 700: '#a21caf', 10 | 800: '#86198f', 11 | 900: '#701a75', 12 | 950: '#4a044e', 13 | } as const; 14 | 15 | export default fuchsia; 16 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/tailwindCss/gray.ts: -------------------------------------------------------------------------------- 1 | export const gray = { 2 | 50: '#f9fafb', 3 | 100: '#f3f4f6', 4 | 200: '#e5e7eb', 5 | 300: '#d1d5db', 6 | 400: '#9ca3af', 7 | 500: '#6b7280', 8 | 600: '#4b5563', 9 | 700: '#374151', 10 | 800: '#1f2937', 11 | 900: '#111827', 12 | 950: '#030712', 13 | } as const; 14 | 15 | export default gray; 16 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/tailwindCss/green.ts: -------------------------------------------------------------------------------- 1 | export const green = { 2 | 50: '#f0fdf4', 3 | 100: '#dcfce7', 4 | 200: '#bbf7d0', 5 | 300: '#86efac', 6 | 400: '#4ade80', 7 | 500: '#22c55e', 8 | 600: '#16a34a', 9 | 700: '#15803d', 10 | 800: '#166534', 11 | 900: '#14532d', 12 | 950: '#052e16', 13 | } as const; 14 | 15 | export default green; 16 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/tailwindCss/index.ts: -------------------------------------------------------------------------------- 1 | import amber from './amber'; 2 | import blue from './blue'; 3 | import common from './common'; 4 | import cyan from './cyan'; 5 | import emerald from './emerald'; 6 | import fuchsia from './fuchsia'; 7 | import gray from './gray'; 8 | import green from './green'; 9 | import indigo from './indigo'; 10 | import lime from './lime'; 11 | import neutral from './neutral'; 12 | import orange from './orange'; 13 | import pink from './pink'; 14 | import purple from './purple'; 15 | import red from './red'; 16 | import rose from './rose'; 17 | import sky from './sky'; 18 | import slate from './slate'; 19 | import stone from './stone'; 20 | import teal from './teal'; 21 | import violet from './violet'; 22 | import yellow from './yellow'; 23 | import zinc from './zinc'; 24 | 25 | import type { Leaves } from '@design-blocks/types'; 26 | 27 | export const colors = { 28 | amber, 29 | blue, 30 | common, 31 | cyan, 32 | emerald, 33 | fuchsia, 34 | gray, 35 | green, 36 | indigo, 37 | lime, 38 | neutral, 39 | orange, 40 | pink, 41 | purple, 42 | red, 43 | rose, 44 | sky, 45 | slate, 46 | stone, 47 | teal, 48 | violet, 49 | yellow, 50 | zinc, 51 | }; 52 | 53 | export type IColors = Leaves; 54 | export type Colors = typeof colors; 55 | 56 | export default colors; 57 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/tailwindCss/indigo.ts: -------------------------------------------------------------------------------- 1 | export const indigo = { 2 | 50: '#eef2ff', 3 | 100: '#e0e7ff', 4 | 200: '#c7d2fe', 5 | 300: '#a5b4fc', 6 | 400: '#818cf8', 7 | 500: '#6366f1', 8 | 600: '#4f46e5', 9 | 700: '#4338ca', 10 | 800: '#3730a3', 11 | 900: '#312e81', 12 | 950: '#1e1b4b', 13 | } as const; 14 | 15 | export default indigo; 16 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/tailwindCss/lime.ts: -------------------------------------------------------------------------------- 1 | export const lime = { 2 | 50: '#f7fee7', 3 | 100: '#ecfccb', 4 | 200: '#d9f99d', 5 | 300: '#bef264', 6 | 400: '#a3e635', 7 | 500: '#84cc16', 8 | 600: '#65a30d', 9 | 700: '#4d7c0f', 10 | 800: '#3f6212', 11 | 900: '#365314', 12 | 950: '#1a2e05', 13 | } as const; 14 | 15 | export default lime; 16 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/tailwindCss/neutral.ts: -------------------------------------------------------------------------------- 1 | export const neutral = { 2 | 50: '#fafafa', 3 | 100: '#f5f5f5', 4 | 200: '#e5e5e5', 5 | 300: '#d4d4d4', 6 | 400: '#a3a3a3', 7 | 500: '#737373', 8 | 600: '#525252', 9 | 700: '#404040', 10 | 800: '#262626', 11 | 900: '#171717', 12 | 950: '#0a0a0a', 13 | } as const; 14 | 15 | export default neutral; 16 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/tailwindCss/orange.ts: -------------------------------------------------------------------------------- 1 | export const orange = { 2 | 50: '#fff7ed', 3 | 100: '#ffedd5', 4 | 200: '#fed7aa', 5 | 300: '#fdba74', 6 | 400: '#fb923c', 7 | 500: '#f97316', 8 | 600: '#ea580c', 9 | 700: '#c2410c', 10 | 800: '#9a3412', 11 | 900: '#7c2d12', 12 | 950: '#431407', 13 | } as const; 14 | 15 | export default orange; 16 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/tailwindCss/pink.ts: -------------------------------------------------------------------------------- 1 | export const pink = { 2 | 50: '#fdf2f8', 3 | 100: '#fce7f3', 4 | 200: '#fbcfe8', 5 | 300: '#f9a8d4', 6 | 400: '#f472b6', 7 | 500: '#ec4899', 8 | 600: '#db2777', 9 | 700: '#be185d', 10 | 800: '#9d174d', 11 | 900: '#831843', 12 | 950: '#500724', 13 | } as const; 14 | 15 | export default pink; 16 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/tailwindCss/purple.ts: -------------------------------------------------------------------------------- 1 | export const purple = { 2 | 50: '#faf5ff', 3 | 100: '#f3e8ff', 4 | 200: '#e9d5ff', 5 | 300: '#d8b4fe', 6 | 400: '#c084fc', 7 | 500: '#a855f7', 8 | 600: '#9333ea', 9 | 700: '#7e22ce', 10 | 800: '#6b21a8', 11 | 900: '#581c87', 12 | 950: '#3b0764', 13 | } as const; 14 | 15 | export default purple; 16 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/tailwindCss/red.ts: -------------------------------------------------------------------------------- 1 | export const red = { 2 | 50: '#fef2f2', 3 | 100: '#fee2e2', 4 | 200: '#fecaca', 5 | 300: '#fca5a5', 6 | 400: '#f87171', 7 | 500: '#ef4444', 8 | 600: '#dc2626', 9 | 700: '#b91c1c', 10 | 800: '#991b1b', 11 | 900: '#7f1d1d', 12 | 950: '#450a0a', 13 | } as const; 14 | 15 | export default red; 16 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/tailwindCss/rose.ts: -------------------------------------------------------------------------------- 1 | export const rose = { 2 | 50: '#fff1f2', 3 | 100: '#ffe4e6', 4 | 200: '#fecdd3', 5 | 300: '#fda4af', 6 | 400: '#fb7185', 7 | 500: '#f43f5e', 8 | 600: '#e11d48', 9 | 700: '#be123c', 10 | 800: '#9f1239', 11 | 900: '#881337', 12 | 950: '#4c0519', 13 | } as const; 14 | 15 | export default rose; 16 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/tailwindCss/sky.ts: -------------------------------------------------------------------------------- 1 | export const sky = { 2 | 50: '#f0f9ff', 3 | 100: '#e0f2fe', 4 | 200: '#bae6fd', 5 | 300: '#7dd3fc', 6 | 400: '#38bdf8', 7 | 500: '#0ea5e9', 8 | 600: '#0284c7', 9 | 700: '#0369a1', 10 | 800: '#075985', 11 | 900: '#0c4a6e', 12 | 950: '#082f49', 13 | } as const; 14 | 15 | export default sky; 16 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/tailwindCss/slate.ts: -------------------------------------------------------------------------------- 1 | export const slate = { 2 | 50: '#f8fafc', 3 | 100: '#f1f5f9', 4 | 200: '#e2e8f0', 5 | 300: '#cbd5e1', 6 | 400: '#94a3b8', 7 | 500: '#64748b', 8 | 600: '#475569', 9 | 700: '#334155', 10 | 800: '#1e293b', 11 | 900: '#0f172a', 12 | 950: '#020617', 13 | } as const; 14 | 15 | export default slate; 16 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/tailwindCss/stone.ts: -------------------------------------------------------------------------------- 1 | export const stone = { 2 | 50: '#fafaf9', 3 | 100: '#f5f5f4', 4 | 200: '#e7e5e4', 5 | 300: '#d6d3d1', 6 | 400: '#a8a29e', 7 | 500: '#78716c', 8 | 600: '#57534e', 9 | 700: '#44403c', 10 | 800: '#292524', 11 | 900: '#1c1917', 12 | 950: '#0c0a09', 13 | } as const; 14 | 15 | export default stone; 16 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/tailwindCss/teal.ts: -------------------------------------------------------------------------------- 1 | export const teal = { 2 | 50: '#f0fdfa', 3 | 100: '#ccfbf1', 4 | 200: '#99f6e4', 5 | 300: '#5eead4', 6 | 400: '#2dd4bf', 7 | 500: '#14b8a6', 8 | 600: '#0d9488', 9 | 700: '#0f766e', 10 | 800: '#115e59', 11 | 900: '#134e4a', 12 | 950: '#042f2e', 13 | } as const; 14 | 15 | export default teal; 16 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/tailwindCss/violet.ts: -------------------------------------------------------------------------------- 1 | export const violet = { 2 | 50: '#f5f3ff', 3 | 100: '#ede9fe', 4 | 200: '#ddd6fe', 5 | 300: '#c4b5fd', 6 | 400: '#a78bfa', 7 | 500: '#8b5cf6', 8 | 600: '#7c3aed', 9 | 700: '#6d28d9', 10 | 800: '#5b21b6', 11 | 900: '#4c1d95', 12 | 950: '#2e1065', 13 | } as const; 14 | 15 | export default violet; 16 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/tailwindCss/yellow.ts: -------------------------------------------------------------------------------- 1 | export const yellow = { 2 | 50: '#fefce8', 3 | 100: '#fef9c3', 4 | 200: '#fef08a', 5 | 300: '#fde047', 6 | 400: '#facc15', 7 | 500: '#eab308', 8 | 600: '#ca8a04', 9 | 700: '#a16207', 10 | 800: '#854d0e', 11 | 900: '#713f12', 12 | 950: '#422006', 13 | } as const; 14 | 15 | export default yellow; 16 | -------------------------------------------------------------------------------- /packages/@blocks-colors/src/tailwindCss/zinc.ts: -------------------------------------------------------------------------------- 1 | export const zinc = { 2 | 50: '#fafafa', 3 | 100: '#f4f4f5', 4 | 200: '#e4e4e7', 5 | 300: '#d4d4d8', 6 | 400: '#a1a1aa', 7 | 500: '#71717a', 8 | 600: '#52525b', 9 | 700: '#3f3f46', 10 | 800: '#27272a', 11 | 900: '#18181b', 12 | 950: '#09090b', 13 | } as const; 14 | 15 | export default zinc; 16 | -------------------------------------------------------------------------------- /packages/@blocks-colors/tailwind-css/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@design-blocks/colors/tailwind-css", 3 | "version": "1.0.0", 4 | "private": true, 5 | "sideEffects": false, 6 | "module": "../dist/module/tailwindCss/index.js", 7 | "main": "../dist/commonjs/tailwindCss/index.js", 8 | "types": "../dist/typescript/tailwindCss/index.d.ts" 9 | } 10 | -------------------------------------------------------------------------------- /packages/@blocks-colors/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/base.json", 3 | "compilerOptions": { 4 | "baseUrl": "." 5 | }, 6 | "include": ["./src"], 7 | "exclude": ["node_modules", ".turbo"] 8 | } 9 | -------------------------------------------------------------------------------- /packages/@blocks-colors/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig", 3 | "include": ["src/**/*", "test/**/*"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/@blocks-primitives/.ci/testHelper.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { render } from '@testing-library/react-native'; 4 | import { createBlocks, createTokens } from '@design-blocks/system'; 5 | 6 | import { ThemeProvider } from '../../@blocks-theme'; 7 | 8 | import type { RenderOptions } from '@testing-library/react-native'; 9 | 10 | export const lightTheme = { 11 | tokens: { 12 | colors: { 13 | red: { 14 | 950: '#FF0000', 15 | }, 16 | }, 17 | }, 18 | }; 19 | 20 | const [themeTokens] = createTokens({ theme: lightTheme }); 21 | export const { block, css, themes } = createBlocks({ 22 | themes: { light: themeTokens }, 23 | }); 24 | 25 | const AllTheProviders = ({ children }: { children: React.ReactNode }) => { 26 | return {children}; 27 | }; 28 | 29 | const renderWithWrapper = (ui: React.ReactElement, options?: RenderOptions) => 30 | render(ui, { wrapper: AllTheProviders, ...options }); 31 | 32 | export * from '@testing-library/react-native'; 33 | export { renderWithWrapper }; 34 | -------------------------------------------------------------------------------- /packages/@blocks-primitives/README.md: -------------------------------------------------------------------------------- 1 | ![design-blocks/primitives](../../docs/stacks.jpeg) 2 | 3 | # Primitives 4 | 5 | Unstyled components for building high‑quality design systems and mobile apps in React-Native. 6 | 7 | Primitives is a low-level UI component library with a focus on customization and developer experience. You can use these 8 | components either as the base layer of your design system, or adopt them incrementally. 9 | -------------------------------------------------------------------------------- /packages/@blocks-primitives/biome.json: -------------------------------------------------------------------------------- 1 | ../../biome.json -------------------------------------------------------------------------------- /packages/@blocks-primitives/src/Box/Box.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import { __DEV__ } from '@design-blocks/utils'; 4 | 5 | import { createBox } from './createBox'; 6 | 7 | const Box = createBox(); 8 | 9 | if (__DEV__) { 10 | Box.displayName = 'Block.Box'; 11 | } 12 | 13 | export default React.memo(Box); 14 | -------------------------------------------------------------------------------- /packages/@blocks-primitives/src/Box/Box.types.ts: -------------------------------------------------------------------------------- 1 | import type * as RN from 'react-native'; 2 | 3 | import type { StylesObjectProps } from '@design-blocks/types'; 4 | 5 | export interface BoxProps extends RN.ViewProps, StylesObjectProps { 6 | /** 7 | * The system prop that allows defining system overrides as well as additional CSS StyleSheets 8 | * 9 | * @Type object 10 | * 11 | * @Default {} 12 | * 13 | * @example 14 | * ```tsx 15 | * 16 | * 17 | * 18 | * 19 | * ``` 20 | * @see { @sx https://github.com/wootsbot/design-blocks/tree/main/packages/blocks-primitives/src/Box } 21 | */ 22 | sx?: StylesObjectProps; 23 | } 24 | -------------------------------------------------------------------------------- /packages/@blocks-primitives/src/Box/createBox.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as RN from 'react-native'; 3 | 4 | import block from '@design-blocks/block'; 5 | 6 | import { StyleFunctionMode, styleFunction } from '@design-blocks/system'; 7 | import { __DEV__ } from '@design-blocks/utils'; 8 | 9 | import type { BoxProps } from './Box.types'; 10 | 11 | export function createBox() { 12 | const BoxBlock = block(RN.View, { 13 | shouldForwardProp: (prop) => prop !== 'theme' && prop !== 'sx' && prop !== 'as', 14 | })(({ theme, sx, ...styleProps }) => { 15 | return { 16 | ...styleFunction('Box', theme, { ...styleProps }, StyleFunctionMode.PROPS), 17 | ...styleFunction('Box', theme, sx, StyleFunctionMode.SX), 18 | }; 19 | }); 20 | 21 | const Box = React.forwardRef((props, forwardedRef) => { 22 | return ; 23 | }); 24 | 25 | return Box; 26 | } 27 | -------------------------------------------------------------------------------- /packages/@blocks-primitives/src/Box/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Box } from './Box'; 2 | export type { BoxProps } from './Box.types'; 3 | -------------------------------------------------------------------------------- /packages/@blocks-primitives/src/Box/tests/Box.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { Text } from 'react-native'; 4 | 5 | import { lightTheme, renderWithWrapper, screen } from '../../../.ci/testHelper'; 6 | 7 | import { Box } from '../..'; 8 | 9 | describe('', () => { 10 | it('should render correctly', () => { 11 | renderWithWrapper(); 12 | const result = screen.toJSON(); 13 | 14 | expect(result.type).toEqual('View'); 15 | }); 16 | 17 | it('should render the View component with a background color corresponding to the "red.950" value from the bgColor prop', () => { 18 | renderWithWrapper(); 19 | 20 | const result = screen.toJSON(); 21 | 22 | expect(result.type).toEqual('View'); 23 | expect(result.props.style[0]).toMatchObject({ 24 | backgroundColor: lightTheme.tokens.colors.red[950], 25 | }); 26 | }); 27 | 28 | it('should apply styles from sx prop to the rendered View component', () => { 29 | renderWithWrapper(); 30 | 31 | const result = screen.toJSON(); 32 | 33 | expect(result.type).toEqual('View'); 34 | expect(result.props.style[0]).toMatchObject({ backgroundColor: 'red' }); 35 | }); 36 | 37 | it('should apply styles from style prop to the rendered View component', () => { 38 | renderWithWrapper(); 39 | 40 | const result = screen.toJSON(); 41 | 42 | expect(result.type).toEqual('View'); 43 | expect(result.props.style[1]).toMatchObject({ backgroundColor: 'blue' }); 44 | }); 45 | 46 | it('should render children component', () => { 47 | const TEXT = 'My Text'; 48 | 49 | renderWithWrapper( 50 | 51 | {TEXT} 52 | , 53 | ); 54 | 55 | const result = screen.toJSON(); 56 | 57 | expect(result.type).toEqual('View'); 58 | expect(result.children[0].type).toEqual('Text'); 59 | 60 | const CompText = screen.getByRole('text'); 61 | expect(CompText).toBeTruthy(); 62 | expect(screen.getByText(TEXT)).toBeTruthy(); 63 | }); 64 | }); 65 | -------------------------------------------------------------------------------- /packages/@blocks-primitives/src/Box/tests/createBox.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { Text } from 'react-native'; 4 | 5 | import { renderWithWrapper, screen } from '../../../.ci/testHelper'; 6 | 7 | import { createBox } from '../createBox'; 8 | 9 | describe('createBox', () => { 10 | const Box = createBox(); 11 | 12 | it('should render correctly', () => { 13 | renderWithWrapper(); 14 | const result = screen.toJSON(); 15 | 16 | expect(result.type).toEqual('View'); 17 | }); 18 | 19 | it('should render children component', () => { 20 | const TEXT = 'My Text'; 21 | 22 | renderWithWrapper( 23 | 24 | {TEXT} 25 | , 26 | ); 27 | 28 | const result = screen.toJSON(); 29 | 30 | expect(result.type).toEqual('View'); 31 | expect(result.children[0].type).toEqual('Text'); 32 | 33 | const CompText = screen.getByRole('text'); 34 | expect(CompText).toBeTruthy(); 35 | expect(screen.getByText(TEXT)).toBeTruthy(); 36 | }); 37 | }); 38 | -------------------------------------------------------------------------------- /packages/@blocks-primitives/src/Stack/Stack.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import { __DEV__ } from '@design-blocks/utils'; 4 | 5 | import { createStack } from './createStack'; 6 | 7 | import type { StackProps } from './Stack.types'; 8 | 9 | const StackBlock = createStack(); 10 | function Stack({ ...props }: StackProps) { 11 | return ; 12 | } 13 | if (__DEV__) { 14 | Stack.displayName = 'Block.Stack'; 15 | } 16 | 17 | /** 18 | * The Stack component manages the layout of its immediate children along 19 | * the vertical or horizontal axis. It provides optional spacing and/or dividers 20 | * between each child, offering a convenient way to handle one-dimensional layouts. 21 | * 22 | * It's especially useful for wrapping components that don't accept external styles. 23 | * 24 | * @example 25 | * ```tsx 26 | * 27 | * 28 | * 29 | * 30 | * 31 | * ... 32 | * 33 | * ``` 34 | * 35 | * @remarks 36 | * Stack is strictly concerned with one-dimensional layouts. 37 | * 38 | * @see {@link https://github.com/wootsbot/design-blocks/tree/main/packages/blocks-primitives/src/Stack | Stack Component Documentation} 39 | */ 40 | export default Stack; 41 | -------------------------------------------------------------------------------- /packages/@blocks-primitives/src/Stack/Stack.types.ts: -------------------------------------------------------------------------------- 1 | import type * as RN from 'react-native'; 2 | 3 | import type { FlexGapBlock, StylesObjectProps, SxStyledFlex } from '@design-blocks/types'; 4 | 5 | type SxStyledProps = Omit; 6 | 7 | export interface StackProps extends RN.ViewProps, Omit, FlexGapBlock { 8 | /** 9 | * Defines the `flex-direction` style property. It is applied for all screen sizes. 10 | * 11 | * @Type "row" | "column" | "row-reverse" | "column-reverse" 12 | * 13 | * @Default column 14 | * 15 | * @example 16 | * ```tsx 17 | * 18 | * 19 | * 20 | * 21 | * ``` 22 | * @see { @sx https://github.com/wootsbot/design-blocks/tree/main/packages/blocks-primitives/src/Stack } 23 | */ 24 | direction?: RN.FlexStyle['flexDirection']; 25 | /** 26 | * The system prop that allows defining system overrides as well as additional CSS StyleSheets 27 | * 28 | * @Type object 29 | * 30 | * @Default {} 31 | * 32 | * @example 33 | * ```tsx 34 | * 35 | * 36 | * 37 | * 38 | * ``` 39 | * @see { @sx https://github.com/wootsbot/design-blocks/tree/main/packages/blocks-primitives/src/Stack } 40 | */ 41 | sx?: SxStyledProps; 42 | } 43 | 44 | export type IStackStyleValue = { 45 | display?: 'flex'; 46 | flexDirection?: SxStyledFlex['flexDirection']; 47 | alignItems?: SxStyledFlex['alignItems']; 48 | justifyContent?: SxStyledFlex['justifyContent']; 49 | flexWrap?: SxStyledFlex['flexWrap']; 50 | }; 51 | -------------------------------------------------------------------------------- /packages/@blocks-primitives/src/Stack/Stack.utils.ts: -------------------------------------------------------------------------------- 1 | export const variants = { 2 | flexDirection: { 3 | row: 'row', 4 | column: 'column', 5 | rowReverse: 'row-reverse', 6 | columnReverse: 'column-reverse', 7 | }, 8 | 9 | flexWrap: { 10 | nowrap: 'nowrap', 11 | wrap: 'wrap', 12 | wrapReverse: 'wrap-reverse', 13 | }, 14 | 15 | alignItems: { 16 | flexStart: 'flex-start', 17 | center: 'center', 18 | flexEnd: 'flex-end', 19 | stretch: 'stretch', 20 | baseline: 'baseline', 21 | }, 22 | 23 | justifyContent: { 24 | flexStart: 'flex-start', 25 | center: 'center', 26 | flexEnd: 'flex-end', 27 | spaceBetween: 'space-between', 28 | spaceEvenly: 'space-evenly', 29 | spaceAround: 'space-around', 30 | }, 31 | }; 32 | -------------------------------------------------------------------------------- /packages/@blocks-primitives/src/Stack/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Stack } from './Stack'; 2 | export * from './createStack'; 3 | export type { StackProps } from './Stack.types'; 4 | -------------------------------------------------------------------------------- /packages/@blocks-primitives/src/Text/Text.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import { __DEV__ } from '@design-blocks/utils'; 4 | 5 | import { createText } from './createText'; 6 | 7 | const Text = createText(); 8 | 9 | if (__DEV__) { 10 | Text.displayName = 'Block.Text'; 11 | } 12 | 13 | export default React.memo(Text); 14 | -------------------------------------------------------------------------------- /packages/@blocks-primitives/src/Text/Text.types.ts: -------------------------------------------------------------------------------- 1 | import * as RN from 'react-native'; 2 | 3 | import type { SxStyledText, TextStyledProps } from '@design-blocks/types'; 4 | 5 | export interface TextProps extends RN.TextProps, TextStyledProps { 6 | /** 7 | * The system prop that allows defining system overrides as well as additional CSS styles. 8 | * It can be used to both override the default styles provided by the component and add additional styles. 9 | * 10 | * @example 11 | * ```tsx 12 | * 13 | * Hello World 14 | * 15 | * ``` 16 | * 17 | * @type {TextStyledProps} 18 | * 19 | * @default {} 20 | */ 21 | sx?: SxStyledText; 22 | } 23 | -------------------------------------------------------------------------------- /packages/@blocks-primitives/src/Text/createText.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as RN from 'react-native'; 3 | 4 | import block from '@design-blocks/block'; 5 | import { StyleFunctionMode, styleFunction } from '@design-blocks/system'; 6 | import { __DEV__ } from '@design-blocks/utils'; 7 | 8 | import type { TextProps } from './Text.types'; 9 | 10 | export function createText() { 11 | const TextBlock = block(RN.Text, { 12 | shouldForwardProp: (prop) => prop !== 'theme' && prop !== 'sx' && prop !== 'as', 13 | })(({ theme, sx, ...styleProps }) => { 14 | return { 15 | ...styleFunction('Text', theme, { ...styleProps }, StyleFunctionMode.PROPS), 16 | ...styleFunction('Text', theme, sx, StyleFunctionMode.SX), 17 | }; 18 | }); 19 | 20 | const Text = React.forwardRef((props, forwardedRef) => { 21 | return ; 22 | }); 23 | 24 | return Text; 25 | } 26 | -------------------------------------------------------------------------------- /packages/@blocks-primitives/src/Text/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Text } from './Text'; 2 | export type { TextProps } from './Text.types'; 3 | -------------------------------------------------------------------------------- /packages/@blocks-primitives/src/Text/tests/Text.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { lightTheme, renderWithWrapper, screen } from '../../../.ci/testHelper'; 4 | 5 | import { Text } from '../..'; 6 | 7 | describe('', () => { 8 | it('should render correctly', () => { 9 | renderWithWrapper(); 10 | const result = screen.toJSON(); 11 | 12 | expect(result.type).toEqual('Text'); 13 | }); 14 | 15 | it('should render the Text component with a color corresponding to the "red.950" value from the color prop', () => { 16 | renderWithWrapper(); 17 | 18 | const result = screen.toJSON(); 19 | 20 | expect(result.type).toEqual('Text'); 21 | expect(result.props.style[0]).toMatchObject({ 22 | color: lightTheme.tokens.colors.red[950], 23 | }); 24 | }); 25 | 26 | it('should apply styles from sx prop to the rendered Text component', () => { 27 | renderWithWrapper(); 28 | 29 | const result = screen.toJSON(); 30 | 31 | expect(result.type).toEqual('Text'); 32 | expect(result.props.style[0]).toMatchObject({ color: 'red' }); 33 | }); 34 | 35 | it('should apply styles from style prop to the rendered View component', () => { 36 | renderWithWrapper(); 37 | 38 | const result = screen.toJSON(); 39 | 40 | expect(result.type).toEqual('Text'); 41 | expect(result.props.style[1]).toMatchObject({ color: 'blue' }); 42 | }); 43 | 44 | it('should render Text with Text', () => { 45 | const TEXT = 'My Text'; 46 | 47 | renderWithWrapper({TEXT}); 48 | 49 | const CompText = screen.getByRole('text'); 50 | expect(CompText).toBeTruthy(); 51 | expect(screen.getByText(TEXT)).toBeTruthy(); 52 | }); 53 | }); 54 | -------------------------------------------------------------------------------- /packages/@blocks-primitives/src/Text/tests/createText.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { lightTheme, renderWithWrapper, screen } from '../../../.ci/testHelper'; 4 | 5 | import { createText } from '../createText'; 6 | 7 | describe('createText', () => { 8 | const Text = createText(); 9 | 10 | it('should render correctly', () => { 11 | renderWithWrapper(); 12 | const result = screen.toJSON(); 13 | 14 | expect(result.type).toEqual('Text'); 15 | }); 16 | 17 | it('should render the Text component with a color corresponding to the "red.950" value from the color prop', () => { 18 | renderWithWrapper(); 19 | 20 | const result = screen.toJSON(); 21 | 22 | expect(result.type).toEqual('Text'); 23 | expect(result.props.style[0]).toMatchObject({ 24 | color: lightTheme.tokens.colors.red[950], 25 | }); 26 | }); 27 | 28 | it('should apply styles from sx prop to the rendered Text component', () => { 29 | renderWithWrapper(); 30 | 31 | const result = screen.toJSON(); 32 | 33 | expect(result.type).toEqual('Text'); 34 | expect(result.props.style[0]).toMatchObject({ color: 'red' }); 35 | }); 36 | 37 | it('should apply styles from style prop to the rendered View component', () => { 38 | renderWithWrapper(); 39 | 40 | const result = screen.toJSON(); 41 | 42 | expect(result.type).toEqual('Text'); 43 | expect(result.props.style[1]).toMatchObject({ color: 'blue' }); 44 | }); 45 | 46 | it('should render Text with Text', () => { 47 | const TEXT = 'My Text'; 48 | 49 | renderWithWrapper({TEXT}); 50 | 51 | const CompText = screen.getByRole('text'); 52 | expect(CompText).toBeTruthy(); 53 | expect(screen.getByText(TEXT)).toBeTruthy(); 54 | }); 55 | }); 56 | -------------------------------------------------------------------------------- /packages/@blocks-primitives/src/XStack/XStack.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import { __DEV__ } from '@design-blocks/utils'; 4 | 5 | import { createStack } from '../Stack'; 6 | 7 | import type { StackProps } from '../Stack'; 8 | 9 | const Stack = createStack(); 10 | 11 | function XStack({ ...props }: StackProps) { 12 | return ; 13 | } 14 | 15 | if (__DEV__) { 16 | XStack.displayName = 'Block.XStack'; 17 | } 18 | 19 | /** 20 | * The XStack component manages the layout of its immediate children along 21 | * the horizontal axis. It provides optional spacing and/or dividers between each child. 22 | * 23 | * Unlike generic Stack components, XStack ensures its children are stacked 24 | * horizontally, making it especially useful for row layouts. 25 | * 26 | * @remarks 27 | * XStack is specifically designed for horizontal one-dimensional layouts. 28 | * 29 | * @example 30 | * Use XStack to horizontally align components that do not accept external styles. 31 | * 32 | * ```tsx 33 | * 34 | * 35 | * 36 | * 37 | * 38 | * ... 39 | * 40 | * ``` 41 | * 42 | * @see {@link https://github.com/wootsbot/design-blocks/tree/main/packages/blocks-primitives/src/XStack | XStack Component Documentation} 43 | */ 44 | export default React.memo(XStack); 45 | -------------------------------------------------------------------------------- /packages/@blocks-primitives/src/XStack/index.ts: -------------------------------------------------------------------------------- 1 | export { default as XStack } from './XStack'; 2 | -------------------------------------------------------------------------------- /packages/@blocks-primitives/src/YStack/YStack.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import { __DEV__ } from '@design-blocks/utils'; 4 | 5 | import { createStack } from '../Stack'; 6 | 7 | import type { StackProps } from '../Stack'; 8 | 9 | const Stack = createStack(); 10 | function YStack({ ...props }: StackProps) { 11 | return ; 12 | } 13 | 14 | if (__DEV__) { 15 | YStack.displayName = 'Block.YStack'; 16 | } 17 | 18 | /** 19 | * The YStack component manages the layout of its immediate children along 20 | * the vertical axis. It offers optional spacing and/or dividers between each child. 21 | * 22 | * Unlike generic Stack components, YStack ensures its children are stacked 23 | * vertically, making it particularly suitable for column layouts. 24 | * 25 | * @remarks 26 | * YStack is dedicated to vertical one-dimensional layouts. 27 | * 28 | * @example 29 | * Use YStack to vertically align components that do not accept external styles. 30 | * 31 | * ```tsx 32 | * 33 | * 34 | * 35 | * 36 | * 37 | * ... 38 | * 39 | * ``` 40 | * 41 | * @see {@link https://github.com/wootsbot/design-blocks/tree/main/packages/blocks-primitives/src/YStack | YStack Component Documentation} 42 | */ 43 | export default React.memo(YStack); 44 | -------------------------------------------------------------------------------- /packages/@blocks-primitives/src/YStack/index.ts: -------------------------------------------------------------------------------- 1 | export { default as YStack } from './YStack'; 2 | -------------------------------------------------------------------------------- /packages/@blocks-primitives/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Box'; 2 | export * from './Stack'; 3 | export * from './Text'; 4 | export * from './XStack'; 5 | export * from './YStack'; 6 | -------------------------------------------------------------------------------- /packages/@blocks-primitives/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/base.json", 3 | "compilerOptions": { 4 | "baseUrl": "." 5 | }, 6 | "include": ["./src"], 7 | "exclude": ["node_modules", ".turbo", "**/*.test.tsx"] 8 | } 9 | -------------------------------------------------------------------------------- /packages/@blocks-primitives/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig", 3 | "include": ["src/**/*", "test/**/*"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/@blocks-system/README.md: -------------------------------------------------------------------------------- 1 | # blocks-system 2 | -------------------------------------------------------------------------------- /packages/@blocks-system/biome.json: -------------------------------------------------------------------------------- 1 | ../../biome.json -------------------------------------------------------------------------------- /packages/@blocks-system/src/createBlocks.ts: -------------------------------------------------------------------------------- 1 | import block, { css } from '@design-blocks/block'; 2 | 3 | import type { CreateBlock } from '@design-blocks/block'; 4 | import type { Theme } from '@design-blocks/theme'; 5 | 6 | export function createBlocks>({ 7 | themes: additionalThemes, 8 | }: { 9 | themes: U; 10 | }): { 11 | themes: U; 12 | block: CreateBlock; 13 | css: typeof css; 14 | } { 15 | const themes = { ...additionalThemes } as U; 16 | 17 | return { 18 | themes, 19 | block, 20 | css, 21 | }; 22 | } 23 | -------------------------------------------------------------------------------- /packages/@blocks-system/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './styleFunction'; 2 | export * from './createBlocks'; 3 | export * from './createTokens'; 4 | -------------------------------------------------------------------------------- /packages/@blocks-system/src/styleFunction/getValuesTokens.ts: -------------------------------------------------------------------------------- 1 | import { get, isString, isUndefined } from '@design-blocks/utils'; 2 | 3 | import type { Theme } from '@design-blocks/theme'; 4 | 5 | export const getValuesTokens = (values: Theme, fieldNames: string | string[] | undefined) => { 6 | const fieldNamesMap = fieldNames as string[]; 7 | 8 | return isUndefined(fieldNames) 9 | ? values 10 | : isString(fieldNames) 11 | ? get(values, fieldNames) 12 | : fieldNamesMap?.map((name: string) => get(values, name)); 13 | }; 14 | -------------------------------------------------------------------------------- /packages/@blocks-system/src/styleFunction/index.ts: -------------------------------------------------------------------------------- 1 | export * from './getValuesTokens'; 2 | export * from './styleFunction'; 3 | export * from './validateProperties'; 4 | -------------------------------------------------------------------------------- /packages/@blocks-system/src/tests/createBlocks.test.ts: -------------------------------------------------------------------------------- 1 | import { createBlocks, createTokens } from '..'; 2 | 3 | describe('createBlocks', () => { 4 | const lightTheme = { 5 | tokens: { 6 | colors: { 7 | blue: { 8 | 950: 'blue', 9 | }, 10 | }, 11 | }, 12 | extendTokens: { 13 | spacings: { 14 | '7xl': 76, 15 | '8xl': 80, 16 | }, 17 | radii: { 18 | '6xl': 32, 19 | '7xl': 36, 20 | }, 21 | fontSizes: { 22 | '10xl': 80, 23 | }, 24 | }, 25 | }; 26 | 27 | const darkTheme = { 28 | tokens: { 29 | colors: { 30 | blue: { 31 | 950: 'red', 32 | }, 33 | }, 34 | }, 35 | extendTokens: { 36 | spacings: { 37 | '7xl': 76, 38 | '8xl': 80, 39 | }, 40 | radii: { 41 | '6xl': 32, 42 | '7xl': 36, 43 | }, 44 | fontSizes: { 45 | '10xl': 80, 46 | }, 47 | }, 48 | }; 49 | 50 | const utils = { 51 | px: (value: number) => `${value}px`, 52 | }; 53 | 54 | const [themeTokens] = createTokens({ theme: lightTheme, utils }); 55 | const [darkThemeTokens] = createTokens({ theme: darkTheme, utils }); 56 | 57 | it('should return themes.light', () => { 58 | const result = createBlocks({ 59 | themes: { light: themeTokens }, 60 | }); 61 | 62 | expect(result).toHaveProperty('themes'); 63 | expect(result).toHaveProperty('themes.light'); 64 | expect(result).toHaveProperty('block'); 65 | expect(result).toHaveProperty('css'); 66 | }); 67 | 68 | it('should return multi themes', () => { 69 | const result = createBlocks({ 70 | themes: { light: themeTokens, dark: darkThemeTokens }, 71 | }); 72 | 73 | expect(result).toHaveProperty('themes'); 74 | expect(result).toHaveProperty('themes.light'); 75 | expect(result).toHaveProperty('themes.dark'); 76 | expect(result).toHaveProperty('block'); 77 | expect(result).toHaveProperty('css'); 78 | }); 79 | }); 80 | -------------------------------------------------------------------------------- /packages/@blocks-system/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/base.json", 3 | "compilerOptions": { 4 | "baseUrl": "." 5 | }, 6 | "include": ["./src"], 7 | "exclude": ["node_modules", ".turbo", "**/*.test.tsx", "**/*.test.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /packages/@blocks-system/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig", 3 | "include": ["src/**/*", "test/**/*"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/@blocks-theme/README.md: -------------------------------------------------------------------------------- 1 | # blocks-theme 2 | -------------------------------------------------------------------------------- /packages/@blocks-theme/biome.json: -------------------------------------------------------------------------------- 1 | ../../biome.json -------------------------------------------------------------------------------- /packages/@blocks-theme/src/_isolated-hnrs.ts: -------------------------------------------------------------------------------- 1 | // this file isolates this package that is not tree-shakeable 2 | // and allows it to be dropped - if it stays unused 3 | // it happens thanks to sideEffects: false in our package.json 4 | import hoistNonReactStatics from 'hoist-non-react-statics'; 5 | 6 | // have to wrap it in a proxy function because Rollup is too damn smart 7 | // and if this module doesn't actually contain any logic of its own 8 | // then Rollup just use 'hoist-non-react-statics' directly in other chunks 9 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment 10 | //@ts-ignore 11 | export default (targetComponent, sourceComponent) => hoistNonReactStatics(targetComponent, sourceComponent); 12 | -------------------------------------------------------------------------------- /packages/@blocks-theme/src/baseTheme.ts: -------------------------------------------------------------------------------- 1 | import { borders, fonts, radii, sizes, spacings, utils } from './themeTokens'; 2 | 3 | export const baseTheme = { 4 | colors: {}, 5 | spacings, 6 | sizes, 7 | fontSizes: fonts.fontSizes, 8 | fontWeights: fonts.fontWeights, 9 | radii, 10 | borders, 11 | utils, 12 | }; 13 | -------------------------------------------------------------------------------- /packages/@blocks-theme/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './themeTokens'; 2 | export * from './baseTheme'; 3 | export * from './themeKeys'; 4 | export * from './theming'; 5 | export * from './theme'; 6 | -------------------------------------------------------------------------------- /packages/@blocks-theme/src/tests/weakMemoize.test.ts: -------------------------------------------------------------------------------- 1 | import { weakMemoize } from '../weakMemoize'; 2 | 3 | describe('weakMemoize', () => { 4 | it('should memoize the result of a function', () => { 5 | const func = jest.fn((x) => x.value * 2); 6 | const memoizedFunc = weakMemoize(func); 7 | 8 | const arg = { value: 10 }; 9 | const firstCallResult = memoizedFunc(arg); 10 | const secondCallResult = memoizedFunc(arg); 11 | 12 | expect(firstCallResult).toBe(20); 13 | expect(secondCallResult).toBe(20); 14 | expect(func).toHaveBeenCalledTimes(1); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /packages/@blocks-theme/src/theme.ts: -------------------------------------------------------------------------------- 1 | import type { Borders, FontSizes, FontWeights, Radii, Sizes, Spacings, Utils } from './themeTokens'; 2 | 3 | export interface Colors { 4 | [key: string]: string | Colors; 5 | } 6 | 7 | export interface Theme { 8 | colors: Colors; 9 | spacings: Spacings; 10 | sizes: Sizes; 11 | fontSizes: FontSizes; 12 | fontWeights: FontWeights; 13 | radii: Radii; 14 | borders: Borders; 15 | utils: Utils; 16 | } 17 | 18 | type baseValue = string | number; 19 | 20 | export interface TokensOptions { 21 | theme: { 22 | tokens: { 23 | colors?: { 24 | [key: string]: string | TokensOptions['theme']['tokens']['colors']; 25 | }; 26 | spacings?: Partial; 27 | sizes?: Partial; 28 | fontSizes?: Partial; 29 | fontWeights?: Partial; 30 | radii?: Partial; 31 | borders?: Partial; 32 | }; 33 | 34 | extendTokens?: { 35 | spacings?: { 36 | [key: string]: baseValue | TokensOptions['theme']['tokens']['spacings']; 37 | }; 38 | sizes?: { 39 | [key: string]: baseValue | TokensOptions['theme']['tokens']['sizes']; 40 | }; 41 | fontSizes?: { 42 | [key: string]: baseValue | TokensOptions['theme']['tokens']['fontSizes']; 43 | }; 44 | fontWeights?: { 45 | [key: string]: string | TokensOptions['theme']['tokens']['fontWeights']; 46 | }; 47 | radii?: { 48 | [key: string]: baseValue | TokensOptions['theme']['tokens']['radii']; 49 | }; 50 | borders?: { 51 | [key: string]: baseValue | TokensOptions['theme']['tokens']['borders']; 52 | }; 53 | }; 54 | }; 55 | utils?: Partial; 56 | } 57 | -------------------------------------------------------------------------------- /packages/@blocks-theme/src/themeKeys/borders.ts: -------------------------------------------------------------------------------- 1 | export const bordersKeys = { 2 | borderWidth: 'borderWidth', 3 | border: 'borderWidth', 4 | borderBottomWidth: 'borderBottomWidth', 5 | borderBottom: 'borderBottomWidth', 6 | borderEndWidth: 'borderEndWidth', 7 | borderEnd: 'borderEndWidth', 8 | borderLeftWidth: 'borderLeftWidth', 9 | borderLeft: 'borderLeftWidth', 10 | borderRightWidth: 'borderRightWidth', 11 | borderRight: 'borderRightWidth', 12 | borderStartWidth: 'borderStartWidth', 13 | borderStart: 'borderStartWidth', 14 | borderTopWidth: 'borderTopWidth', 15 | borderTop: 'borderTopWidth', 16 | } as const; 17 | 18 | export type IBordersKeys = keyof typeof bordersKeys; 19 | export type BordersKeys = typeof bordersKeys; 20 | -------------------------------------------------------------------------------- /packages/@blocks-theme/src/themeKeys/colors.ts: -------------------------------------------------------------------------------- 1 | export const colorsKeys = { 2 | backgroundColor: 'backgroundColor', 3 | bgColor: 'backgroundColor', 4 | color: 'color', 5 | borderColor: 'borderColor', 6 | borderTopColor: 'borderTopColor', 7 | borderRightColor: 'borderRightColor', 8 | borderEndColor: 'borderEndColor', 9 | borderBottomColor: 'borderBottomColor', 10 | borderLeftColor: 'borderLeftColor', 11 | borderStartColor: 'borderStartColor', 12 | borderBlockColor: 'borderBlockColor', 13 | borderBlockEndColor: 'borderBlockEndColor', 14 | borderBlockStartColor: 'borderBlockStartColor', 15 | textDecorationColor: 'textDecorationColor', 16 | textShadowColor: 'textShadowColor', 17 | shadowColor: 'shadowColor', 18 | overlayColor: 'overlayColor', 19 | tintColor: 'tintColor', 20 | } as const; 21 | 22 | export type IColorsKeys = keyof typeof colorsKeys; 23 | export type ColorsKeys = typeof colorsKeys; 24 | -------------------------------------------------------------------------------- /packages/@blocks-theme/src/themeKeys/fonts.ts: -------------------------------------------------------------------------------- 1 | export const fontsKeys = { 2 | color: 'color', 3 | fontFamily: 'fontFamily', 4 | fontSize: 'fontSize', 5 | fontStyle: 'fontStyle', 6 | fontWeight: 'fontWeight', 7 | letterSpacing: 'letterSpacing', 8 | lineHeight: 'lineHeight', 9 | textAlign: 'textAlign', 10 | textDecorationLine: 'textDecorationLine', 11 | textDecoration: 'textDecoration', 12 | textDecorationStyle: 'textDecorationStyle', 13 | textDecorationColor: 'textDecorationColor', 14 | textShadowColor: 'textShadowColor', 15 | textShadowOffset: 'textShadowOffset', 16 | textShadowRadius: 'textShadowRadius', 17 | textTransform: 'textTransform', 18 | } as const; 19 | 20 | export type IFontsKeys = keyof typeof fontsKeys; 21 | export type FontsKeys = typeof fontsKeys; 22 | -------------------------------------------------------------------------------- /packages/@blocks-theme/src/themeKeys/index.ts: -------------------------------------------------------------------------------- 1 | export * from './colors'; 2 | export * from './spacings'; 3 | export * from './sizes'; 4 | export * from './spacings'; 5 | export * from './fonts'; 6 | export * from './radii'; 7 | export * from './borders'; 8 | export * from './themeKeys'; 9 | -------------------------------------------------------------------------------- /packages/@blocks-theme/src/themeKeys/radii.ts: -------------------------------------------------------------------------------- 1 | export const radiiKeys = { 2 | borderRadius: 'borderRadius', 3 | borderBottomEndRadius: 'borderBottomEndRadius', 4 | borderBottomLeftRadius: 'borderBottomLeftRadius', 5 | borderBottomRightRadius: 'borderBottomRightRadius', 6 | borderBottomStartRadius: 'borderBottomStartRadius', 7 | borderTopEndRadius: 'borderTopEndRadius', 8 | borderTopLeftRadius: 'borderTopLeftRadius', 9 | borderTopRightRadius: 'borderTopRightRadius', 10 | borderTopStartRadius: 'borderTopStartRadius', 11 | } as const; 12 | 13 | export type IRadiiKeys = keyof typeof radiiKeys; 14 | export type RadiiKeys = typeof radiiKeys; 15 | -------------------------------------------------------------------------------- /packages/@blocks-theme/src/themeKeys/sizes.ts: -------------------------------------------------------------------------------- 1 | export const sizesKeys = { 2 | width: 'width', 3 | w: 'width', 4 | height: 'height', 5 | h: 'width', 6 | minWidth: 'minWidth', 7 | minW: 'minWidth', 8 | maxWidth: 'maxWidth', 9 | maxW: 'maxWidth', 10 | minHeight: 'minHeight', 11 | minH: 'minHeight', 12 | maxHeight: 'maxHeight', 13 | maxH: 'maxHeight', 14 | } as const; 15 | 16 | export type ISizesKeys = keyof typeof sizesKeys; 17 | export type SizesKeys = typeof sizesKeys; 18 | -------------------------------------------------------------------------------- /packages/@blocks-theme/src/themeKeys/spacings.ts: -------------------------------------------------------------------------------- 1 | export const spacingsKeys = { 2 | m: 'margin', 3 | margin: 'margin', 4 | mr: 'marginRight', 5 | marginRight: 'marginRight', 6 | ml: 'marginLeft', 7 | marginLeft: 'marginLeft', 8 | mt: 'marginTop', 9 | marginTop: 'marginTop', 10 | mb: 'marginBottom', 11 | marginBottom: 'marginBottom', 12 | mv: 'marginVertical', 13 | marginVertical: 'marginVertical', 14 | mh: 'marginHorizontal', 15 | marginHorizontal: 'marginHorizontal', 16 | 17 | p: 'padding', 18 | padding: 'padding', 19 | pr: 'paddingRight', 20 | paddingRight: 'paddingRight', 21 | pl: 'paddingLeft', 22 | paddingLeft: 'paddingLeft', 23 | pt: 'paddingTop', 24 | paddingTop: 'paddingTop', 25 | pb: 'paddingBottom', 26 | paddingBottom: 'paddingBottom', 27 | pv: 'paddingVertical', 28 | paddingVertical: 'paddingVertical', 29 | ph: 'paddingHorizontal', 30 | paddingHorizontal: 'paddingHorizontal', 31 | 32 | gap: 'gap', 33 | rowGap: 'rowGap', 34 | columnGap: 'columnGap', 35 | } as const; 36 | 37 | export type ISpacesKeys = keyof typeof spacingsKeys; 38 | export type SpacesKeys = typeof spacingsKeys; 39 | -------------------------------------------------------------------------------- /packages/@blocks-theme/src/themeKeys/themeKeys.ts: -------------------------------------------------------------------------------- 1 | import { bordersKeys } from './borders'; 2 | import { colorsKeys } from './colors'; 3 | import { fontsKeys } from './fonts'; 4 | import { radiiKeys } from './radii'; 5 | import { sizesKeys } from './sizes'; 6 | import { spacingsKeys } from './spacings'; 7 | 8 | export const componentsKeys = { 9 | Box: { 10 | ...spacingsKeys, 11 | ...colorsKeys, 12 | ...sizesKeys, 13 | ...radiiKeys, 14 | ...bordersKeys, 15 | }, 16 | 17 | Text: { 18 | ...spacingsKeys, 19 | ...sizesKeys, 20 | ...colorsKeys, 21 | ...fontsKeys, 22 | ...bordersKeys, 23 | }, 24 | }; 25 | 26 | export const themeKeys = { 27 | colors: colorsKeys, 28 | fonts: fontsKeys, 29 | radii: radiiKeys, 30 | borders: bordersKeys, 31 | sizes: sizesKeys, 32 | spacings: spacingsKeys, 33 | }; 34 | 35 | export const KeysPropertyValues = { 36 | ...colorsKeys, 37 | ...fontsKeys, 38 | ...radiiKeys, 39 | ...bordersKeys, 40 | ...sizesKeys, 41 | ...spacingsKeys, 42 | }; 43 | 44 | export type IThemeKeys = keyof typeof themeKeys; 45 | export type ThemeKeys = typeof themeKeys; 46 | export type IKeysPropertyValues = keyof typeof KeysPropertyValues; 47 | export type KeysPropertyValues = typeof KeysPropertyValues; 48 | 49 | export type IComponentsKeysProps = keyof typeof componentsKeys; 50 | export type ComponentsKeysProps = typeof componentsKeys; 51 | export type IBoxComponentKeysProps = keyof typeof componentsKeys.Box; 52 | export type BoxComponentKeysProps = typeof componentsKeys.Box; 53 | export type ITextComponentKeysProps = keyof typeof componentsKeys.Text; 54 | export type TextComponentKeysProps = typeof componentsKeys.Text; 55 | -------------------------------------------------------------------------------- /packages/@blocks-theme/src/themeTokens/borders.ts: -------------------------------------------------------------------------------- 1 | export const borders = { 2 | none: 0, 3 | true: 1, 4 | sm: 2, 5 | md: 6, 6 | lg: 8, 7 | xl: 12, 8 | '2xl': 16, 9 | '3xl': 20, 10 | '4xl': 24, 11 | '5xl': 28, 12 | } as const; 13 | 14 | export interface Borders extends Readonly {} 15 | export type IBorders = keyof Borders; 16 | -------------------------------------------------------------------------------- /packages/@blocks-theme/src/themeTokens/fonts.ts: -------------------------------------------------------------------------------- 1 | export const fonts = { 2 | fontSizes: { 3 | xs: 9, 4 | sm: 10, 5 | md: 12, 6 | lg: 14, 7 | xl: 16, 8 | '2xl': 18, 9 | '3xl': 24, 10 | '4xl': 32, 11 | '5xl': 40, 12 | '6xl': 48, 13 | '7xl': 56, 14 | '8xl': 64, 15 | '9xl': 72, 16 | }, 17 | 18 | fontWeights: { 19 | hairline: '100', 20 | thin: '200', 21 | light: '300', 22 | normal: '400', 23 | medium: '500', 24 | semibold: '600', 25 | bold: '700', 26 | extrabold: '800', 27 | black: '900', 28 | }, 29 | } as const; 30 | 31 | export interface Fonts extends Readonly {} 32 | export type IFonts = keyof Fonts; 33 | 34 | export interface FontSizes extends Readonly {} 35 | export type IFontSizes = keyof FontSizes; 36 | 37 | export interface FontWeights extends Readonly {} 38 | export type IFontWeights = keyof FontWeights; 39 | -------------------------------------------------------------------------------- /packages/@blocks-theme/src/themeTokens/index.ts: -------------------------------------------------------------------------------- 1 | export * from './radii'; 2 | export * from './borders'; 3 | export * from './spacings'; 4 | export * from './fonts'; 5 | export * from './utils'; 6 | export * from './sizes'; 7 | -------------------------------------------------------------------------------- /packages/@blocks-theme/src/themeTokens/radii.ts: -------------------------------------------------------------------------------- 1 | export const radii = { 2 | none: 0, 3 | sm: 2, 4 | base: 4, 5 | true: 4, 6 | md: 6, 7 | lg: 8, 8 | xl: 12, 9 | '2xl': 16, 10 | '3xl': 20, 11 | '4xl': 24, 12 | '5xl': 28, 13 | full: 9999, 14 | } as const; 15 | 16 | export interface Radii extends Readonly {} 17 | export type IRadii = keyof Radii; 18 | -------------------------------------------------------------------------------- /packages/@blocks-theme/src/themeTokens/sizes.ts: -------------------------------------------------------------------------------- 1 | export const sizes = { 2 | none: 0, 3 | xxs: 4, 4 | xs: 8, 5 | sm: 12, 6 | md: 16, 7 | lg: 24, 8 | xl: 32, 9 | '2xl': 40, 10 | '3xl': 48, 11 | true: 48, 12 | '4xl': 56, 13 | '5xl': 64, 14 | '6xl': 72, 15 | '7xl': 80, 16 | '8xl': 88, 17 | '9xl': 96, 18 | '10xl': 104, 19 | '11xl': 112, 20 | '12xl': 120, 21 | '13xl': 128, 22 | '14xl': 136, 23 | '15xl': 144, 24 | '16xl': 152, 25 | '17xl': 160, 26 | '18xl': 168, 27 | '19xl': 176, 28 | '20xl': 184, 29 | full: '100%', 30 | } as const; 31 | 32 | export interface Sizes extends Readonly {} 33 | export type ISizes = keyof Sizes; 34 | -------------------------------------------------------------------------------- /packages/@blocks-theme/src/themeTokens/spacings.ts: -------------------------------------------------------------------------------- 1 | export const spacings = { 2 | none: 0, 3 | xxs: 4, 4 | xs: 8, 5 | sm: 12, 6 | md: 16, 7 | lg: 24, 8 | xl: 32, 9 | '2xl': 40, 10 | '3xl': 48, 11 | '4xl': 56, 12 | '5xl': 64, 13 | '6xl': 72, 14 | full: '100%', 15 | baseSpacing: 8, 16 | } as const; 17 | 18 | export interface Spacings extends Readonly {} 19 | export type ISpacings = keyof Spacings; 20 | -------------------------------------------------------------------------------- /packages/@blocks-theme/src/themeTokens/utils.ts: -------------------------------------------------------------------------------- 1 | import { spacing, toPixels } from '@design-blocks/utils'; 2 | 3 | export const utils = { 4 | spacing, 5 | toPixels, 6 | } as const; 7 | 8 | export type UtilsMap = { 9 | [Property in keyof T]: T[Property] extends (value: infer _V) => {} ? T[Property] : never; 10 | }; 11 | 12 | export type IUtils = keyof typeof utils & UtilsMap; 13 | 14 | export interface Utils extends UtilsMap { 15 | [key: string]: (...args: any[]) => any; 16 | spacing: typeof spacing; 17 | toPixels: typeof toPixels; 18 | } 19 | -------------------------------------------------------------------------------- /packages/@blocks-theme/src/theming.tsx: -------------------------------------------------------------------------------- 1 | // Thank you emotion for this code: https://github.com/emotion-js/emotion/blob/main/packages/react/src/theming.js 2 | 3 | // @ts-nocheck 4 | import * as React from 'react'; 5 | 6 | import type { Theme } from '.'; 7 | import { weakMemoize } from './weakMemoize'; 8 | 9 | export const ThemeContext = React.createContext({} as Theme); 10 | export const useTheme = (): Theme => React.useContext(ThemeContext); 11 | 12 | export interface ThemeProviderProps { 13 | theme: Partial | ((outerTheme: Theme) => Theme); 14 | children: React.ReactNode; 15 | } 16 | 17 | export interface ThemeProvider { 18 | (props: ThemeProviderProps): React.ReactElement; 19 | } 20 | 21 | const getTheme = ( 22 | outerTheme: Record, 23 | theme: Record | ((arg0: Record) => Record), 24 | ) => { 25 | if (typeof theme === 'function') { 26 | const mergedTheme = theme(outerTheme); 27 | 28 | if ( 29 | process.env.NODE_ENV !== 'production' && 30 | (mergedTheme == null || typeof mergedTheme !== 'object' || Array.isArray(mergedTheme)) 31 | ) { 32 | throw new Error('[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!'); 33 | } 34 | 35 | return mergedTheme; 36 | } 37 | 38 | if (process.env.NODE_ENV !== 'production' && (theme == null || typeof theme !== 'object' || Array.isArray(theme))) { 39 | throw new Error('[ThemeProvider] Please make your theme prop a plain object'); 40 | } 41 | 42 | return { ...outerTheme, ...theme }; 43 | }; 44 | 45 | const createCacheWithTheme = weakMemoize((outerTheme) => { 46 | return weakMemoize((theme) => { 47 | return getTheme(outerTheme, theme); 48 | }); 49 | }); 50 | 51 | export const ThemeProvider = (props: ThemeProviderProps) => { 52 | let theme = React.useContext(ThemeContext); 53 | 54 | if (props.theme !== theme) { 55 | theme = createCacheWithTheme(theme)(props.theme); 56 | } 57 | 58 | return {props.children}; 59 | }; 60 | -------------------------------------------------------------------------------- /packages/@blocks-theme/src/weakMemoize.ts: -------------------------------------------------------------------------------- 1 | // Thank you emotion for this code: https://github.com/emotion-js/emotion/blob/main/packages/weak-memoize/src/index.js 2 | // @ts-nocheck 3 | export const weakMemoize = function (func: (arg0: Arg) => Return): (arg0: Arg) => Return { 4 | // $FlowFixMe flow doesn't include all non-primitive types as allowed for weakmaps 5 | const cache: WeakMap = new WeakMap(); 6 | return (arg) => { 7 | if (cache.has(arg)) { 8 | return cache.get(arg); 9 | } 10 | 11 | const ret = func(arg); 12 | cache.set(arg, ret); 13 | return ret; 14 | }; 15 | }; 16 | -------------------------------------------------------------------------------- /packages/@blocks-theme/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/base.json", 3 | "compilerOptions": { 4 | "baseUrl": "." 5 | }, 6 | "include": ["./src"], 7 | "exclude": ["node_modules", ".turbo", "**/*.test.tsx", "**/*.test.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /packages/@blocks-theme/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig", 3 | "include": ["src/**/*", "test/**/*"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/@blocks-types/README.md: -------------------------------------------------------------------------------- 1 | # blocks-types 2 | -------------------------------------------------------------------------------- /packages/@blocks-types/biome.json: -------------------------------------------------------------------------------- 1 | ../../biome.json -------------------------------------------------------------------------------- /packages/@blocks-types/src/Utility.ts: -------------------------------------------------------------------------------- 1 | import type { IColorsKeys } from '@design-blocks/theme'; 2 | 3 | type Join = K extends string | number 4 | ? P extends string | number 5 | ? `${K}${'' extends P ? '' : '.'}${P}` 6 | : never 7 | : never; 8 | 9 | export type Leaves = T extends object ? { [K in keyof T]-?: Join> }[keyof T] : ''; 10 | 11 | export type ColorMapProps = { 12 | [Key in IColorsKeys]?: Leaves; 13 | }; 14 | -------------------------------------------------------------------------------- /packages/@blocks-types/src/base.ts: -------------------------------------------------------------------------------- 1 | import type { ISpacings } from '@design-blocks/theme'; 2 | import type { SpacingBaseExcluded, SxStyledFlex, SxStyledText } from './StyleFunction'; 3 | 4 | type GapValues = Exclude; 5 | 6 | export interface FlexGapBlock { 7 | /** 8 | * Defines the space between the immediate children of the `` component. 9 | * 10 | * When `gap` is set, it determines the spacing between each child component inside the ``. 11 | * 12 | * @example 13 | * ```tsx 14 | * 15 | * 16 | * 17 | * 18 | * ``` 19 | * 20 | * @type "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | number | undefined 21 | * @default 0 22 | */ 23 | gap?: GapValues; 24 | /** 25 | * Defines the vertical space between rows for components arranged in a grid or flex layout. 26 | * 27 | * Specifies the size of the gap between the rows. This is useful when you have multiple components 28 | * stacked or aligned in rows, and you want to manage the spacing between these rows. 29 | * 30 | * @example 31 | * ```tsx 32 | * 33 | * 34 | * 35 | * 36 | * ``` 37 | * 38 | * @type GapValues 39 | */ 40 | rowGap?: GapValues; 41 | /** 42 | * Defines the horizontal space between columns for components arranged in a grid or flex layout. 43 | * 44 | * Specifies the size of the gap between the columns. This is useful when you have multiple components 45 | * side by side in columns, and you want to manage the spacing between these columns. 46 | * 47 | * @example 48 | * ```tsx 49 | * 50 | * 51 | * 52 | * 53 | * ``` 54 | * 55 | * @type GapValues 56 | */ 57 | columnGap?: GapValues; 58 | } 59 | 60 | export interface StylesObjectProps extends SxStyledFlex {} 61 | export interface TextStylesObjectProps extends SxStyledText {} 62 | -------------------------------------------------------------------------------- /packages/@blocks-types/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './StyleFunction'; 2 | export * from './Utility'; 3 | export * from './base'; 4 | -------------------------------------------------------------------------------- /packages/@blocks-types/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/base.json", 3 | "compilerOptions": { 4 | "baseUrl": "." 5 | }, 6 | "include": ["./src"], 7 | "exclude": ["node_modules", ".turbo"] 8 | } 9 | -------------------------------------------------------------------------------- /packages/@blocks-types/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig", 3 | "include": ["src/**/*", "test/**/*"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/@blocks-unstyled/README.md: -------------------------------------------------------------------------------- 1 | # Unstyled 2 | 3 | Unstyled components 4 | -------------------------------------------------------------------------------- /packages/@blocks-unstyled/biome.json: -------------------------------------------------------------------------------- 1 | ../../biome.json -------------------------------------------------------------------------------- /packages/@blocks-unstyled/scripts/configPostinstall.js: -------------------------------------------------------------------------------- 1 | const fs = require("fs-extra"); 2 | const path = require("path"); 3 | 4 | const rootDirOutputPath = path.join(__dirname, ".."); 5 | 6 | const sharedPkg = fs.readFileSync("./package.json", "utf-8"); 7 | const sharedPkgFormat = JSON.parse(sharedPkg); 8 | 9 | const currentScripts = sharedPkgFormat.scripts; 10 | sharedPkgFormat.scripts = { 11 | ...currentScripts, 12 | postinstall: "node ./scripts/copyFiles.js", 13 | }; 14 | 15 | fs.writeFileSync( 16 | path.join(rootDirOutputPath, "package.json"), 17 | JSON.stringify(sharedPkgFormat, null, 2) 18 | ); 19 | -------------------------------------------------------------------------------- /packages/@blocks-unstyled/scripts/configPrepublishOnly.js: -------------------------------------------------------------------------------- 1 | const fs = require("fs-extra"); 2 | const path = require("path"); 3 | 4 | const rootDirOutputPath = path.join(__dirname, ".."); 5 | 6 | const sharedPkg = fs.readFileSync("./package.json", "utf-8"); 7 | const sharedPkgFormat = JSON.parse(sharedPkg); 8 | 9 | const currentScripts = sharedPkgFormat.scripts; 10 | sharedPkgFormat.scripts = { 11 | ...currentScripts, 12 | prepublishOnly: "node ./scripts/configPostinstall.js", 13 | }; 14 | 15 | fs.writeFileSync( 16 | path.join(rootDirOutputPath, "package.json"), 17 | JSON.stringify(sharedPkgFormat, null, 2) 18 | ); 19 | -------------------------------------------------------------------------------- /packages/@blocks-unstyled/src/Button/Button.types.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import type { ActivityIndicatorProps, PressableProps, TextProps } from 'react-native'; 4 | 5 | export type ButtonBaseProps = { 6 | children: React.ReactNode; 7 | }; 8 | 9 | export interface ButtonProps extends PressableProps { 10 | disabled?: boolean | undefined; 11 | loading?: boolean | undefined; 12 | hideLabelOnLoading?: null | boolean | undefined; 13 | accessible?: boolean; 14 | accessibilityLanguage?: PressableProps['accessibilityLanguage']; 15 | } 16 | 17 | export type ButtonContextProps = Pick< 18 | ButtonProps, 19 | 'nativeID' | 'testID' | 'accessible' | 'disabled' | 'loading' | 'hideLabelOnLoading' | 'accessibilityLanguage' 20 | >; 21 | 22 | export interface ButtonLabelProps extends TextProps {} 23 | 24 | export interface ButtonLoadingProps extends ActivityIndicatorProps {} 25 | -------------------------------------------------------------------------------- /packages/@blocks-unstyled/src/Button/ButtonContext.tsx: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react'; 2 | 3 | import type { ButtonContextProps } from './Button.types'; 4 | 5 | export const ButtonContext = createContext({}); 6 | 7 | ButtonContext.displayName = 'Block.ButtonContext'; 8 | -------------------------------------------------------------------------------- /packages/@blocks-unstyled/src/Button/ButtonLabel.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Platform, StyleSheet, Text } from 'react-native'; 3 | 4 | import { ButtonContext } from './ButtonContext'; 5 | 6 | import type { ButtonLabelProps } from './Button.types'; 7 | 8 | export function ButtonLabel({ nativeID: nativeIDProp, testID: testIDProp, style, ...others }: ButtonLabelProps) { 9 | const { nativeID, testID, hideLabelOnLoading, loading, disabled, accessibilityLanguage } = 10 | React.useContext(ButtonContext); 11 | 12 | const finalNativeID = nativeIDProp || (nativeID ? `${nativeID}Indicator` : undefined); 13 | const finalTestID = testIDProp || (testID ? `${testID}Indicator` : undefined); 14 | 15 | if (loading && hideLabelOnLoading) { 16 | return null; 17 | } 18 | 19 | return ( 20 | 28 | ); 29 | } 30 | 31 | const FONT_SIZE = 16; 32 | const styles = StyleSheet.create({ 33 | root: { 34 | fontSize: FONT_SIZE, 35 | textAlign: 'center', 36 | ...Platform.select({ 37 | android: { 38 | fontFamily: 'sans-serif-medium', 39 | }, 40 | }), 41 | }, 42 | }); 43 | 44 | ButtonLabel.displayName = 'Block.ButtonLabel'; 45 | -------------------------------------------------------------------------------- /packages/@blocks-unstyled/src/Button/ButtonLoading.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ActivityIndicator, StyleSheet } from 'react-native'; 3 | 4 | import { ButtonContext } from './ButtonContext'; 5 | 6 | import type { ButtonLoadingProps } from './Button.types'; 7 | 8 | export function ButtonLoading({ nativeID: nativeIDProp, testID: testIDProp, style, ...others }: ButtonLoadingProps) { 9 | const { nativeID, testID, loading } = React.useContext(ButtonContext); 10 | 11 | const finalNativeID = nativeIDProp || (nativeID ? `${nativeID}Indicator` : undefined); 12 | const finalTestID = testIDProp || (testID ? `${testID}Indicator` : undefined); 13 | 14 | if (loading) { 15 | return ( 16 | 22 | ); 23 | } 24 | 25 | return null; 26 | } 27 | 28 | const styles = StyleSheet.create({ 29 | root: {}, 30 | }); 31 | 32 | ButtonLoading.displayName = 'Block.ButtonLoading'; 33 | -------------------------------------------------------------------------------- /packages/@blocks-unstyled/src/Button/ButtonRoot.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Pressable, StyleSheet } from 'react-native'; 3 | 4 | import { ButtonContext } from './ButtonContext'; 5 | 6 | import type { ButtonProps } from './Button.types'; 7 | 8 | export function ButtonRoot({ 9 | style, 10 | loading, 11 | disabled, 12 | hideLabelOnLoading, 13 | accessible = true, 14 | accessibilityRole = 'button', 15 | accessibilityLanguage, 16 | testID, 17 | nativeID, 18 | ...others 19 | }: ButtonProps) { 20 | const accessibilityState = React.useMemo( 21 | () => ({ 22 | disabled, 23 | busy: loading, 24 | }), 25 | [disabled, loading], 26 | ); 27 | 28 | return ( 29 | 32 | 44 | 45 | ); 46 | } 47 | 48 | const styles = StyleSheet.create({ 49 | root: { 50 | flexDirection: 'row', 51 | justifyContent: 'center', 52 | alignItems: 'center', 53 | }, 54 | }); 55 | 56 | ButtonRoot.displayName = 'Block.Button'; 57 | -------------------------------------------------------------------------------- /packages/@blocks-unstyled/src/Button/index.tsx: -------------------------------------------------------------------------------- 1 | import { ButtonLabel } from './ButtonLabel'; 2 | import { ButtonLoading } from './ButtonLoading'; 3 | import { ButtonRoot } from './ButtonRoot'; 4 | 5 | export * from './Button.types'; 6 | 7 | const Root = ButtonRoot; 8 | const Label = ButtonLabel; 9 | const Loading = ButtonLoading; 10 | 11 | export { Root, Label, Loading }; 12 | -------------------------------------------------------------------------------- /packages/@blocks-unstyled/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Button'; 2 | -------------------------------------------------------------------------------- /packages/@blocks-unstyled/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/base.json", 3 | "compilerOptions": { 4 | "baseUrl": "." 5 | }, 6 | "include": ["./src"], 7 | "exclude": ["node_modules", ".turbo", "**/*.test.tsx"] 8 | } 9 | -------------------------------------------------------------------------------- /packages/@blocks-unstyled/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig", 3 | "include": ["src/**/*", "test/**/*"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/@blocks-utils/README.md: -------------------------------------------------------------------------------- 1 | # design-blocks/ 2 | -------------------------------------------------------------------------------- /packages/@blocks-utils/biome.json: -------------------------------------------------------------------------------- 1 | ../../biome.json -------------------------------------------------------------------------------- /packages/@blocks-utils/scripts/configPostinstall.js: -------------------------------------------------------------------------------- 1 | const fs = require("fs-extra"); 2 | const path = require("path"); 3 | 4 | const rootDirOutputPath = path.join(__dirname, ".."); 5 | 6 | const sharedPkg = fs.readFileSync("./package.json", "utf-8"); 7 | const sharedPkgFormat = JSON.parse(sharedPkg); 8 | 9 | const currentScripts = sharedPkgFormat.scripts; 10 | sharedPkgFormat.scripts = { 11 | ...currentScripts, 12 | postinstall: "node ./scripts/copyFiles.js", 13 | }; 14 | 15 | fs.writeFileSync( 16 | path.join(rootDirOutputPath, "package.json"), 17 | JSON.stringify(sharedPkgFormat, null, 2) 18 | ); 19 | -------------------------------------------------------------------------------- /packages/@blocks-utils/src/camelCase.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * function to convert string to camelCase 3 | * 4 | * @param input 5 | * @returns 6 | */ 7 | export function camelCase(input: string): string { 8 | const result = input?.replace(/[_-\s]([a-z])/g, (_match, char) => char?.toUpperCase()); 9 | return result.charAt(0).toLowerCase() + result.slice(1); 10 | } 11 | 12 | export default camelCase; 13 | -------------------------------------------------------------------------------- /packages/@blocks-utils/src/compact.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Removes all falsy values from an array of strings. 3 | * 4 | * This function takes an array of strings and filters out any falsy values 5 | * such as `""`, `null`, `undefined`, `0`, `NaN`, and `false`. 6 | * 7 | * @param {string[]} value - The array of strings to be compacted. 8 | * 9 | * @returns {string[]} A new array of strings without any falsy values. 10 | * 11 | * @example 12 | * 13 | * const array = ["Hello", "", "World", null, "!", undefined]; 14 | * const compactedArray = compact(array); 15 | * console.log(compactedArray); // Outputs: ["Hello", "World", "!"] 16 | */ 17 | export function compact(value: string[]) { 18 | return value?.filter(Boolean); 19 | } 20 | 21 | export default compact; 22 | -------------------------------------------------------------------------------- /packages/@blocks-utils/src/deepmerge.ts: -------------------------------------------------------------------------------- 1 | import { isObject } from './isObject'; 2 | 3 | /** 4 | * Deeply merges two objects, overriding and combining their properties. 5 | * 6 | * This function takes a target object and a source object, and merges 7 | * them together. If both the target and source contain properties that 8 | * are objects, those properties are recursively merged together. 9 | * 10 | * This function does not modify the original objects but rather returns 11 | * a new object that represents the merged result. 12 | * 13 | * Note: Arrays and non-object values in the source object will overwrite 14 | * matching values in the target object. 15 | * 16 | * @param {T} target - The target object that will be merged with the source. 17 | * @param {Partial} source - The source object whose properties will override or combine with those of the target. 18 | * 19 | * @returns {T} A new object that results from deeply merging the target with the source. 20 | * 21 | * @example 22 | * 23 | * const obj1 = { 24 | * a: 1, 25 | * b: { x: 1, y: 2 } 26 | * }; 27 | * 28 | * const obj2 = { 29 | * a: 2, 30 | * b: { x: 3, z: 4 }, 31 | * c: 5 32 | * }; 33 | * 34 | * const mergedObj = deepMerge(obj1, obj2); 35 | * console.log(mergedObj); // Outputs: { a: 2, b: { x: 3, y: 2, z: 4 }, c: 5 } 36 | */ 37 | export function deepMerge, S extends Partial>>( 38 | target: T, 39 | source: S, 40 | ): T & S { 41 | const output: Record = { ...target }; 42 | 43 | if (isObject(target) && isObject(source)) { 44 | for (const key in source) { 45 | if (Object.prototype.hasOwnProperty.call(source, key)) { 46 | const sourceValue = source[key]; 47 | const targetValue = target[key]; 48 | 49 | if (isObject(sourceValue) && isObject(targetValue)) { 50 | output[key] = deepMerge(targetValue, sourceValue); 51 | } else { 52 | output[key] = sourceValue; 53 | } 54 | } 55 | } 56 | } 57 | 58 | return output as T & S; 59 | } 60 | 61 | export default deepMerge; 62 | -------------------------------------------------------------------------------- /packages/@blocks-utils/src/get.ts: -------------------------------------------------------------------------------- 1 | import { compact } from './compact'; 2 | import { isNullOrUndefined } from './isNullOrUndefined'; 3 | import { isUndefined } from './isUndefined'; 4 | 5 | /** 6 | * function to get value from object 7 | * 8 | * @param obj 9 | * @param path 10 | * @param defaultValue 11 | * @returns 12 | */ 13 | // biome-ignore lint/style/useDefaultParameterLast: 14 | export function get(obj: any = {}, path: any, defaultValue?: any) { 15 | if (obj == null) { 16 | return defaultValue; 17 | } 18 | 19 | const resultFinal = compact(path?.split(/[,[\].]+?/))?.reduce( 20 | (result, key) => (isNullOrUndefined(result) ? result : result[key]), 21 | obj, 22 | ); 23 | 24 | return isUndefined(resultFinal) || resultFinal === obj 25 | ? isUndefined(obj[path]) 26 | ? defaultValue 27 | : obj[path] 28 | : resultFinal; 29 | } 30 | 31 | export default get; 32 | -------------------------------------------------------------------------------- /packages/@blocks-utils/src/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * export all utils 3 | */ 4 | export * from './get'; 5 | export * from './isDev'; 6 | export * from './spacing'; 7 | export * from './compact'; 8 | export * from './isString'; 9 | export * from './isNumber'; 10 | export * from './isObject'; 11 | export * from './toPixels'; 12 | export * from './deepmerge'; 13 | export * from './camelCase'; 14 | export * from './isUndefined'; 15 | export * from './removeEmptyObjects'; 16 | export * from './isNullOrUndefined'; 17 | -------------------------------------------------------------------------------- /packages/@blocks-utils/src/isDev.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A boolean constant indicating whether the current environment is a development environment. 3 | * 4 | * This constant is `true` if the `NODE_ENV` environment variable is not set to 'production', 5 | * and `false` otherwise. It can be used throughout the application to conditionally 6 | * execute or exclude code that should only run in development environments. 7 | * 8 | * For example, it's common to use `__DEV__` to include logging, debugging, or 9 | * other development-only features. 10 | * 11 | * @example 12 | * 13 | * if (__DEV__) { 14 | * console.log("This log only appears in development environments."); 15 | * } 16 | * 17 | */ 18 | export const __DEV__ = process.env.NODE_ENV !== 'production'; 19 | 20 | export default __DEV__; 21 | -------------------------------------------------------------------------------- /packages/@blocks-utils/src/isNullOrUndefined.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Determines whether a value is null or undefined. 3 | * 4 | * This function checks if the provided value is either `null` or `undefined` and 5 | * returns `true` if either condition is met, and `false` otherwise. 6 | * 7 | * @param {any} value - The value to check. 8 | * 9 | * @returns {boolean} Returns `true` if the value is either null or undefined, `false` otherwise. 10 | * 11 | * @example 12 | * 13 | * isNullOrUndefined(null); // true 14 | * isNullOrUndefined(undefined); // true 15 | * isNullOrUndefined(''); // false 16 | */ 17 | export function isNullOrUndefined(value: any) { 18 | return value == null; 19 | } 20 | 21 | export default isNullOrUndefined; 22 | -------------------------------------------------------------------------------- /packages/@blocks-utils/src/isNumber.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Determines whether a value is of type number. 3 | * 4 | * @param {any} value - The value to check. 5 | * 6 | * @returns {boolean} Returns `true` if the value is a number, `false` otherwise. 7 | * 8 | * @example 9 | * 10 | * isNumber(123); // true 11 | * isNumber('123'); // false 12 | */ 13 | export function isNumber(value: any) { 14 | return typeof value === 'number'; 15 | } 16 | 17 | export default isNumber; 18 | -------------------------------------------------------------------------------- /packages/@blocks-utils/src/isObject.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Determines whether a value is a non-array object. 3 | * 4 | * This function checks if the provided value is an object and not an array. 5 | * 6 | * @param {unknown} item - The value to check. 7 | * 8 | * @returns {boolean} Returns `true` if the value is an object (and not an array), `false` otherwise. 9 | * 10 | * @example 11 | * 12 | * isObject({ a: 1 }); // true 13 | * isObject([1, 2]); // false 14 | * isObject('text'); // false 15 | */ 16 | export function isObject(item: unknown): item is Record { 17 | return item !== null && typeof item === 'object' && !Array.isArray(item); 18 | } 19 | 20 | export default isObject; 21 | -------------------------------------------------------------------------------- /packages/@blocks-utils/src/isString.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Determines whether a value is of type string. 3 | * 4 | * @param {any} value - The value to check. 5 | * 6 | * @returns {boolean} Returns `true` if the value is a string, `false` otherwise. 7 | * 8 | * @example 9 | * 10 | * isString('text'); // true 11 | * isString(123); // false 12 | */ 13 | export function isString(value: any) { 14 | return typeof value === 'string'; 15 | } 16 | 17 | export default isString; 18 | -------------------------------------------------------------------------------- /packages/@blocks-utils/src/isUndefined.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Determines whether a value is undefined. 3 | * 4 | * This function checks if the provided value is `undefined` and 5 | * returns `true` if it is, and `false` otherwise. 6 | * 7 | * @param {any} val - The value to check. 8 | * 9 | * @returns {boolean} Returns `true` if the value is undefined, `false` otherwise. 10 | * 11 | * @example 12 | * 13 | * isUndefined(undefined); // true 14 | * isUndefined(null); // false 15 | * isUndefined('text'); // false 16 | */ 17 | export function isUndefined(val: any) { 18 | return val === undefined; 19 | } 20 | 21 | export default isUndefined; 22 | -------------------------------------------------------------------------------- /packages/@blocks-utils/src/removeEmptyObjects.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Removes empty objects from an array of objects. 3 | * 4 | * This function takes an array of objects and filters out any objects 5 | * that are empty (i.e., have no own properties). 6 | * 7 | * @param {Object[]} stylesList - The array of objects to filter. 8 | * 9 | * @returns {Object[]} A new array with empty objects removed. 10 | * 11 | * @example 12 | * 13 | * const array = [{ a: 1 }, {}, { b: 2 }, {}]; 14 | * const filteredArray = removeEmptyObjects(array); 15 | * console.log(filteredArray); // [{ a: 1 }, { b: 2 }] 16 | */ 17 | export const removeEmptyObjects = (stylesList: { [key: string]: any }[]) => { 18 | return stylesList.filter((element) => { 19 | if (Object.keys(element).length !== 0) { 20 | return true; 21 | } 22 | 23 | return false; 24 | }); 25 | }; 26 | 27 | export default removeEmptyObjects; 28 | -------------------------------------------------------------------------------- /packages/@blocks-utils/src/spacing.ts: -------------------------------------------------------------------------------- 1 | import R from 'ramda'; 2 | 3 | /** 4 | * Multiplies a value by a base spacing value. 5 | * 6 | * This function multiplies the provided value by a base spacing value, 7 | * which defaults to 8 if not provided. The multiplication is done using 8 | * the Ramda library. 9 | * 10 | * @param {number} val - The value to be multiplied. 11 | * @param {number} [baseSpacing=8] - The base spacing value. Default is 8. 12 | * 13 | * @returns {number} The result of the multiplication. 14 | * 15 | * @example 16 | * 17 | * spacing(2); // 16 18 | * spacing(3, 10); // 30 19 | */ 20 | export function spacing(val: number, baseSpacing = 8): number { 21 | const value = R.multiply(val, baseSpacing); 22 | return value; 23 | } 24 | 25 | export default spacing; 26 | -------------------------------------------------------------------------------- /packages/@blocks-utils/src/tests/camelCase.test.ts: -------------------------------------------------------------------------------- 1 | import { camelCase } from '..'; 2 | 3 | describe('camelCase', () => { 4 | it('should convert a given string to camelCase format', () => { 5 | expect(camelCase('hello_world')).toBe('helloWorld'); 6 | expect(camelCase('hello world')).toBe('helloWorld'); 7 | }); 8 | 9 | it('should handle empty strings correctly', () => { 10 | expect(camelCase('')).toBe(''); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /packages/@blocks-utils/src/tests/compact.test.ts: -------------------------------------------------------------------------------- 1 | import { compact } from '..'; 2 | 3 | describe('compact', () => { 4 | it('should remove all falsy values from an array of strings', () => { 5 | expect(compact(['Hello', '', 'World', '!'])).toEqual(['Hello', 'World', '!']); 6 | }); 7 | 8 | it('should return an empty array if all values are falsy', () => { 9 | expect(compact([''])).toEqual([]); 10 | }); 11 | 12 | it('should return the same array if there are no falsy values', () => { 13 | expect(compact(['Hello', 'World', '!'])).toEqual(['Hello', 'World', '!']); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /packages/@blocks-utils/src/tests/get.test.ts: -------------------------------------------------------------------------------- 1 | import { get } from '..'; 2 | 3 | describe('get', () => { 4 | const obj = { 5 | a: { 6 | b: { 7 | c: 100, 8 | d: null, 9 | }, 10 | }, 11 | 'x.y': { z: 200 }, 12 | }; 13 | 14 | it('should return the value at a given path', () => { 15 | expect(get(obj, 'a.b.c')).toBe(100); 16 | }); 17 | 18 | it('should handle array-like paths', () => { 19 | expect(get(obj, 'a.b[1].c')).toBe(undefined); 20 | }); 21 | 22 | it('should return defaultValue if the path does not exist', () => { 23 | expect(get(obj, 'a.b.e', 'default')).toBe('default'); 24 | }); 25 | 26 | it('should handle complex paths', () => { 27 | expect(get(obj, 'x.y.z')).toBe(undefined); 28 | }); 29 | 30 | it('should return undefined for invalid paths', () => { 31 | expect(get(obj, undefined)).toBe(undefined); 32 | }); 33 | 34 | it('should handle null or undefined object', () => { 35 | expect(get(null, 'a')).toBe(undefined); 36 | expect(get(undefined, 'a')).toBe(undefined); 37 | }); 38 | 39 | it('should return the direct property value if path is a direct key of object', () => { 40 | const obj = { 41 | directKey: 'directValue', 42 | a: { b: { c: 100 } }, 43 | }; 44 | 45 | expect(get(obj, 'directKey')).toBe('directValue'); 46 | }); 47 | 48 | it('should return the direct property value if resultFinal is undefined or equal to obj', () => { 49 | const obj = { 50 | a: undefined, 51 | b: 'directValue', 52 | }; 53 | 54 | expect(get(obj, 'a')).toBe(undefined); 55 | expect(get(obj, 'b')).toBe('directValue'); 56 | }); 57 | 58 | it('should return the direct property value if path is a direct key of object', () => { 59 | const obj = { 60 | directKey: 'directValue', 61 | a: { b: { c: 100 } }, 62 | '': 'emptyStringKey', 63 | }; 64 | 65 | expect(get(obj, 'directKey')).toBe('directValue'); 66 | expect(get(obj, '')).toBe('emptyStringKey'); 67 | }); 68 | }); 69 | -------------------------------------------------------------------------------- /packages/@blocks-utils/src/tests/isDev.test.ts: -------------------------------------------------------------------------------- 1 | import { __DEV__ } from '..'; 2 | 3 | describe('__DEV__', () => { 4 | it('should be true in development environment', () => { 5 | expect(__DEV__).toBe(true); 6 | }); 7 | }); 8 | -------------------------------------------------------------------------------- /packages/@blocks-utils/src/tests/isNullOrUndefined.test.ts: -------------------------------------------------------------------------------- 1 | import { isNullOrUndefined } from '..'; 2 | 3 | describe('isNullOrUndefined', () => { 4 | it('should return true for null', () => { 5 | expect(isNullOrUndefined(null)).toBe(true); 6 | }); 7 | 8 | it('should return true for undefined', () => { 9 | expect(isNullOrUndefined(undefined)).toBe(true); 10 | }); 11 | 12 | it('should return false for other values', () => { 13 | expect(isNullOrUndefined(0)).toBe(false); 14 | expect(isNullOrUndefined('')).toBe(false); 15 | expect(isNullOrUndefined(false)).toBe(false); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /packages/@blocks-utils/src/tests/isNumber.test.ts: -------------------------------------------------------------------------------- 1 | import { isNumber } from '..'; 2 | 3 | describe('isNumber', () => { 4 | it('should return true for numbers', () => { 5 | expect(isNumber(5)).toBe(true); 6 | expect(isNumber(0)).toBe(true); 7 | expect(isNumber(-10)).toBe(true); 8 | }); 9 | 10 | it('should return false for non-numbers', () => { 11 | expect(isNumber('5')).toBe(false); 12 | expect(isNumber(undefined)).toBe(false); 13 | expect(isNumber(null)).toBe(false); 14 | expect(isNumber({})).toBe(false); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /packages/@blocks-utils/src/tests/isObject.test.ts: -------------------------------------------------------------------------------- 1 | import { isObject } from '..'; 2 | 3 | describe('isObject', () => { 4 | it('should return true for objects', () => { 5 | expect(isObject({})).toBe(true); 6 | expect(isObject({ key: 'value' })).toBe(true); 7 | }); 8 | 9 | it('should return false for non-objects', () => { 10 | expect(isObject([])).toBe(false); 11 | expect(isObject(5)).toBe(false); 12 | expect(isObject('string')).toBe(false); 13 | expect(isObject(null)).toBe(false); 14 | expect(isObject(undefined)).toBe(false); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /packages/@blocks-utils/src/tests/isString.test.ts: -------------------------------------------------------------------------------- 1 | import { isString } from '..'; 2 | 3 | describe('isString', () => { 4 | it('should return true for strings', () => { 5 | expect(isString('hello')).toBe(true); 6 | expect(isString('')).toBe(true); 7 | }); 8 | 9 | it('should return false for non-strings', () => { 10 | expect(isString(123)).toBe(false); 11 | expect(isString(null)).toBe(false); 12 | expect(isString(undefined)).toBe(false); 13 | expect(isString({})).toBe(false); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /packages/@blocks-utils/src/tests/isUndefined.test.ts: -------------------------------------------------------------------------------- 1 | import { isUndefined } from '..'; 2 | 3 | describe('isUndefined', () => { 4 | it('should return true for undefined', () => { 5 | expect(isUndefined(undefined)).toBe(true); 6 | }); 7 | 8 | it('should return false for defined values', () => { 9 | expect(isUndefined(null)).toBe(false); 10 | expect(isUndefined(0)).toBe(false); 11 | expect(isUndefined('')).toBe(false); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /packages/@blocks-utils/src/tests/removeEmptyObjects.test.ts: -------------------------------------------------------------------------------- 1 | import { removeEmptyObjects } from '..'; 2 | 3 | describe('removeEmptyObjects', () => { 4 | it('should remove empty objects from array', () => { 5 | const stylesList = [{}, { color: 'red' }, {}, { size: 10 }]; 6 | expect(removeEmptyObjects(stylesList)).toEqual([{ color: 'red' }, { size: 10 }]); 7 | }); 8 | 9 | it('should return an empty array if all objects are empty', () => { 10 | expect(removeEmptyObjects([{}, {}])).toEqual([]); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /packages/@blocks-utils/src/tests/spacing.test.ts: -------------------------------------------------------------------------------- 1 | import { spacing } from '..'; 2 | 3 | describe('spacing', () => { 4 | it('should calculate spacing based on the given value and base spacing', () => { 5 | expect(spacing(2)).toBe(16); 6 | expect(spacing(3, 10)).toBe(30); 7 | }); 8 | 9 | it('should use default baseSpacing of 8 when not provided', () => { 10 | expect(spacing(2)).toBe(16); // 2 * 8 = 16 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /packages/@blocks-utils/src/tests/toPixels.test.ts: -------------------------------------------------------------------------------- 1 | import { toPixels } from '..'; 2 | 3 | describe('toPixels', () => { 4 | it('should convert a number to a pixel string', () => { 5 | expect(toPixels(5)).toBe('5px'); 6 | expect(toPixels(100)).toBe('100px'); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/@blocks-utils/src/toPixels.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Generates a string with the number and the px unit 3 | * 4 | * @param {value} number 5 | * 6 | * @returns {string} 7 | * 8 | * @example 9 | * numberToPixels(10) // '10px' 10 | * numberToPixels(10.5) // '10.5px' 11 | * 12 | */ 13 | export function toPixels(value: number): string { 14 | return `${value}px`; 15 | } 16 | 17 | export default toPixels; 18 | -------------------------------------------------------------------------------- /packages/@blocks-utils/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/base.json", 3 | "compilerOptions": { 4 | "baseUrl": ".", 5 | "outDir": "./dist" 6 | }, 7 | "include": ["./src"], 8 | "exclude": ["node_modules", ".turbo", "**/*.test.tsx", "**/*.test.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/@blocks-utils/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig", 3 | "include": ["src/**/*", "test/**/*"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/block/README.md: -------------------------------------------------------------------------------- 1 | # blocks-core 2 | -------------------------------------------------------------------------------- /packages/block/biome.json: -------------------------------------------------------------------------------- 1 | ../../biome.json -------------------------------------------------------------------------------- /packages/block/src/block.ts: -------------------------------------------------------------------------------- 1 | import * as reactNative from 'react-native'; 2 | 3 | import { createBlock } from './createBlock'; 4 | import { createCss } from './css'; 5 | 6 | /** 7 | * a function that returns a styled component which render styles in React Native 8 | */ 9 | export const block = createBlock(reactNative.StyleSheet); 10 | export const css = createCss(reactNative.StyleSheet); 11 | 12 | const components = [ 13 | 'ActivityIndicator', 14 | 'Button', 15 | 'DatePickerIOS', 16 | 'DrawerLayoutAndroid', 17 | 'FlatList', 18 | 'Image', 19 | 'ImageBackground', 20 | 'KeyboardAvoidingView', 21 | 'ListView', 22 | 'Modal', 23 | 'NavigatorIOS', 24 | 'Picker', 25 | 'PickerIOS', 26 | 'Pressable', 27 | 'ProgressBarAndroid', 28 | 'ProgressViewIOS', 29 | 'RecyclerViewBackedScrollView', 30 | 'RefreshControl', 31 | 'SafeAreaView', 32 | 'ScrollView', 33 | 'SectionList', 34 | 'SegmentedControlIOS', 35 | 'Slider', 36 | 'SnapshotViewIOS', 37 | 'StatusBar', 38 | 'SwipeableListView', 39 | 'Switch', 40 | 'SwitchIOS', 41 | 'TabBarIOS', 42 | 'Text', 43 | 'TextInput', 44 | 'ToolbarAndroid', 45 | 'TouchableHighlight', 46 | 'TouchableNativeFeedback', 47 | 'TouchableOpacity', 48 | 'TouchableWithoutFeedback', 49 | 'View', 50 | 'ViewPagerAndroid', 51 | ]; 52 | 53 | export default components.reduce( 54 | (acc, comp) => 55 | Object.defineProperty(acc, comp, { 56 | enumerable: true, 57 | configurable: false, 58 | get() { 59 | return block(reactNative[comp as keyof typeof reactNative] as React.ElementType); 60 | }, 61 | }), 62 | block, 63 | ); 64 | -------------------------------------------------------------------------------- /packages/block/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './block'; 2 | export { default } from './block'; 3 | -------------------------------------------------------------------------------- /packages/block/src/tests/utils.test.ts: -------------------------------------------------------------------------------- 1 | import { interleave } from '../utils'; 2 | 3 | describe('interleave', () => { 4 | it('should interleave strings and values correctly', () => { 5 | const result = interleave(['Hello, ', '!']); 6 | expect(result).toEqual(['H', '!', 'e']); 7 | }); 8 | 9 | it('should handle multiple values', () => { 10 | const result = interleave(['Hello, ', ' and ', '!']); 11 | expect(result).toEqual(['H', ' and ', 'e', '!', 'l']); 12 | }); 13 | 14 | it('should handle no values', () => { 15 | const result = interleave(['Hello, world!']); 16 | expect(result).toEqual(['H']); 17 | }); 18 | 19 | it('should handle more strings than values', () => { 20 | const result = interleave(['Hello, ', ' and ', '']); 21 | expect(result).toEqual(['H', ' and ', 'e', '', 'l']); 22 | }); 23 | 24 | it('should handle more values than strings', () => { 25 | const result = interleave(['Hello, ']); 26 | expect(result).toEqual(['H']); 27 | }); 28 | 29 | it('should handle undefined string values in the array', () => { 30 | const result = interleave(['', undefined, '']); 31 | expect(result).toEqual([undefined, undefined, '']); 32 | }); 33 | }); 34 | -------------------------------------------------------------------------------- /packages/block/src/utils.ts: -------------------------------------------------------------------------------- 1 | export function interleave(vals: Array) { 2 | const strings = vals[0]; 3 | const finalArray = [strings[0]]; 4 | 5 | for (let i = 1, len = vals.length; i < len; i++) { 6 | finalArray.push(vals[i]); 7 | 8 | if (strings[i] !== undefined) { 9 | finalArray.push(strings[i]); 10 | } 11 | } 12 | 13 | return finalArray; 14 | } 15 | -------------------------------------------------------------------------------- /packages/block/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/base.json", 3 | "compilerOptions": { 4 | "noImplicitReturns": false, 5 | "baseUrl": ".", 6 | "outDir": "dist" 7 | }, 8 | "include": ["./src"], 9 | "exclude": ["node_modules", ".turbo", "**/*.test.tsx", "**/*.test.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /packages/block/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig", 3 | "compilerOptions": { 4 | "noImplicitReturns": false 5 | }, 6 | "include": ["src/**/*", "test/**/*"] 7 | } 8 | -------------------------------------------------------------------------------- /packages/native/README.md: -------------------------------------------------------------------------------- 1 | # react-native 2 | -------------------------------------------------------------------------------- /packages/native/biome.json: -------------------------------------------------------------------------------- 1 | ../../biome.json -------------------------------------------------------------------------------- /packages/native/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from '@design-blocks/system'; 2 | export * from '@design-blocks/theme'; 3 | export * from '@design-blocks/types'; 4 | export * from '@design-blocks/utils'; 5 | -------------------------------------------------------------------------------- /packages/native/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/base.json", 3 | "compilerOptions": { 4 | "baseUrl": "." 5 | }, 6 | "include": ["./src"], 7 | "exclude": ["node_modules", ".turbo"] 8 | } 9 | -------------------------------------------------------------------------------- /packages/native/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig", 3 | "include": ["src/**/*", "test/**/*"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/tsconfig/base.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "http://json.schemastore.org/tsconfig", 3 | "compilerOptions": { 4 | "allowUnreachableCode": false, 5 | "allowUnusedLabels": false, 6 | "esModuleInterop": true, 7 | "verbatimModuleSyntax": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noUncheckedIndexedAccess": true, 10 | "jsx": "react", 11 | "lib": ["esnext"], 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "noFallthroughCasesInSwitch": true, 15 | "noImplicitReturns": true, 16 | "noImplicitUseStrict": false, 17 | "noStrictGenericChecks": false, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "resolveJsonModule": true, 21 | "skipLibCheck": true, 22 | "strict": true, 23 | "target": "esnext" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/tsconfig/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tsconfig", 3 | "version": "1.0.0-beta.21", 4 | "private": true 5 | } 6 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - 'examples/**' 3 | - 'packages/**' 4 | -------------------------------------------------------------------------------- /scripts/configPostinstall.js: -------------------------------------------------------------------------------- 1 | const fs = require("fs-extra"); 2 | const path = require("path"); 3 | 4 | const rootDirOutputPath = path.join(__dirname, ".."); 5 | 6 | const sharedPkg = fs.readFileSync("./package.json", "utf-8"); 7 | const sharedPkgFormat = JSON.parse(sharedPkg); 8 | 9 | const currentScripts = sharedPkgFormat.scripts; 10 | sharedPkgFormat.scripts = { 11 | ...currentScripts, 12 | postinstall: "node ./scripts/copyFiles.js", 13 | }; 14 | 15 | fs.writeFileSync( 16 | path.join(rootDirOutputPath, "package.json"), 17 | JSON.stringify(sharedPkgFormat, null, 2) 18 | ); 19 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/base.json", 3 | "compilerOptions": { 4 | "baseUrl": ".", 5 | "paths": { 6 | "@design-blocks/unstyled": ["./packages/@blocks-unstyled/src"], 7 | "@design-blocks/unstyled/*": ["./packages/@blocks-unstyled/src/*"], 8 | "@design-blocks/primitives": ["./packages/@blocks-primitives/src"], 9 | "@design-blocks/primitives/*": ["./packages/@blocks-primitives/src/*"], 10 | "@design-blocks/styles": ["./packages/@blocks-styles/src"], 11 | "@design-blocks/styles/*": ["./packages/@blocks-styles/src/*"], 12 | "@design-blocks/system": ["./packages/@blocks-system/src"], 13 | "@design-blocks/system/*": ["./packages/@blocks-system/src/*"], 14 | "@design-blocks-colors": ["./packages/@blocks-colors/src"], 15 | "@design-blocks-colors/*": ["./packages/@blocks-colors/src/*"], 16 | "@design-blocks/theme": ["./packages/@blocks-theme/src"], 17 | "@design-blocks/theme/*": ["./packages/@blocks-theme/src/*"], 18 | "@design-blocks/types": ["./packages/@blocks-types/src"], 19 | "@design-blocks/types/*": ["./packages/@blocks-types/src/*"], 20 | "@design-blocks/utils": ["./packages/@blocks-utils/src"], 21 | "@design-blocks/utils/*": ["./packages/@blocks-utils/src/*"] 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /turbo.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://turborepo.org/schema.json", 3 | "pipeline": { 4 | "build": { 5 | "dependsOn": ["^build"], 6 | "inputs": ["tsconfig.json", "package.json", "src/**"], 7 | "outputs": ["dist/**"] 8 | }, 9 | "lint": { 10 | "outputs": [], 11 | "inputs": ["**/*.{js,ts,tsx}"] 12 | }, 13 | "lint:fix": { 14 | "outputs": [], 15 | "inputs": ["**/*.{js,ts,tsx}"] 16 | }, 17 | "bundlesize": { 18 | "dependsOn": ["^build", "lint"], 19 | "inputs": ["dist/**"] 20 | }, 21 | "clean": { 22 | "cache": false 23 | } 24 | } 25 | } 26 | --------------------------------------------------------------------------------