├── .npmrc ├── README.md ├── packages ├── frosted-ui │ ├── .browserslistrc │ ├── changelog.md │ ├── src │ │ ├── components │ │ │ ├── em │ │ │ │ ├── index.ts │ │ │ │ ├── em.tsx │ │ │ │ └── em.css │ │ │ ├── quote │ │ │ │ ├── index.ts │ │ │ │ ├── quote.tsx │ │ │ │ └── quote.css │ │ │ ├── shine │ │ │ │ ├── index.ts │ │ │ │ └── shine.css │ │ │ ├── slot │ │ │ │ ├── index.ts │ │ │ │ └── slot.tsx │ │ │ ├── portal │ │ │ │ ├── index.ts │ │ │ │ └── portal.tsx │ │ │ ├── strong │ │ │ │ ├── index.ts │ │ │ │ ├── strong.css │ │ │ │ └── strong.tsx │ │ │ ├── calendar │ │ │ │ └── index.ts │ │ │ ├── sheet │ │ │ │ └── index.ts │ │ │ ├── aspect-ratio │ │ │ │ ├── index.ts │ │ │ │ └── aspect-ratio.tsx │ │ │ ├── base-menu │ │ │ │ └── index.ts │ │ │ ├── drawer │ │ │ │ └── index.ts │ │ │ ├── accessible-icon │ │ │ │ ├── index.ts │ │ │ │ └── accessible-icon.tsx │ │ │ ├── otp-field │ │ │ │ └── index.ts │ │ │ ├── visually-hidden │ │ │ │ ├── index.ts │ │ │ │ └── visually-hidden.tsx │ │ │ ├── accordion │ │ │ │ └── index.ts │ │ │ ├── base-tabs-list │ │ │ │ ├── index.ts │ │ │ │ └── base-tabs-list.props.ts │ │ │ ├── kbd │ │ │ │ ├── index.ts │ │ │ │ └── kbd.props.ts │ │ │ ├── badge │ │ │ │ └── index.ts │ │ │ ├── card │ │ │ │ ├── index.ts │ │ │ │ └── card.props.ts │ │ │ ├── code │ │ │ │ └── index.ts │ │ │ ├── inset │ │ │ │ └── index.ts │ │ │ ├── link │ │ │ │ └── index.ts │ │ │ ├── text │ │ │ │ └── index.ts │ │ │ ├── avatar │ │ │ │ └── index.ts │ │ │ ├── button │ │ │ │ ├── index.ts │ │ │ │ ├── button.props.ts │ │ │ │ └── button.tsx │ │ │ ├── slider │ │ │ │ ├── index.ts │ │ │ │ └── slider.props.ts │ │ │ ├── switch │ │ │ │ ├── index.ts │ │ │ │ └── switch.props.ts │ │ │ ├── tabs │ │ │ │ ├── index.ts │ │ │ │ ├── tabs.props.ts │ │ │ │ └── tabs.css │ │ │ ├── checkbox │ │ │ │ ├── index.ts │ │ │ │ └── checkbox.props.ts │ │ │ ├── heading │ │ │ │ └── index.ts │ │ │ ├── progress │ │ │ │ ├── index.ts │ │ │ │ └── progress.props.ts │ │ │ ├── segmented-control │ │ │ │ ├── index.ts │ │ │ │ └── segmented-control.css │ │ │ ├── spinner │ │ │ │ ├── index.ts │ │ │ │ └── spinner.props.ts │ │ │ ├── table │ │ │ │ └── index.ts │ │ │ ├── tooltip │ │ │ │ ├── index.ts │ │ │ │ └── tooltip.props.ts │ │ │ ├── blockquote │ │ │ │ ├── index.ts │ │ │ │ ├── blockquote.css │ │ │ │ └── blockquote.props.ts │ │ │ ├── date-field │ │ │ │ ├── index.ts │ │ │ │ └── date-field.props.ts │ │ │ ├── dialog │ │ │ │ ├── index.ts │ │ │ │ └── dialog.props.ts │ │ │ ├── select │ │ │ │ └── index.ts │ │ │ ├── separator │ │ │ │ ├── index.ts │ │ │ │ └── separator.props.ts │ │ │ ├── stacked-horizontal-bar-chart │ │ │ │ └── index.ts │ │ │ ├── text-area │ │ │ │ ├── index.ts │ │ │ │ └── text-area.props.ts │ │ │ ├── base-button │ │ │ │ └── index.ts │ │ │ ├── callout │ │ │ │ └── index.ts │ │ │ ├── date-picker │ │ │ │ ├── index.ts │ │ │ │ ├── date-picker.props.ts │ │ │ │ └── date-picker.css │ │ │ ├── filter-chip │ │ │ │ ├── index.ts │ │ │ │ └── filter-chip.props.ts │ │ │ ├── icon-button │ │ │ │ ├── index.ts │ │ │ │ ├── icon-button.props.ts │ │ │ │ └── icon-button.tsx │ │ │ ├── popover │ │ │ │ ├── index.ts │ │ │ │ └── popover.props.ts │ │ │ ├── scroll-area │ │ │ │ ├── index.ts │ │ │ │ └── scroll-area.props.ts │ │ │ ├── tabs-nav │ │ │ │ ├── index.ts │ │ │ │ ├── tabs-nav.css │ │ │ │ └── tabs-nav.props.ts │ │ │ ├── data-list │ │ │ │ └── index.ts │ │ │ ├── skeleton │ │ │ │ └── index.ts │ │ │ ├── alert-dialog │ │ │ │ ├── alert-dialog.css │ │ │ │ ├── index.ts │ │ │ │ └── alert-dialog.props.ts │ │ │ ├── hover-card │ │ │ │ ├── index.ts │ │ │ │ └── hover-card.props.ts │ │ │ ├── text-field │ │ │ │ └── index.ts │ │ │ ├── breadcrumbs │ │ │ │ ├── index.ts │ │ │ │ └── breadcrumbs.props.ts │ │ │ ├── radio-group │ │ │ │ ├── index.ts │ │ │ │ └── radio-group.props.ts │ │ │ ├── avatar-group │ │ │ │ ├── index.ts │ │ │ │ └── avatar-group.props.ts │ │ │ ├── circular-progress │ │ │ │ ├── index.ts │ │ │ │ └── circular-progress.props.ts │ │ │ ├── context-menu │ │ │ │ ├── index.ts │ │ │ │ ├── context-menu.css │ │ │ │ └── context-menu.props.ts │ │ │ ├── date-range-picker │ │ │ │ ├── index.ts │ │ │ │ ├── date-range-picker.props.ts │ │ │ │ └── date-range-picker.css │ │ │ ├── dropdown-menu │ │ │ │ ├── index.ts │ │ │ │ ├── dropdown-menu.css │ │ │ │ └── dropdown-menu.props.ts │ │ │ ├── widget-stack │ │ │ │ ├── index.ts │ │ │ │ └── widget-stack.props.ts │ │ │ ├── avatar-stack │ │ │ │ ├── index.ts │ │ │ │ └── avatar-stack.props.ts │ │ │ ├── segmented-control-radio-group │ │ │ │ ├── index.ts │ │ │ │ └── segmented-control-radio-group.css │ │ │ ├── radio-button-group │ │ │ │ ├── index.ts │ │ │ │ └── radio-button-group.props.ts │ │ │ └── segmented-control-nav │ │ │ │ ├── index.ts │ │ │ │ ├── segmented-control-nav.css │ │ │ │ └── segmented-control-nav.props.ts │ │ ├── styles │ │ │ ├── utilities │ │ │ │ ├── text-align.css │ │ │ │ ├── vertical-align.css │ │ │ │ └── font-weight.css │ │ │ ├── breakpoints.css │ │ │ ├── tokens │ │ │ │ ├── space.css │ │ │ │ ├── radius.css │ │ │ │ └── cursor.css │ │ │ └── scrollbars.css │ │ ├── helpers │ │ │ ├── props │ │ │ │ ├── as-child.prop.ts │ │ │ │ ├── high-contrast.prop.ts │ │ │ │ ├── index.ts │ │ │ │ ├── text-align.prop.ts │ │ │ │ ├── leading-trim.prop.ts │ │ │ │ └── weight.prop.ts │ │ │ ├── use-isomorphic-layout-effect.ts │ │ │ ├── get-initials.ts │ │ │ ├── nice-intersection.ts │ │ │ ├── index.ts │ │ │ ├── extract-props-for-tag.ts │ │ │ └── has-own-property.ts │ │ └── index.ts │ ├── .storybook │ │ ├── stories │ │ │ ├── assets │ │ │ │ └── hero.png │ │ │ └── Introduction.mdx │ │ └── preview-head.html │ ├── tsconfig-cjs.json │ ├── tsconfig-esm.json │ ├── vercel.json │ ├── postcss-frosted-ui.js │ ├── postcss.config.js │ ├── .stylelintrc.js │ └── postcss.config.lite.js ├── generate-icon-lib │ ├── .gitignore │ ├── .eslintrc.js │ ├── src │ │ ├── templates │ │ │ ├── types.tsx │ │ │ └── entry.tsx.ejs │ │ └── consts.ts │ └── tsconfig.json ├── frosted-ui-native-colors │ ├── .npmignore │ ├── .gitignore │ ├── frosted-ui-swift-colors.zip │ ├── .eslintrc.js │ └── README.md ├── frosted-ui-icons │ ├── .env.example │ ├── frosted-ui-icons.zip │ ├── tsconfig-cjs.json │ ├── tsconfig-esm.json │ ├── index.js │ ├── src │ │ └── types.tsx │ ├── .gitignore │ ├── icons │ │ ├── subtract-12.svg │ │ ├── subtract-16.svg │ │ ├── subtract-20.svg │ │ ├── subtract-24.svg │ │ ├── subtract-32.svg │ │ ├── play-filled-24.svg │ │ ├── play-filled-12.svg │ │ ├── play-filled-32.svg │ │ ├── play-filled-16.svg │ │ ├── play-filled-20.svg │ │ ├── x-dot-com-12.svg │ │ ├── x-dot-com-24.svg │ │ ├── collapse-sidebar-filled-12.svg │ │ ├── x-dot-com-16.svg │ │ ├── x-dot-com-20.svg │ │ ├── x-dot-com-32.svg │ │ ├── collapse-sidebar-filled-20.svg │ │ ├── collapse-sidebar-filled-16.svg │ │ ├── collapse-sidebar-filled-24.svg │ │ ├── collapse-sidebar-filled-32.svg │ │ ├── twitch-20.svg │ │ ├── twitch-24.svg │ │ ├── twitch-12.svg │ │ ├── twitch-16.svg │ │ ├── twitch-32.svg │ │ ├── pause-filled-12.svg │ │ ├── pause-12.svg │ │ ├── plus-12.svg │ │ ├── plus-16.svg │ │ ├── lock-filled-16.svg │ │ ├── collapse-sidebar-12.svg │ │ ├── plus-20.svg │ │ ├── plus-24.svg │ │ ├── plus-32.svg │ │ ├── chevron-down-12.svg │ │ ├── chevron-left-12.svg │ │ ├── chevron-up-12.svg │ │ ├── chevron-up-24.svg │ │ ├── chevron-up-32.svg │ │ ├── lock-filled-24.svg │ │ ├── pause-16.svg │ │ ├── pause-20.svg │ │ ├── chevron-down-16.svg │ │ ├── chevron-down-24.svg │ │ ├── chevron-down-32.svg │ │ ├── chevron-left-16.svg │ │ ├── chevron-left-24.svg │ │ ├── chevron-left-32.svg │ │ ├── chevron-right-12.svg │ │ ├── chevron-right-16.svg │ │ ├── chevron-right-24.svg │ │ ├── chevron-right-32.svg │ │ ├── chevron-up-16.svg │ │ ├── three-dots-horizontal-12.svg │ │ ├── three-dots-vertical-12.svg │ │ ├── lock-filled-12.svg │ │ ├── message-filled-12.svg │ │ ├── trading-view-12.svg │ │ ├── trading-view-24.svg │ │ ├── checkmark-32.svg │ │ ├── italic-24.svg │ │ ├── pause-24.svg │ │ ├── trading-view-16.svg │ │ ├── trading-view-20.svg │ │ ├── trading-view-32.svg │ │ ├── arrow-fat-down-filled-12.svg │ │ ├── arrow-fat-up-filled-12.svg │ │ ├── arrow-fat-up-filled-16.svg │ │ ├── arrow-fat-up-filled-32.svg │ │ ├── checkmark-12.svg │ │ ├── collapse-sidebar-20.svg │ │ ├── pause-32.svg │ │ ├── arrow-fat-down-filled-16.svg │ │ ├── arrow-fat-down-filled-20.svg │ │ ├── arrow-fat-down-filled-24.svg │ │ ├── arrow-fat-down-filled-32.svg │ │ ├── arrow-fat-up-filled-20.svg │ │ ├── arrow-fat-up-filled-24.svg │ │ ├── heart-filled-12.svg │ │ ├── chevron-up-20.svg │ │ ├── collapse-sidebar-16.svg │ │ ├── collapse-sidebar-24.svg │ │ ├── cursor-filled-32.svg │ │ ├── heart-filled-24.svg │ │ ├── heart-filled-32.svg │ │ ├── lock-filled-20.svg │ │ ├── message-filled-16.svg │ │ ├── chevron-down-20.svg │ │ ├── chevron-left-20.svg │ │ ├── chevron-right-20.svg │ │ ├── collapse-sidebar-32.svg │ │ ├── cursor-filled-20.svg │ │ ├── cursor-filled-24.svg │ │ ├── heart-filled-16.svg │ │ ├── heart-filled-20.svg │ │ ├── mail-filled-20.svg │ │ ├── mail-filled-32.svg │ │ ├── three-dots-horizontal-32.svg │ │ ├── three-dots-vertical-32.svg │ │ ├── cursor-filled-16.svg │ │ ├── pause-filled-24.svg │ │ ├── play-24.svg │ │ ├── clock-filled-20.svg │ │ ├── cursor-filled-12.svg │ │ ├── lock-filled-32.svg │ │ ├── ban-16.svg │ │ ├── clock-filled-12.svg │ │ ├── clock-filled-24.svg │ │ ├── message-filled-24.svg │ │ ├── ban-32.svg │ │ ├── clock-filled-16.svg │ │ ├── mail-filled-24.svg │ │ ├── checkmark-20.svg │ │ ├── checkmark-24.svg │ │ ├── info-filled-16.svg │ │ ├── mail-filled-12.svg │ │ ├── ban-20.svg │ │ ├── ban-24.svg │ │ ├── play-16.svg │ │ ├── play-32.svg │ │ ├── three-dots-horizontal-20.svg │ │ ├── checkmark-16.svg │ │ ├── k-16.svg │ │ ├── k-20.svg │ │ ├── mail-filled-16.svg │ │ ├── italic-32.svg │ │ ├── k-24.svg │ │ ├── facebook-filled-12.svg │ │ ├── k-12.svg │ │ ├── k-32.svg │ │ ├── message-filled-20.svg │ │ ├── paper-airplane-filled-20.svg │ │ ├── paper-airplane-filled-24.svg │ │ ├── paper-airplane-filled-32.svg │ │ ├── paper-airplane-up-filled-20.svg │ │ ├── paper-airplane-up-filled-24.svg │ │ ├── paper-airplane-up-filled-32.svg │ │ ├── pause-filled-16.svg │ │ ├── underline-24.svg │ │ ├── clock-filled-32.svg │ │ ├── credit-card-filled-16.svg │ │ ├── italic-12.svg │ │ ├── paper-airplane-filled-12.svg │ │ ├── paper-airplane-filled-16.svg │ │ ├── paper-airplane-up-filled-12.svg │ │ ├── paper-airplane-up-filled-16.svg │ │ ├── play-20.svg │ │ ├── arrow-down-32.svg │ │ ├── arrow-left-16.svg │ │ ├── arrow-right-16.svg │ │ ├── arrow-right-20.svg │ │ ├── arrow-right-24.svg │ │ ├── arrow-up-32.svg │ │ ├── credit-card-filled-12.svg │ │ ├── italic-16.svg │ │ ├── play-12.svg │ │ ├── three-dots-vertical-20.svg │ │ ├── arrow-left-20.svg │ │ ├── arrow-left-24.svg │ │ ├── compass-filled-24.svg │ │ ├── credit-card-filled-20.svg │ │ ├── facebook-filled-24.svg │ │ ├── pause-filled-20.svg │ │ ├── arrow-left-32.svg │ │ ├── arrow-right-32.svg │ │ ├── credit-card-filled-24.svg │ │ ├── credit-card-filled-32.svg │ │ ├── pin-filled-12.svg │ │ ├── arrow-down-16.svg │ │ ├── arrow-up-16.svg │ │ ├── calendar-12.svg │ │ ├── italic-20.svg │ │ ├── message-filled-32.svg │ │ ├── pin-filled-24.svg │ │ ├── arrow-down-20.svg │ │ ├── arrow-down-24.svg │ │ ├── arrow-up-20.svg │ │ ├── arrow-up-24.svg │ │ ├── lock-16.svg │ │ ├── pause-filled-32.svg │ │ ├── picture-in-picture-16.svg │ │ ├── pin-filled-20.svg │ │ ├── pin-filled-32.svg │ │ ├── three-dots-horizontal-16.svg │ │ ├── three-dots-vertical-16.svg │ │ ├── filter-down-24.svg │ │ ├── pin-filled-16.svg │ │ ├── thumb-down-filled-12.svg │ │ ├── thumb-up-filled-12.svg │ │ ├── menu-12.svg │ │ ├── compass-filled-32.svg │ │ ├── filter-down-20.svg │ │ ├── menu-16.svg │ │ └── arrow-right-12.svg │ └── tsconfig.json ├── frosted-ui-react-native │ ├── .npmrc │ ├── assets │ │ └── images │ │ │ ├── icon.png │ │ │ ├── splash.png │ │ │ ├── favicon.png │ │ │ ├── adaptive-icon.png │ │ │ ├── react-native-reusables-dark.png │ │ │ └── react-native-reusables-light.png │ ├── babel.config.js │ ├── src │ │ └── components │ │ │ └── aspect-ratio.tsx │ ├── .prettierrc │ ├── metro.config.js │ ├── tsconfig.json │ └── app │ │ ├── +not-found.tsx │ │ └── _accent-color-context.tsx ├── frosted-ui-colors │ ├── .gitignore │ ├── src │ │ └── index.ts │ ├── .npmignore │ ├── rollup.config.js │ ├── README.md │ └── tsconfig.json ├── tsconfig │ ├── README.md │ ├── package.json │ └── base.json └── eslint-config-custom │ ├── .eslintrc.js │ └── package.json ├── mise.toml ├── .eslintignore ├── .github ├── CODEOWNERS ├── ISSUE_TEMPLATE │ └── config.yml └── .kodiak.toml ├── pnpm-workspace.yaml ├── apps └── tailwind │ ├── app │ ├── favicon.ico │ ├── next-theme-provider.tsx │ ├── layout.tsx │ └── api │ │ └── avatar │ │ └── route.ts │ ├── postcss.config.js │ ├── fonts │ ├── InterVariable.woff2 │ └── InterVariable-Italic.woff2 │ ├── .eslintrc.js │ ├── next-env.d.ts │ ├── tailwind.config.js │ ├── next.config.js │ ├── .gitignore │ └── css.d.ts ├── .prettierrc.json ├── .eslintrc.js └── .vscode └── settings.json /.npmrc: -------------------------------------------------------------------------------- 1 | auto-install-peers=true -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ./packages/frosted-ui/README.md -------------------------------------------------------------------------------- /packages/frosted-ui/.browserslistrc: -------------------------------------------------------------------------------- 1 | last 2 years -------------------------------------------------------------------------------- /packages/frosted-ui/changelog.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | -------------------------------------------------------------------------------- /packages/generate-icon-lib/.gitignore: -------------------------------------------------------------------------------- 1 | .env 2 | -------------------------------------------------------------------------------- /mise.toml: -------------------------------------------------------------------------------- 1 | [tools] 2 | node = "22" 3 | pnpm = "9.15.4" 4 | 5 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | .eslintrc.js 2 | dist 3 | out 4 | apps/nativewind 5 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @baked-dev @Wyatt-SG @fraserdale @arturbien 2 | -------------------------------------------------------------------------------- /packages/frosted-ui-native-colors/.npmignore: -------------------------------------------------------------------------------- 1 | /scripts/ 2 | .gitignore 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/em/index.ts: -------------------------------------------------------------------------------- 1 | export * from './em'; 2 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - 'apps/*' 3 | - 'packages/*' 4 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/quote/index.ts: -------------------------------------------------------------------------------- 1 | export * from './quote'; 2 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/shine/index.ts: -------------------------------------------------------------------------------- 1 | export * from './shine'; 2 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/slot/index.ts: -------------------------------------------------------------------------------- 1 | export * from './slot'; 2 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/portal/index.ts: -------------------------------------------------------------------------------- 1 | export * from './portal'; 2 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/strong/index.ts: -------------------------------------------------------------------------------- 1 | export * from './strong'; 2 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/.env.example: -------------------------------------------------------------------------------- 1 | FIGMA_ACCESS_TOKEN="" -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/calendar/index.ts: -------------------------------------------------------------------------------- 1 | export * from './calendar'; 2 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/sheet/index.ts: -------------------------------------------------------------------------------- 1 | export * as Sheet from './sheet'; 2 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/slot/slot.tsx: -------------------------------------------------------------------------------- 1 | export { Slot } from 'radix-ui'; 2 | -------------------------------------------------------------------------------- /packages/frosted-ui-react-native/.npmrc: -------------------------------------------------------------------------------- 1 | node-linker=hoisted 2 | enable-pre-post-scripts=true -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/aspect-ratio/index.ts: -------------------------------------------------------------------------------- 1 | export * from './aspect-ratio'; 2 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/base-menu/index.ts: -------------------------------------------------------------------------------- 1 | export * from './base-menu.props'; 2 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/drawer/index.ts: -------------------------------------------------------------------------------- 1 | export * as Drawer from './drawer'; 2 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/accessible-icon/index.ts: -------------------------------------------------------------------------------- 1 | export * from './accessible-icon'; 2 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/otp-field/index.ts: -------------------------------------------------------------------------------- 1 | export * as OTPField from './otp-field'; 2 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/visually-hidden/index.ts: -------------------------------------------------------------------------------- 1 | export * from './visually-hidden'; 2 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/accordion/index.ts: -------------------------------------------------------------------------------- 1 | export * as Accordion from './accordion'; 2 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/base-tabs-list/index.ts: -------------------------------------------------------------------------------- 1 | export * from './base-tabs-list.props'; 2 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/kbd/index.ts: -------------------------------------------------------------------------------- 1 | export * from './kbd'; 2 | export * from './kbd.props'; 3 | -------------------------------------------------------------------------------- /apps/tailwind/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whopio/frosted-ui/HEAD/apps/tailwind/app/favicon.ico -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/badge/index.ts: -------------------------------------------------------------------------------- 1 | export * from './badge'; 2 | export * from './badge.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/card/index.ts: -------------------------------------------------------------------------------- 1 | export * from './card'; 2 | export * from './card.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/code/index.ts: -------------------------------------------------------------------------------- 1 | export * from './code'; 2 | export * from './code.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/inset/index.ts: -------------------------------------------------------------------------------- 1 | export * from './inset'; 2 | export * from './inset.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/link/index.ts: -------------------------------------------------------------------------------- 1 | export * from './link'; 2 | export * from './link.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/text/index.ts: -------------------------------------------------------------------------------- 1 | export * from './text'; 2 | export * from './text.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/avatar/index.ts: -------------------------------------------------------------------------------- 1 | export * from './avatar'; 2 | export * from './avatar.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/button/index.ts: -------------------------------------------------------------------------------- 1 | export * from './button'; 2 | export * from './button.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/portal/portal.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | export { Portal } from 'radix-ui'; 4 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/slider/index.ts: -------------------------------------------------------------------------------- 1 | export * from './slider'; 2 | export * from './slider.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/switch/index.ts: -------------------------------------------------------------------------------- 1 | export * from './switch'; 2 | export * from './switch.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/tabs/index.ts: -------------------------------------------------------------------------------- 1 | export * as Tabs from './tabs'; 2 | export * from './tabs.props'; 3 | -------------------------------------------------------------------------------- /apps/tailwind/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | '@tailwindcss/postcss': {}, 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /packages/frosted-ui-colors/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /types 3 | .DS_Store 4 | /*.css 5 | index.js 6 | index.mjs 7 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/checkbox/index.ts: -------------------------------------------------------------------------------- 1 | export * from './checkbox'; 2 | export * from './checkbox.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/heading/index.ts: -------------------------------------------------------------------------------- 1 | export * from './heading'; 2 | export * from './heading.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/progress/index.ts: -------------------------------------------------------------------------------- 1 | export * from './progress'; 2 | export * from './progress.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/segmented-control/index.ts: -------------------------------------------------------------------------------- 1 | export * as SegmentedControl from './segmented-control'; 2 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/spinner/index.ts: -------------------------------------------------------------------------------- 1 | export * from './spinner'; 2 | export * from './spinner.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/table/index.ts: -------------------------------------------------------------------------------- 1 | export * as Table from './table'; 2 | export * from './table.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/tooltip/index.ts: -------------------------------------------------------------------------------- 1 | export * from './tooltip'; 2 | export * from './tooltip.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui-native-colors/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /types 3 | .DS_Store 4 | /dist 5 | index.js 6 | index.mjs 7 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/blockquote/index.ts: -------------------------------------------------------------------------------- 1 | export * from './blockquote'; 2 | export * from './blockquote.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/date-field/index.ts: -------------------------------------------------------------------------------- 1 | export * from './date-field'; 2 | export * from './date-field.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/dialog/index.ts: -------------------------------------------------------------------------------- 1 | export * as Dialog from './dialog'; 2 | export * from './dialog.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/select/index.ts: -------------------------------------------------------------------------------- 1 | export * as Select from './select'; 2 | export * from './select.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/separator/index.ts: -------------------------------------------------------------------------------- 1 | export * from './separator'; 2 | export * from './separator.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/stacked-horizontal-bar-chart/index.ts: -------------------------------------------------------------------------------- 1 | export * from './stacked-horizontal-bar-chart'; 2 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/text-area/index.ts: -------------------------------------------------------------------------------- 1 | export * from './text-area'; 2 | export * from './text-area.props'; 3 | -------------------------------------------------------------------------------- /apps/tailwind/fonts/InterVariable.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whopio/frosted-ui/HEAD/apps/tailwind/fonts/InterVariable.woff2 -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/aspect-ratio/aspect-ratio.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | export { AspectRatio } from 'radix-ui'; 4 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/base-button/index.ts: -------------------------------------------------------------------------------- 1 | export * from './base-button'; 2 | export * from './base-button.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/callout/index.ts: -------------------------------------------------------------------------------- 1 | export * as Callout from './callout'; 2 | export * from './callout.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/date-picker/index.ts: -------------------------------------------------------------------------------- 1 | export * from './date-picker'; 2 | export * from './date-picker.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/filter-chip/index.ts: -------------------------------------------------------------------------------- 1 | export * from './filter-chip'; 2 | export * from './filter-chip.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/icon-button/index.ts: -------------------------------------------------------------------------------- 1 | export * from './icon-button'; 2 | export * from './icon-button.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/popover/index.ts: -------------------------------------------------------------------------------- 1 | export * as Popover from './popover'; 2 | export * from './popover.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/scroll-area/index.ts: -------------------------------------------------------------------------------- 1 | export * from './scroll-area'; 2 | export * from './scroll-area.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/tabs-nav/index.ts: -------------------------------------------------------------------------------- 1 | export * as TabsNav from './tabs-nav'; 2 | export * from './tabs-nav.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/data-list/index.ts: -------------------------------------------------------------------------------- 1 | export * as DataList from './data-list'; 2 | export * from './data-list.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/skeleton/index.ts: -------------------------------------------------------------------------------- 1 | export * as Skeleton from './skeleton'; 2 | export * from './skeleton.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/accessible-icon/accessible-icon.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | export { AccessibleIcon } from 'radix-ui'; 4 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/alert-dialog/alert-dialog.css: -------------------------------------------------------------------------------- 1 | .fui-AlertDialogOverlay { 2 | } 3 | 4 | .fui-AlertDialogContent { 5 | } 6 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/hover-card/index.ts: -------------------------------------------------------------------------------- 1 | export * as HoverCard from './hover-card'; 2 | export * from './hover-card.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/text-field/index.ts: -------------------------------------------------------------------------------- 1 | export * as TextField from './text-field'; 2 | export * from './text-field.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/visually-hidden/visually-hidden.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | export { VisuallyHidden } from 'radix-ui'; 4 | -------------------------------------------------------------------------------- /apps/tailwind/fonts/InterVariable-Italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whopio/frosted-ui/HEAD/apps/tailwind/fonts/InterVariable-Italic.woff2 -------------------------------------------------------------------------------- /packages/frosted-ui-icons/frosted-ui-icons.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whopio/frosted-ui/HEAD/packages/frosted-ui-icons/frosted-ui-icons.zip -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/breadcrumbs/index.ts: -------------------------------------------------------------------------------- 1 | export * as Breadcrumbs from './breadcrumbs'; 2 | export * from './breadcrumbs.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/radio-group/index.ts: -------------------------------------------------------------------------------- 1 | export * as RadioGroup from './radio-group'; 2 | export * from './radio-group.props'; 3 | -------------------------------------------------------------------------------- /packages/tsconfig/README.md: -------------------------------------------------------------------------------- 1 | # `tsconfig` 2 | 3 | These are base shared `tsconfig.json`s from which all other `tsconfig.json`'s inherit from. 4 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/alert-dialog/index.ts: -------------------------------------------------------------------------------- 1 | export * as AlertDialog from './alert-dialog'; 2 | export * from './alert-dialog.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/avatar-group/index.ts: -------------------------------------------------------------------------------- 1 | export * as AvatarGroup from './avatar-group'; 2 | export * from './avatar-group.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/button/button.props.ts: -------------------------------------------------------------------------------- 1 | export { baseButtonPropDefs as buttonPropDefs } from '../base-button/base-button.props'; 2 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/circular-progress/index.ts: -------------------------------------------------------------------------------- 1 | export * from './circular-progress'; 2 | export * from './circular-progress.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/context-menu/index.ts: -------------------------------------------------------------------------------- 1 | export * as ContextMenu from './context-menu'; 2 | export * from './context-menu.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/date-range-picker/index.ts: -------------------------------------------------------------------------------- 1 | export * from './date-range-picker'; 2 | export * from './date-range-picker.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/dropdown-menu/index.ts: -------------------------------------------------------------------------------- 1 | export * as DropdownMenu from './dropdown-menu'; 2 | export * from './dropdown-menu.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/widget-stack/index.ts: -------------------------------------------------------------------------------- 1 | export * as WidgetStack from './widget-stack'; 2 | export * from './widget-stack.props'; 3 | -------------------------------------------------------------------------------- /apps/tailwind/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['custom'], 4 | globals: { 5 | module: 'readonly', 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /packages/frosted-ui-colors/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './dark'; 2 | export * from './light'; 3 | export * from './blackA'; 4 | export * from './whiteA'; 5 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/alert-dialog/alert-dialog.props.ts: -------------------------------------------------------------------------------- 1 | export { dialogContentPropDefs as alertDialogContentPropDefs } from '../dialog'; 2 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/avatar-stack/index.ts: -------------------------------------------------------------------------------- 1 | export * as AvatarStack from './avatar-stack'; 2 | export * from './avatar-stack.props'; 3 | 4 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/segmented-control-radio-group/index.ts: -------------------------------------------------------------------------------- 1 | export * as SegmentedControlRadioGroup from './segmented-control-radio-group'; 2 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/tabs/tabs.props.ts: -------------------------------------------------------------------------------- 1 | export { baseTabsListPropDefs as tabsListPropDefs } from '../base-tabs-list/base-tabs-list.props'; 2 | -------------------------------------------------------------------------------- /packages/frosted-ui-react-native/assets/images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whopio/frosted-ui/HEAD/packages/frosted-ui-react-native/assets/images/icon.png -------------------------------------------------------------------------------- /packages/frosted-ui/.storybook/stories/assets/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whopio/frosted-ui/HEAD/packages/frosted-ui/.storybook/stories/assets/hero.png -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/date-picker/date-picker.props.ts: -------------------------------------------------------------------------------- 1 | export { dateFieldPropDefs as datePickerPropDefs } from '../date-field/date-field.props'; 2 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/tabs-nav/tabs-nav.css: -------------------------------------------------------------------------------- 1 | @import '../base-tabs-list/base-tabs-list.css'; 2 | 3 | .fui-TabsNavItem { 4 | display: flex; 5 | } 6 | -------------------------------------------------------------------------------- /packages/frosted-ui-colors/.npmignore: -------------------------------------------------------------------------------- 1 | /src/ 2 | /scripts/ 3 | .gitignore 4 | tsconfig.json 5 | rollup.config.js 6 | yarn.lock 7 | pnpm.lock 8 | package-lock.json 9 | -------------------------------------------------------------------------------- /packages/frosted-ui-react-native/assets/images/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whopio/frosted-ui/HEAD/packages/frosted-ui-react-native/assets/images/splash.png -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/icon-button/icon-button.props.ts: -------------------------------------------------------------------------------- 1 | export { baseButtonPropDefs as iconButtonPropDefs } from '../base-button/base-button.props'; 2 | -------------------------------------------------------------------------------- /packages/frosted-ui-react-native/assets/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whopio/frosted-ui/HEAD/packages/frosted-ui-react-native/assets/images/favicon.png -------------------------------------------------------------------------------- /packages/frosted-ui/.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/date-picker/date-picker.css: -------------------------------------------------------------------------------- 1 | .fui-DatePickerRoot { 2 | display: flex; 3 | align-items: center; 4 | gap: var(--space-1); 5 | } 6 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/radio-button-group/index.ts: -------------------------------------------------------------------------------- 1 | export * as RadioButtonGroup from './radio-button-group'; 2 | export * from './radio-button-group.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui-native-colors/frosted-ui-swift-colors.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whopio/frosted-ui/HEAD/packages/frosted-ui-native-colors/frosted-ui-swift-colors.zip -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/date-range-picker/date-range-picker.props.ts: -------------------------------------------------------------------------------- 1 | export { dateFieldPropDefs as dateRangePickerPropDefs } from '../date-field/date-field.props'; 2 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/segmented-control-radio-group/segmented-control-radio-group.css: -------------------------------------------------------------------------------- 1 | @import '../base-segmented-control-list/base-segmented-control-list.css'; 2 | -------------------------------------------------------------------------------- /packages/frosted-ui-react-native/assets/images/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whopio/frosted-ui/HEAD/packages/frosted-ui-react-native/assets/images/adaptive-icon.png -------------------------------------------------------------------------------- /packages/frosted-ui/tsconfig-cjs.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./dist/cjs", 5 | "module": "CommonJS" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/frosted-ui/tsconfig-esm.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./dist/esm", 5 | "module": "ES2020" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/tsconfig-cjs.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./dist/cjs", 5 | "module": "CommonJS" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/tsconfig-esm.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./dist/esm", 5 | "module": "ES2020" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/date-range-picker/date-range-picker.css: -------------------------------------------------------------------------------- 1 | .fui-DateRangePickerRoot { 2 | display: flex; 3 | align-items: center; 4 | gap: var(--space-1); 5 | } 6 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/segmented-control-nav/index.ts: -------------------------------------------------------------------------------- 1 | export * as SegmentedControlNav from './segmented-control-nav'; 2 | export * from './segmented-control-nav.props'; 3 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/index.js: -------------------------------------------------------------------------------- 1 | import module from 'module'; 2 | 3 | export * from './dist/index.js'; 4 | 5 | Object.defineProperty(module.exports, '__esModule', { 6 | value: true, 7 | }); 8 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/src/types.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export interface IconProps extends React.SVGProps { 4 | children?: never; 5 | color?: string; 6 | } 7 | -------------------------------------------------------------------------------- /packages/generate-icon-lib/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parserOptions: { 4 | ecmaVersion: 'latest', 5 | }, 6 | env: { 7 | node: true, 8 | }, 9 | }; 10 | -------------------------------------------------------------------------------- /packages/frosted-ui-react-native/babel.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | module.exports = function (api) { 3 | api.cache(true); 4 | return { 5 | presets: ['babel-preset-expo'], 6 | }; 7 | }; 8 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/.gitignore: -------------------------------------------------------------------------------- 1 | # The repo's directory contents are likely generated, 2 | # so we want to whitelist what we want to keep in git. 3 | 4 | .env 5 | .size-snapshot.json 6 | .rts2* 7 | dist 8 | -------------------------------------------------------------------------------- /packages/frosted-ui-native-colors/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parserOptions: { 4 | ecmaVersion: 'latest', 5 | }, 6 | env: { 7 | node: true, 8 | }, 9 | }; 10 | -------------------------------------------------------------------------------- /packages/frosted-ui-react-native/assets/images/react-native-reusables-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whopio/frosted-ui/HEAD/packages/frosted-ui-react-native/assets/images/react-native-reusables-dark.png -------------------------------------------------------------------------------- /packages/frosted-ui-react-native/assets/images/react-native-reusables-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whopio/frosted-ui/HEAD/packages/frosted-ui-react-native/assets/images/react-native-reusables-light.png -------------------------------------------------------------------------------- /packages/generate-icon-lib/src/templates/types.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export interface IconProps extends React.SVGProps { 4 | children?: never; 5 | color?: string; 6 | } 7 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "always", 3 | "bracketSameLine": false, 4 | "printWidth": 120, 5 | "semi": true, 6 | "singleQuote": true, 7 | "tabWidth": 2, 8 | "trailingComma": "all" 9 | } 10 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/blockquote/blockquote.css: -------------------------------------------------------------------------------- 1 | .fui-Blockquote { 2 | border-left: clamp(2px, 0.125em, 6px) solid var(--accent-a6); 3 | padding-left: min(var(--space-5), max(var(--space-3), 0.5em)); 4 | } 5 | -------------------------------------------------------------------------------- /packages/generate-icon-lib/src/templates/entry.tsx.ejs: -------------------------------------------------------------------------------- 1 | <% for (const i in icons) { -%> 2 | export { default as <%- iconToComponentName(icons[i]) %> } from './<%- stripExtension(iconToReactFileName(icons[i])) %>'; 3 | <% } %> 4 | -------------------------------------------------------------------------------- /packages/tsconfig/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tsconfig", 3 | "version": "0.0.0", 4 | "private": true, 5 | "files": [ 6 | "base.json", 7 | "nextjs.json", 8 | "react-library.json" 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/styles/utilities/text-align.css: -------------------------------------------------------------------------------- 1 | .fui-r-ta-left { 2 | text-align: left; 3 | } 4 | 5 | .fui-r-ta-center { 6 | text-align: center; 7 | } 8 | 9 | .fui-r-ta-right { 10 | text-align: right; 11 | } 12 | -------------------------------------------------------------------------------- /packages/frosted-ui/vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://openapi.vercel.sh/vercel.json", 3 | "outputDirectory": "storybook-static", 4 | "buildCommand": "cd ../.. && pnpm build:storybook", 5 | "installCommand": "pnpm i" 6 | } 7 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/segmented-control-nav/segmented-control-nav.css: -------------------------------------------------------------------------------- 1 | @import '../base-segmented-control-list/base-segmented-control-list.css'; 2 | 3 | .fui-SegmentedControlNavItem { 4 | display: flex; 5 | flex: 1; 6 | } 7 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/segmented-control/segmented-control.css: -------------------------------------------------------------------------------- 1 | @import '../base-segmented-control-list/base-segmented-control-list.css'; 2 | 3 | .fui-SegmentedControlContent { 4 | position: relative; 5 | outline: 0; 6 | } 7 | -------------------------------------------------------------------------------- /apps/tailwind/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /packages/eslint-config-custom/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['prettier', 'eslint:recommended', 'plugin:@typescript-eslint/recommended'], 3 | parser: '@typescript-eslint/parser', 4 | plugins: ['@typescript-eslint'], 5 | }; 6 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/helpers/props/as-child.prop.ts: -------------------------------------------------------------------------------- 1 | import type { PropDef } from './prop-def'; 2 | 3 | const asChildProp = { 4 | type: 'boolean', 5 | default: undefined, 6 | } satisfies PropDef; 7 | 8 | export { asChildProp }; 9 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/helpers/props/high-contrast.prop.ts: -------------------------------------------------------------------------------- 1 | import type { PropDef } from '..'; 2 | 3 | const highContrastProp = { 4 | type: 'boolean', 5 | default: undefined, 6 | } satisfies PropDef; 7 | 8 | export { highContrastProp }; 9 | -------------------------------------------------------------------------------- /apps/tailwind/app/next-theme-provider.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { ThemeProvider } from 'next-themes'; 4 | 5 | export function NextThemeProvider({ children }) { 6 | return {children}; 7 | } 8 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/helpers/use-isomorphic-layout-effect.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // Avoiding SSR hydration warnings 4 | export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect; 5 | -------------------------------------------------------------------------------- /packages/frosted-ui-react-native/src/components/aspect-ratio.tsx: -------------------------------------------------------------------------------- 1 | import * as AspectRatioPrimitive from '@rn-primitives/aspect-ratio'; 2 | 3 | const AspectRatio: typeof AspectRatioPrimitive.Root = AspectRatioPrimitive.Root; 4 | 5 | export { AspectRatio }; 6 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/styles/breakpoints.css: -------------------------------------------------------------------------------- 1 | @custom-media --xs (min-width: 520px); 2 | @custom-media --sm (min-width: 768px); 3 | @custom-media --md (min-width: 1024px); 4 | @custom-media --lg (min-width: 1280px); 5 | @custom-media --xl (min-width: 1640px); 6 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | // This tells ESLint to load the config from the package `eslint-config-custom` 4 | extends: ['custom'], 5 | settings: { 6 | next: { 7 | rootDir: ['apps/*/'], 8 | }, 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /packages/generate-icon-lib/src/consts.ts: -------------------------------------------------------------------------------- 1 | export const FILE_PATH_MANIFEST = 'manifest.json'; 2 | export const FILE_PATH_ENTRY = 'src/index.tsx'; 3 | export const FILE_PATH_TYPES = 'src/types.tsx'; 4 | export const FOLDER_PATH_ICONS = '../../packages/frosted-ui-icons'; 5 | -------------------------------------------------------------------------------- /packages/frosted-ui/postcss-frosted-ui.js: -------------------------------------------------------------------------------- 1 | module.exports = () => ({ 2 | postcssPlugin: 'postcss-frosted-ui', 3 | Comment(comment) { 4 | // Remove all comments from CSS source 5 | comment.remove(); 6 | }, 7 | }); 8 | 9 | module.exports.postcss = true; 10 | -------------------------------------------------------------------------------- /packages/frosted-ui-react-native/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "tabWidth": 2, 4 | "singleQuote": true, 5 | "bracketSameLine": true, 6 | "trailingComma": "es5", 7 | "plugins": ["prettier-plugin-tailwindcss"], 8 | "tailwindFunctions": ["cva"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/frosted-ui-react-native/metro.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | /* eslint-disable @typescript-eslint/no-var-requires */ 3 | const { getDefaultConfig } = require('expo/metro-config'); 4 | 5 | const config = getDefaultConfig(__dirname); 6 | 7 | module.exports = config; 8 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/styles/tokens/space.css: -------------------------------------------------------------------------------- 1 | .frosted-ui { 2 | --space-1: 4px; 3 | --space-2: 8px; 4 | --space-3: 12px; 5 | --space-4: 16px; 6 | --space-5: 24px; 7 | --space-6: 32px; 8 | --space-7: 40px; 9 | --space-8: 48px; 10 | --space-9: 64px; 11 | } 12 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/context-menu/context-menu.css: -------------------------------------------------------------------------------- 1 | @import '../base-menu/base-menu.css'; 2 | 3 | .fui-ContextMenuContent { 4 | max-height: var(--radix-context-menu-content-available-height); 5 | transform-origin: var(--radix-context-menu-content-transform-origin); 6 | } 7 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/context-menu/context-menu.props.ts: -------------------------------------------------------------------------------- 1 | export { 2 | baseMenuCheckboxItemPropDefs as contextMenuCheckboxItemPropDefs, 3 | baseMenuContentPropDefs as contextMenuContentPropDefs, 4 | baseMenuItemPropDefs as contextMenuItemPropDefs, 5 | } from '../base-menu'; 6 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/dropdown-menu/dropdown-menu.css: -------------------------------------------------------------------------------- 1 | @import '../base-menu/base-menu.css'; 2 | 3 | .fui-DropdownMenuContent { 4 | max-height: var(--radix-dropdown-menu-content-available-height); 5 | transform-origin: var(--radix-dropdown-menu-content-transform-origin); 6 | } 7 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/shine/shine.css: -------------------------------------------------------------------------------- 1 | .fui-Shine { 2 | position: relative; 3 | user-select: none; 4 | } 5 | 6 | .fui-ShineSvgFilter { 7 | position: fixed; 8 | top: 0; 9 | left: 0; 10 | width: 100%; 11 | height: 100%; 12 | pointer-events: none; 13 | } 14 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/tabs/tabs.css: -------------------------------------------------------------------------------- 1 | @import '../base-tabs-list/base-tabs-list.css'; 2 | 3 | .fui-TabsContent { 4 | position: relative; 5 | outline: 0; 6 | } 7 | 8 | .fui-TabsContent:where(:focus-visible) { 9 | outline: 2px solid var(--color-focus-root); 10 | } 11 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/dropdown-menu/dropdown-menu.props.ts: -------------------------------------------------------------------------------- 1 | export { 2 | baseMenuCheckboxItemPropDefs as dropdownMenuCheckboxItemPropDefs, 3 | baseMenuContentPropDefs as dropdownMenuContentPropDefs, 4 | baseMenuItemPropDefs as dropdownMenuItemPropDefs, 5 | } from '../base-menu'; 6 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './components'; 2 | export * from './helpers'; 3 | export * from './tailwind-plugin'; 4 | export { Theme, updateThemeAppearanceClass, useThemeContext } from './theme'; 5 | export * from './theme-options'; 6 | export { ThemePanel } from './theme-panel'; 7 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/breadcrumbs/breadcrumbs.props.ts: -------------------------------------------------------------------------------- 1 | import { colorProp } from '../../helpers'; 2 | 3 | const breadcrumbsPropDefs = { 4 | color: { ...colorProp, default: 'gray' }, 5 | } satisfies { 6 | color: typeof colorProp; 7 | }; 8 | 9 | export { breadcrumbsPropDefs }; 10 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/helpers/props/index.ts: -------------------------------------------------------------------------------- 1 | export * from './as-child.prop'; 2 | export * from './color.prop'; 3 | export * from './high-contrast.prop'; 4 | export * from './leading-trim.prop'; 5 | export * from './prop-def'; 6 | export * from './text-align.prop'; 7 | export * from './weight.prop'; 8 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/styles/tokens/radius.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --radius-factor: 1; 3 | --radius-full: 0px; 4 | --radius-thumb: 9999px; 5 | 6 | --radius-1: 3px; 7 | --radius-2: 4px; 8 | --radius-3: 6px; 9 | --radius-4: 8px; 10 | --radius-5: 12px; 11 | --radius-6: 16px; 12 | } 13 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/styles/utilities/vertical-align.css: -------------------------------------------------------------------------------- 1 | .fui-r-va-baseline { 2 | vertical-align: baseline; 3 | } 4 | 5 | .fui-r-va-top { 6 | vertical-align: top; 7 | } 8 | 9 | .fui-r-va-middle { 10 | vertical-align: middle; 11 | } 12 | 13 | .fui-r-va-bottom { 14 | vertical-align: bottom; 15 | } 16 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/tooltip/tooltip.props.ts: -------------------------------------------------------------------------------- 1 | import type { PropDef } from '../../helpers'; 2 | 3 | const tooltipPropDefs = { 4 | content: { type: 'ReactNode', default: undefined, required: true }, 5 | } satisfies { 6 | content: PropDef; 7 | }; 8 | 9 | export { tooltipPropDefs }; 10 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/segmented-control-nav/segmented-control-nav.props.ts: -------------------------------------------------------------------------------- 1 | import { asChildProp } from '../../helpers'; 2 | 3 | const segmentedControlNavLinkPropDefs = { 4 | asChild: asChildProp, 5 | } satisfies { 6 | asChild: typeof asChildProp; 7 | }; 8 | 9 | export { segmentedControlNavLinkPropDefs }; 10 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/helpers/get-initials.ts: -------------------------------------------------------------------------------- 1 | export function getInitials(name: string) { 2 | return ( 3 | name 4 | .match(/(\s|^)\p{L}\p{Mn}*/gu) 5 | ?.filter((el, i, array) => i === 0 || i === array.length - 1) 6 | .map((el) => el.trimStart().toUpperCase()) 7 | .join('') || '' 8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/helpers/props/text-align.prop.ts: -------------------------------------------------------------------------------- 1 | import type { PropDef } from '..'; 2 | 3 | const alignValues = ['left', 'center', 'right'] as const; 4 | 5 | const alignProp = { 6 | type: 'enum', 7 | values: alignValues, 8 | default: undefined, 9 | } satisfies PropDef<(typeof alignValues)[number]>; 10 | 11 | export { alignProp }; 12 | -------------------------------------------------------------------------------- /apps/tailwind/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import './globals.css'; 3 | 4 | export const metadata = { 5 | title: 'Frosted UI playground', 6 | description: 'A playground of Frosted UI components', 7 | }; 8 | 9 | export default function RootLayout({ children }: { children: React.ReactNode }) { 10 | return children; 11 | } 12 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/helpers/props/leading-trim.prop.ts: -------------------------------------------------------------------------------- 1 | import type { PropDef } from '..'; 2 | 3 | const trimValues = ['normal', 'start', 'end', 'both'] as const; 4 | 5 | const trimProp = { 6 | type: 'enum', 7 | values: trimValues, 8 | default: undefined, 9 | } satisfies PropDef<(typeof trimValues)[number]>; 10 | 11 | export { trimProp }; 12 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/helpers/nice-intersection.ts: -------------------------------------------------------------------------------- 1 | // NiceIntersection type is equivalent to a plain intersection type S & T 2 | // except it makes the result look like {foo: ..., bar?: ...} instead of {foo: ...} & {bar?: ...}. 3 | 4 | type NiceIntersection = { 5 | [K in keyof (S & T)]: (S & T)[K]; 6 | }; 7 | 8 | export type { NiceIntersection }; 9 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/helpers/props/weight.prop.ts: -------------------------------------------------------------------------------- 1 | import type { PropDef } from '..'; 2 | 3 | const weights = ['light', 'regular', 'medium', 'semi-bold', 'bold'] as const; 4 | 5 | const weightProp = { 6 | type: 'enum', 7 | values: weights, 8 | default: undefined, 9 | } satisfies PropDef<(typeof weights)[number]>; 10 | 11 | export { weightProp }; 12 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/helpers/index.ts: -------------------------------------------------------------------------------- 1 | export * from './breakpoints'; 2 | export * from './emoji-colors'; 3 | export * from './extract-props-for-tag'; 4 | export * from './get-initials'; 5 | export * from './get-subtree'; 6 | export * from './has-own-property'; 7 | export * from './nice-intersection'; 8 | export * from './props'; 9 | export * from './radix-colors'; 10 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/subtract-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/subtract-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/base-tabs-list/base-tabs-list.props.ts: -------------------------------------------------------------------------------- 1 | import { PropDef } from '../../helpers'; 2 | 3 | const sizes = ['1', '2'] as const; 4 | 5 | const baseTabsListPropDefs = { 6 | size: { type: 'enum', values: sizes, default: '2' }, 7 | } satisfies { 8 | size: PropDef<(typeof sizes)[number]>; 9 | }; 10 | 11 | export { baseTabsListPropDefs }; 12 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/em/em.tsx: -------------------------------------------------------------------------------- 1 | import classNames from 'classnames'; 2 | import * as React from 'react'; 3 | 4 | interface EmProps extends React.ComponentProps<'em'> {} 5 | 6 | const Em = (props: EmProps) => ; 7 | Em.displayName = 'Em'; 8 | 9 | export { Em }; 10 | export type { EmProps }; 11 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/strong/strong.css: -------------------------------------------------------------------------------- 1 | .fui-Strong { 2 | font-family: var(--strong-font-family); 3 | font-size: calc(var(--strong-font-size-adjust) * 1em); 4 | font-style: var(--strong-font-style); 5 | font-weight: var(--strong-font-weight); 6 | letter-spacing: calc(var(--strong-letter-spacing) + var(--letter-spacing, var(--default-letter-spacing))); 7 | } 8 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/helpers/extract-props-for-tag.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | type ExtractPropsForTag< 4 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 5 | C extends React.ElementType, 6 | T extends string, 7 | > = Omit, { as: T }>, 'as'>; 8 | 9 | export type { ExtractPropsForTag }; 10 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/subtract-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/kbd/kbd.props.ts: -------------------------------------------------------------------------------- 1 | import type { PropDef } from '../../helpers'; 2 | 3 | const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const; 4 | 5 | const kbdPropDefs = { 6 | size: { type: 'enum', values: sizes, default: undefined }, 7 | } satisfies { 8 | size: PropDef<(typeof sizes)[number]>; 9 | }; 10 | 11 | export { kbdPropDefs }; 12 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/tabs-nav/tabs-nav.props.ts: -------------------------------------------------------------------------------- 1 | import { asChildProp } from '../../helpers'; 2 | 3 | const tabsNavLinkPropDefs = { 4 | asChild: asChildProp, 5 | } satisfies { 6 | asChild: typeof asChildProp; 7 | }; 8 | 9 | export { baseTabsListPropDefs as tabsNavPropDefs } from '../base-tabs-list/base-tabs-list.props'; 10 | export { tabsNavLinkPropDefs }; 11 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/subtract-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/subtract-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /apps/tailwind/app/api/avatar/route.ts: -------------------------------------------------------------------------------- 1 | import { NextResponse } from 'next/server'; 2 | 3 | async function wait(ms: number) { 4 | return new Promise((resolve) => setTimeout(resolve, ms)); 5 | } 6 | 7 | export async function GET() { 8 | await wait(1000); 9 | return NextResponse.redirect('https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=160&h=160&dpr=2&q=80'); 10 | } 11 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/styles/tokens/cursor.css: -------------------------------------------------------------------------------- 1 | .frosted-ui { 2 | --cursor-button: pointer; 3 | --cursor-checkbox: pointer; 4 | --cursor-disabled: not-allowed; 5 | --cursor-link: pointer; 6 | --cursor-menu-item: pointer; 7 | --cursor-radio: pointer; 8 | --cursor-slider-thumb: pointer; 9 | --cursor-slider-thumb-active: pointer; 10 | --cursor-switch: pointer; 11 | } 12 | -------------------------------------------------------------------------------- /apps/tailwind/tailwind.config.js: -------------------------------------------------------------------------------- 1 | import { frostedThemePlugin } from 'frosted-ui'; 2 | 3 | export default { 4 | darkMode: ['class'], 5 | content: [ 6 | './app/**/*.{js,ts,jsx,tsx,mdx}', 7 | './pages/**/*.{js,ts,jsx,tsx,mdx}', 8 | './components/**/*.{js,ts,jsx,tsx,mdx}', 9 | ], 10 | theme: { 11 | extend: {}, 12 | }, 13 | plugins: [frostedThemePlugin()], 14 | }; 15 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/dialog/dialog.props.ts: -------------------------------------------------------------------------------- 1 | import type { PropDef } from '../../helpers'; 2 | 3 | const contentSizes = ['1', '2', '3', '4'] as const; 4 | 5 | const dialogContentPropDefs = { 6 | size: { type: 'enum', values: contentSizes, default: '3' }, 7 | } satisfies { 8 | size: PropDef<(typeof contentSizes)[number]>; 9 | }; 10 | 11 | export { dialogContentPropDefs }; 12 | -------------------------------------------------------------------------------- /apps/tailwind/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | transpilePackages: ['frosted-ui'], 5 | async redirects() { 6 | return [ 7 | { 8 | source: '/', 9 | destination: '/dashboard', 10 | permanent: false, 11 | }, 12 | ]; 13 | }, 14 | }; 15 | 16 | module.exports = nextConfig; 17 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/radio-button-group/radio-button-group.props.ts: -------------------------------------------------------------------------------- 1 | import { colorProp, highContrastProp } from '../../helpers'; 2 | 3 | const radioButtonGroupPropDefs = { 4 | color: colorProp, 5 | highContrast: highContrastProp, 6 | } satisfies { 7 | color: typeof colorProp; 8 | highContrast: typeof highContrastProp; 9 | }; 10 | 11 | export { radioButtonGroupPropDefs }; 12 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/helpers/has-own-property.ts: -------------------------------------------------------------------------------- 1 | /** A util to check whether the object has a key, while inferring the correct key type */ 2 | function hasOwnProperty( 3 | obj: Record, 4 | key: string | number | symbol, 5 | ): key is K { 6 | return Object.prototype.hasOwnProperty.call(obj, key); 7 | } 8 | 9 | export { hasOwnProperty }; 10 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/quote/quote.tsx: -------------------------------------------------------------------------------- 1 | import classNames from 'classnames'; 2 | import * as React from 'react'; 3 | 4 | interface QuoteProps extends React.ComponentProps<'q'> {} 5 | 6 | const Quote = (props: QuoteProps) => ; 7 | Quote.displayName = 'Quote'; 8 | 9 | export { Quote }; 10 | export type { QuoteProps }; 11 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/play-filled-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/avatar-stack/avatar-stack.props.ts: -------------------------------------------------------------------------------- 1 | import { type PropDef } from '../../helpers'; 2 | 3 | const sizes = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'] as const; 4 | 5 | const avatarStackPropDefs = { 6 | size: { type: 'enum', values: sizes, default: '3' }, 7 | } satisfies { 8 | size: PropDef<(typeof sizes)[number]>; 9 | }; 10 | 11 | export { avatarStackPropDefs }; 12 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/play-filled-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/strong/strong.tsx: -------------------------------------------------------------------------------- 1 | import classNames from 'classnames'; 2 | import * as React from 'react'; 3 | 4 | interface StrongProps extends React.ComponentProps<'strong'> {} 5 | 6 | const Strong = (props: StrongProps) => ; 7 | Strong.displayName = 'Strong'; 8 | 9 | export { Strong }; 10 | export type { StrongProps }; 11 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/play-filled-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/em/em.css: -------------------------------------------------------------------------------- 1 | .fui-Em { 2 | box-sizing: border-box; 3 | font-family: var(--em-font-family); 4 | font-size: calc(var(--em-font-size-adjust) * 1em); 5 | font-style: var(--em-font-style); 6 | font-weight: var(--em-font-weight); 7 | line-height: 1.25; 8 | letter-spacing: calc(var(--em-letter-spacing) + var(--letter-spacing, var(--default-letter-spacing))); 9 | color: inherit; 10 | } 11 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/play-filled-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/play-filled-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/generate-icon-lib/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "esModuleInterop": true, 5 | "target": "esnext", 6 | "noImplicitAny": false, 7 | "moduleResolution": "node", 8 | "sourceMap": true, 9 | "baseUrl": ".", 10 | "jsx": "react", 11 | "paths": { 12 | "*": ["node_modules/*", "src/types/*"] 13 | } 14 | }, 15 | "include": ["src/**/*"] 16 | } 17 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/date-field/date-field.props.ts: -------------------------------------------------------------------------------- 1 | import { PropDef, colorProp } from '../../helpers'; 2 | 3 | const sizes = ['1', '2', '3', '4'] as const; 4 | 5 | const dateFieldPropDefs = { 6 | size: { type: 'enum', values: sizes, default: '2' }, 7 | color: colorProp, 8 | } satisfies { 9 | size: PropDef<(typeof sizes)[number]>; 10 | color: typeof colorProp; 11 | }; 12 | 13 | export { dateFieldPropDefs }; 14 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: Request new component 4 | url: https://github.com/whopio/frosted-ui/discussions/new?category=new-component 5 | about: Request a component to be added to Frosted UI 6 | - name: Request documentation 7 | url: https://github.com/whopio/frosted-ui/discussions/new?category=documentation 8 | about: Request documentation enhancements or changes 9 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/x-dot-com-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/x-dot-com-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/collapse-sidebar-filled-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/quote/quote.css: -------------------------------------------------------------------------------- 1 | .fui-Quote { 2 | box-sizing: border-box; 3 | font-family: var(--quote-font-family); 4 | font-size: calc(var(--quote-font-size-adjust) * 1em); 5 | font-style: var(--quote-font-style); 6 | font-weight: var(--quote-font-weight); 7 | line-height: 1.25; 8 | letter-spacing: calc(var(--quote-letter-spacing) + var(--letter-spacing, var(--default-letter-spacing))); 9 | color: inherit; 10 | } 11 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/spinner/spinner.props.ts: -------------------------------------------------------------------------------- 1 | import { PropDef } from '../../helpers'; 2 | 3 | const sizes = ['1', '2', '3', '4', '5', '6'] as const; 4 | 5 | const spinnerPropDefs = { 6 | size: { type: 'enum', values: sizes, default: '2' }, 7 | loading: { type: 'boolean', default: true }, 8 | } satisfies { 9 | size: PropDef<(typeof sizes)[number]>; 10 | loading: PropDef; 11 | }; 12 | 13 | export { spinnerPropDefs }; 14 | -------------------------------------------------------------------------------- /packages/frosted-ui-colors/rollup.config.js: -------------------------------------------------------------------------------- 1 | // rollup.config.js 2 | import typescript from '@rollup/plugin-typescript'; 3 | 4 | export default { 5 | input: 'src/index.ts', 6 | output: [ 7 | { 8 | file: 'index.js', 9 | format: 'cjs', 10 | }, 11 | { 12 | file: 'index.mjs', 13 | format: 'es', 14 | }, 15 | ], 16 | plugins: [ 17 | typescript({ 18 | tsconfig: './tsconfig.json', 19 | }), 20 | ], 21 | }; 22 | -------------------------------------------------------------------------------- /packages/frosted-ui-colors/README.md: -------------------------------------------------------------------------------- 1 | # Frosted UI Colors 2 | 3 | **A gorgeous, accessible color system used by Whop.** 4 | 5 | --- 6 | 7 | ## Documentation 8 | 9 | For full documentation, visit [storybook.whop.dev](https://storybook.whop.dev/?path=/docs/guides-3-color--docs). 10 | 11 | ## Installation 12 | 13 | `pnpm add @frosted-ui/colors` 14 | 15 | ## Acknowledgments 16 | 17 | Frosted UI is heavily based on [Radix Colors](https://www.radix-ui.com/colors). 18 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/x-dot-com-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/x-dot-com-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/x-dot-com-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-react-native/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true, 5 | "baseUrl": ".", 6 | "paths": { 7 | "@/*": [ 8 | "src/*" 9 | ], 10 | "@frosted-ui/react-native": [ 11 | "./src/index.ts" 12 | ] 13 | } 14 | }, 15 | "include": [ 16 | "**/*.ts", 17 | "**/*.tsx", 18 | ".expo/types/**/*.ts", 19 | "expo-env.d.ts" 20 | ] 21 | } -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/collapse-sidebar-filled-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/filter-chip/filter-chip.props.ts: -------------------------------------------------------------------------------- 1 | import type { PropDef } from '../../helpers'; 2 | import { colorProp } from '../../helpers'; 3 | 4 | const sizes = ['1', '2', '3'] as const; 5 | 6 | const filterChipPropDefs = { 7 | size: { type: 'enum', values: sizes, default: '2' }, 8 | color: colorProp, 9 | } satisfies { 10 | size: PropDef<(typeof sizes)[number]>; 11 | color: typeof colorProp; 12 | }; 13 | 14 | export { filterChipPropDefs }; 15 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/styles/utilities/font-weight.css: -------------------------------------------------------------------------------- 1 | .fui-r-weight-light { 2 | font-weight: var(--font-weight-light); 3 | } 4 | 5 | .fui-r-weight-regular { 6 | font-weight: var(--font-weight-regular); 7 | } 8 | 9 | .fui-r-weight-medium { 10 | font-weight: var(--font-weight-medium); 11 | } 12 | 13 | .fui-r-weight-semi-bold { 14 | font-weight: var(--font-weight-semi-bold); 15 | } 16 | 17 | .fui-r-weight-bold { 18 | font-weight: var(--font-weight-bold); 19 | } 20 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/collapse-sidebar-filled-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/collapse-sidebar-filled-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/widget-stack/widget-stack.props.ts: -------------------------------------------------------------------------------- 1 | import { PropDef } from '../../helpers'; 2 | 3 | const orientationValues = ['horizontal', 'vertical'] as const; 4 | 5 | const widgetStackRootPropDefs = { 6 | orientation: { 7 | type: 'enum', 8 | values: orientationValues, 9 | default: 'vertical', 10 | }, 11 | } satisfies { 12 | orientation: PropDef<(typeof orientationValues)[number]>; 13 | }; 14 | 15 | export { widgetStackRootPropDefs }; 16 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/collapse-sidebar-filled-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/button/button.tsx: -------------------------------------------------------------------------------- 1 | import classNames from 'classnames'; 2 | import * as React from 'react'; 3 | import { BaseButton } from '../base-button'; 4 | 5 | interface ButtonProps extends React.ComponentProps {} 6 | 7 | const Button = (props: ButtonProps) => ; 8 | 9 | Button.displayName = 'Button'; 10 | 11 | export { Button }; 12 | export type { ButtonProps }; 13 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/twitch-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/twitch-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/twitch-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/twitch-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/twitch-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/separator/separator.props.ts: -------------------------------------------------------------------------------- 1 | import type { PropDef } from '../../helpers'; 2 | import { colorProp } from '../../helpers'; 3 | 4 | const sizes = ['1', '2', '3', '4'] as const; 5 | 6 | const separatorPropDefs = { 7 | size: { type: 'enum', values: sizes, default: '1' }, 8 | color: { ...colorProp, default: 'gray' }, 9 | } satisfies { 10 | size: PropDef<(typeof sizes)[number]>; 11 | color: typeof colorProp; 12 | }; 13 | 14 | export { separatorPropDefs }; 15 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/pause-filled-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-native-colors/README.md: -------------------------------------------------------------------------------- 1 | # Frosted UI Swift Colors 2 | 3 | Generating SwiftUI color assets from [Radix Colors](https://github.com/radix-ui/colors). 4 | 5 | --- 6 | 7 | ## Documentation 8 | 9 | The Swift color assets are zipped in a `frosted-ui-swift-colors.zip` file. 10 | The Kotlin color assets are in the `kotlin-colors/Color.kt` file. 11 | 12 | If you want to update the color assets (and generate new `zip` file) just run this command: 13 | 14 | ```bash 15 | pnpm build 16 | ``` 17 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/pause-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/plus-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/plus-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/switch/switch.props.ts: -------------------------------------------------------------------------------- 1 | import { PropDef, colorProp, highContrastProp } from '../../helpers'; 2 | 3 | const sizes = ['1', '2', '3'] as const; 4 | 5 | const switchPropDefs = { 6 | size: { type: 'enum', values: sizes, default: '2' }, 7 | color: colorProp, 8 | highContrast: highContrastProp, 9 | } satisfies { 10 | size: PropDef<(typeof sizes)[number]>; 11 | color: typeof colorProp; 12 | highContrast: typeof highContrastProp; 13 | }; 14 | 15 | export { switchPropDefs }; 16 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/lock-filled-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/collapse-sidebar-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/plus-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/plus-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/plus-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/chevron-down-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/chevron-left-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/chevron-up-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/chevron-up-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/chevron-up-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/lock-filled-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/pause-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/pause-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-react-native/app/+not-found.tsx: -------------------------------------------------------------------------------- 1 | import { Text } from '@frosted-ui/react-native'; 2 | import { Link, Stack } from 'expo-router'; 3 | import { View } from 'react-native'; 4 | 5 | export default function NotFoundScreen() { 6 | return ( 7 | <> 8 | 9 | 10 | This screen doesn't exist. 11 | 12 | 13 | Go to home screen! 14 | 15 | 16 | 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/card/card.props.ts: -------------------------------------------------------------------------------- 1 | import type { PropDef } from '../../helpers'; 2 | 3 | const sizes = ['1', '2', '3', '4', '5'] as const; 4 | const variants = ['surface', 'classic', 'ghost'] as const; 5 | 6 | const cardPropDefs = { 7 | size: { type: 'enum', values: sizes, default: '1' }, 8 | variant: { type: 'enum', values: variants, default: 'surface' }, 9 | } satisfies { 10 | size: PropDef<(typeof sizes)[number]>; 11 | variant: PropDef<(typeof variants)[number]>; 12 | }; 13 | 14 | export { cardPropDefs }; 15 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/icon-button/icon-button.tsx: -------------------------------------------------------------------------------- 1 | import classNames from 'classnames'; 2 | import * as React from 'react'; 3 | import { BaseButton } from '../base-button'; 4 | 5 | interface IconButtonProps extends React.ComponentProps {} 6 | 7 | const IconButton = (props: IconButtonProps) => ( 8 | 9 | ); 10 | IconButton.displayName = 'IconButton'; 11 | 12 | export { IconButton }; 13 | export type { IconButtonProps }; 14 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/chevron-down-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/chevron-down-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/chevron-down-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/chevron-left-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/chevron-left-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/chevron-left-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/chevron-right-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/chevron-right-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/chevron-right-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/chevron-right-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/chevron-up-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/three-dots-horizontal-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/three-dots-vertical-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/blockquote/blockquote.props.ts: -------------------------------------------------------------------------------- 1 | import { textPropDefs } from '../text/text.props'; 2 | 3 | const blockquotePropDefs = { 4 | size: textPropDefs.size, 5 | weight: textPropDefs.weight, 6 | color: textPropDefs.color, 7 | highContrast: textPropDefs.highContrast, 8 | } satisfies { 9 | size: typeof textPropDefs.size; 10 | weight: typeof textPropDefs.weight; 11 | color: typeof textPropDefs.color; 12 | highContrast: typeof textPropDefs.highContrast; 13 | }; 14 | 15 | export { blockquotePropDefs }; 16 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/lock-filled-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/message-filled-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/trading-view-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/trading-view-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/styles/scrollbars.css: -------------------------------------------------------------------------------- 1 | *::-webkit-scrollbar { 2 | width: var(--space-1); 3 | height: var(--space-1); 4 | } 5 | *::-webkit-scrollbar-track { 6 | background-color: var(--gray-a3); 7 | } 8 | 9 | *::-webkit-scrollbar-corner { 10 | background-color: var(--gray-a3); 11 | } 12 | *::-webkit-scrollbar-thumb { 13 | border-radius: var(--space-1); 14 | background-color: var(--gray-a8); 15 | } 16 | @media (hover: hover) { 17 | :hover::-webkit-scrollbar-thumb:hover { 18 | background-color: var(--gray-a9); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/checkmark-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/italic-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/pause-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/trading-view-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/trading-view-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/trading-view-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/arrow-fat-down-filled-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/arrow-fat-up-filled-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/arrow-fat-up-filled-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/arrow-fat-up-filled-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/checkmark-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/collapse-sidebar-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/pause-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/slider/slider.props.ts: -------------------------------------------------------------------------------- 1 | import type { PropDef } from '../../helpers'; 2 | import { colorProp, highContrastProp } from '../../helpers'; 3 | 4 | const sizes = ['1', '2', '3'] as const; 5 | 6 | const sliderPropDefs = { 7 | size: { type: 'enum', values: sizes, default: '2' }, 8 | color: colorProp, 9 | highContrast: highContrastProp, 10 | } satisfies { 11 | size: PropDef<(typeof sizes)[number]>; 12 | color: typeof colorProp; 13 | highContrast: typeof highContrastProp; 14 | }; 15 | 16 | export { sliderPropDefs }; 17 | -------------------------------------------------------------------------------- /apps/tailwind/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | -------------------------------------------------------------------------------- /packages/frosted-ui-colors/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": ".", 4 | "declarationDir": "types", 5 | "module": "esnext", 6 | "target": "ES2019", 7 | "lib": ["esnext"], 8 | "declaration": true, 9 | "esModuleInterop": true, 10 | "allowSyntheticDefaultImports": true, 11 | "strict": true, 12 | "forceConsistentCasingInFileNames": true, 13 | "moduleResolution": "node", 14 | "isolatedModules": true 15 | }, 16 | "include": ["./src"], 17 | "exclude": ["/*.css", "/index.js", "/index.mjs"] 18 | } 19 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/arrow-fat-down-filled-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/arrow-fat-down-filled-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/arrow-fat-down-filled-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/arrow-fat-down-filled-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/arrow-fat-up-filled-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/arrow-fat-up-filled-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/heart-filled-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/checkbox/checkbox.props.ts: -------------------------------------------------------------------------------- 1 | import type { PropDef } from '../../helpers'; 2 | import { colorProp, highContrastProp } from '../../helpers'; 3 | 4 | const sizes = ['1', '2', '3'] as const; 5 | 6 | const checkboxPropDefs = { 7 | size: { type: 'enum', values: sizes, default: '2' }, 8 | color: colorProp, 9 | highContrast: highContrastProp, 10 | } satisfies { 11 | size: PropDef<(typeof sizes)[number]>; 12 | color: typeof colorProp; 13 | highContrast: typeof highContrastProp; 14 | }; 15 | 16 | export { checkboxPropDefs }; 17 | -------------------------------------------------------------------------------- /packages/eslint-config-custom/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "eslint-config-custom", 3 | "version": "0.0.0", 4 | "private": true, 5 | "main": ".eslintrc.js", 6 | "license": "MIT", 7 | "dependencies": { 8 | "eslint-config-prettier": "^8.3.0", 9 | "eslint-config-turbo": "latest" 10 | }, 11 | "devDependencies": { 12 | "@typescript-eslint/eslint-plugin": "^5.50.0", 13 | "@typescript-eslint/parser": "^5.50.0", 14 | "eslint": "^7.32.0", 15 | "typescript": "^4.9.4" 16 | }, 17 | "publishConfig": { 18 | "access": "public" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/chevron-up-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/collapse-sidebar-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/collapse-sidebar-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/cursor-filled-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/heart-filled-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/heart-filled-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/lock-filled-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/message-filled-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/radio-group/radio-group.props.ts: -------------------------------------------------------------------------------- 1 | import type { PropDef } from '../../helpers'; 2 | import { colorProp, highContrastProp } from '../../helpers'; 3 | 4 | const sizes = ['1', '2', '3'] as const; 5 | 6 | const radioGroupPropDefs = { 7 | size: { type: 'enum', values: sizes, default: '2' }, 8 | color: colorProp, 9 | highContrast: highContrastProp, 10 | } satisfies { 11 | size: PropDef<(typeof sizes)[number]>; 12 | color: typeof colorProp; 13 | highContrast: typeof highContrastProp; 14 | }; 15 | 16 | export { radioGroupPropDefs }; 17 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/chevron-down-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/chevron-left-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/chevron-right-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/collapse-sidebar-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/cursor-filled-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/cursor-filled-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/heart-filled-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/heart-filled-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui/postcss.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-var-requires */ 2 | /* eslint-disable no-undef */ 3 | const path = require('path'); 4 | 5 | module.exports = { 6 | plugins: [ 7 | require('postcss-import')({ 8 | path: [path.relative(process.cwd(), '../')], 9 | }), 10 | require('postcss-nesting'), 11 | require('./postcss-frosted-ui'), 12 | require('postcss-custom-media'), 13 | require('postcss-combine-duplicated-selectors'), 14 | require('postcss-discard-empty'), 15 | require('autoprefixer'), 16 | ], 17 | }; 18 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/mail-filled-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/mail-filled-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/three-dots-horizontal-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/three-dots-vertical-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/popover/popover.props.ts: -------------------------------------------------------------------------------- 1 | import type { PropDef } from '../../helpers'; 2 | 3 | const contentSizes = ['1', '2', '3', '4'] as const; 4 | 5 | const variants = ['solid', 'translucent'] as const; 6 | 7 | const popoverContentPropDefs = { 8 | size: { type: 'enum', values: contentSizes, default: '2' }, 9 | variant: { type: 'enum', values: variants, default: 'translucent' }, 10 | } satisfies { 11 | size: PropDef<(typeof contentSizes)[number]>; 12 | variant: PropDef<(typeof variants)[number]>; 13 | }; 14 | 15 | export { popoverContentPropDefs }; 16 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/scroll-area/scroll-area.props.ts: -------------------------------------------------------------------------------- 1 | import type { PropDef } from '../../helpers'; 2 | 3 | const sizes = ['1', '2', '3'] as const; 4 | const scrollbarsValues = ['vertical', 'horizontal', 'both'] as const; 5 | 6 | const scrollAreaPropDefs = { 7 | size: { type: 'enum', values: sizes, default: '1' }, 8 | scrollbars: { type: 'enum', values: scrollbarsValues, default: 'both' }, 9 | } satisfies { 10 | size: PropDef<(typeof sizes)[number]>; 11 | scrollbars: PropDef<(typeof scrollbarsValues)[number]>; 12 | }; 13 | 14 | export { scrollAreaPropDefs }; 15 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/cursor-filled-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/pause-filled-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/play-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/hover-card/hover-card.props.ts: -------------------------------------------------------------------------------- 1 | import type { PropDef } from '../../helpers'; 2 | 3 | const contentSizes = ['1', '2', '3'] as const; 4 | 5 | const variants = ['solid', 'translucent'] as const; 6 | 7 | const hoverCardContentPropDefs = { 8 | size: { type: 'enum', values: contentSizes, default: '2' }, 9 | variant: { type: 'enum', values: variants, default: 'translucent' }, 10 | } satisfies { 11 | size: PropDef<(typeof contentSizes)[number]>; 12 | variant: PropDef<(typeof variants)[number]>; 13 | }; 14 | 15 | export { hoverCardContentPropDefs }; 16 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/clock-filled-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/cursor-filled-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/lock-filled-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/ban-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/clock-filled-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/clock-filled-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/message-filled-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src/**/*"], 3 | "compilerOptions": { 4 | "forceConsistentCasingInFileNames": true, 5 | "resolveJsonModule": true, 6 | "moduleResolution": "node", 7 | "esModuleInterop": true, 8 | "noImplicitAny": false, 9 | "skipLibCheck": true, 10 | "module": "esnext", 11 | "sourceMap": true, 12 | "outDir": "dist", 13 | "target": "es5", 14 | "baseUrl": ".", 15 | "declaration": true, 16 | "jsx": "react", 17 | "paths": { 18 | "*": ["node_modules/*", "src/types/*"] 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /.github/.kodiak.toml: -------------------------------------------------------------------------------- 1 | # .kodiak.toml 2 | version = 1 3 | 4 | [merge] 5 | automerge_label = "ship it" 6 | require_automerge_label = false 7 | method = "squash" 8 | delete_branch_on_merge = true 9 | optimistic_updates = true 10 | prioritize_ready_to_merge = true 11 | notify_on_conflict = false 12 | blocking_labels = ["no automerge"] 13 | 14 | [merge.message] 15 | title = "pull_request_title" 16 | body = "pull_request_body" 17 | include_coauthors = false 18 | include_pr_number = true 19 | body_type = "markdown" 20 | strip_html_comments = true 21 | 22 | [update] 23 | autoupdate_label = "keep up-to-date" 24 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/ban-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/clock-filled-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/mail-filled-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/checkmark-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/checkmark-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/info-filled-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/mail-filled-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/progress/progress.props.ts: -------------------------------------------------------------------------------- 1 | import type { PropDef } from '../../helpers'; 2 | import { colorProp, highContrastProp } from '../../helpers'; 3 | 4 | const sizes = ['1', '2', '3', '4', '5', '6'] as const; 5 | 6 | const progressPropDefs = { 7 | size: { type: 'enum', values: sizes, default: '6' }, 8 | color: { ...colorProp, default: undefined }, 9 | highContrast: highContrastProp, 10 | } satisfies { 11 | size: PropDef<(typeof sizes)[number]>; 12 | color: typeof colorProp; 13 | highContrast: typeof highContrastProp; 14 | }; 15 | 16 | export { progressPropDefs }; 17 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/ban-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/ban-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/play-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/play-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/three-dots-horizontal-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/checkmark-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/k-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/k-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/mail-filled-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui/.stylelintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rules: { 3 | // Disallow element type selector. 4 | 'selector-max-type': 0, 5 | // Allow 0,1,1 specificity for pseudo elements and effectively cap at 0,1,0 in all other cases. 6 | // This is so that Tailwind classes work as expected. 7 | // TODO: enable this and fix specificity issues 8 | // 'selector-max-specificity': ['0,1,1'], 9 | // Enforce prefixes on classnames and keyframes 10 | 'selector-class-pattern': /^-?fui-|^frosted-ui$|^(light|dark)(-theme)?$/, 11 | 'keyframes-name-pattern': /^fui-([a-z]|-)+$/, 12 | }, 13 | }; 14 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/italic-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/k-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/text-area/text-area.props.ts: -------------------------------------------------------------------------------- 1 | import { PropDef, colorProp } from '../../helpers'; 2 | 3 | const sizes = ['1', '2', '3', '4'] as const; 4 | const variants = ['surface', 'soft'] as const; 5 | 6 | const textAreaPropDefs = { 7 | size: { type: 'enum', values: sizes, default: '2' }, 8 | variant: { type: 'enum', values: variants, default: 'surface' }, 9 | color: { ...colorProp, default: 'gray' }, 10 | } satisfies { 11 | size: PropDef<(typeof sizes)[number]>; 12 | variant: PropDef<(typeof variants)[number]>; 13 | color: typeof colorProp; 14 | }; 15 | 16 | export { textAreaPropDefs }; 17 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/facebook-filled-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/k-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/k-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/message-filled-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/paper-airplane-filled-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/paper-airplane-filled-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/paper-airplane-filled-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/paper-airplane-up-filled-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/paper-airplane-up-filled-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/paper-airplane-up-filled-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/pause-filled-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/underline-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-react-native/app/_accent-color-context.tsx: -------------------------------------------------------------------------------- 1 | import type { AccentColor } from '@frosted-ui/react-native'; 2 | import * as React from 'react'; 3 | 4 | type AccentColorContextValue = { 5 | accentColor: AccentColor; 6 | setAccentColor: (color: AccentColor) => void; 7 | }; 8 | 9 | export const AccentColorContext = React.createContext({ 10 | accentColor: 'blue', 11 | // eslint-disable-next-line @typescript-eslint/no-empty-function 12 | setAccentColor: () => {}, 13 | }); 14 | 15 | export function useAccentColorConfig() { 16 | return React.useContext(AccentColorContext); 17 | } 18 | -------------------------------------------------------------------------------- /apps/tailwind/css.d.ts: -------------------------------------------------------------------------------- 1 | // My css.d.ts file 2 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 3 | import type * as CSS from 'csstype'; 4 | 5 | declare module 'csstype' { 6 | interface Properties { 7 | // WebkitRocketLauncher?: string; 8 | 9 | // Add a CSS Custom Property 10 | // '--theme-color'?: 'black' | 'white'; 11 | 12 | // Allow namespaced CSS Custom Properties 13 | // [index: `--theme-${string}`]: any; 14 | 15 | // Allow any CSS Custom Properties 16 | [index: `--${string}`]: unknown; 17 | 18 | // ...or allow any other property 19 | // [index: string]: any; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/clock-filled-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/credit-card-filled-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 9 | 10 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/italic-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/paper-airplane-filled-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/paper-airplane-filled-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/paper-airplane-up-filled-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/paper-airplane-up-filled-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/play-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/arrow-down-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/arrow-left-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/arrow-right-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/arrow-right-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/arrow-right-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/arrow-up-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/credit-card-filled-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 9 | 10 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/italic-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/play-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/three-dots-vertical-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui/.storybook/stories/Introduction.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from '@storybook/blocks'; 2 | import HeroImg from './assets/hero.png'; 3 | 4 | 5 | 6 | # Welcome to Frosted UI 7 | 8 | Frosted is the design system used by [Whop](https://whop.com) and heavily based on [Radix Themes](https://www.radix-ui.com/). 9 | 10 | The library is still a work in progress so you might expect some breaking changes. 11 | 12 | If you have any questions or suggestions, feel free to open an issue on [GitHub](https://github.com/whopio/frosted-ui). 13 | 14 | Modern user interface in dark mode 15 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/arrow-left-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/arrow-left-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/compass-filled-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/credit-card-filled-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 9 | 10 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/facebook-filled-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/pause-filled-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/arrow-left-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/arrow-right-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/credit-card-filled-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 9 | 10 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/credit-card-filled-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 9 | 10 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/pin-filled-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/arrow-down-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/arrow-up-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/calendar-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/italic-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/message-filled-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/pin-filled-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui/postcss.config.lite.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-var-requires */ 2 | /* eslint-disable no-undef */ 3 | const path = require('path'); 4 | const removeP3 = require('./postcss-remove-p3'); 5 | 6 | module.exports = { 7 | plugins: [ 8 | require('postcss-import')({ 9 | path: [path.relative(process.cwd(), '../')], 10 | }), 11 | require('postcss-nesting'), 12 | require('./postcss-frosted-ui'), 13 | require('postcss-custom-media'), 14 | require('postcss-combine-duplicated-selectors'), 15 | removeP3(), 16 | require('postcss-discard-empty'), 17 | require('autoprefixer'), 18 | ], 19 | }; 20 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/avatar-group/avatar-group.props.ts: -------------------------------------------------------------------------------- 1 | import { colorProp, type PropDef } from '../../helpers'; 2 | 3 | const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const; 4 | const shapes = ['circle', 'square'] as const; 5 | 6 | const avatarGroupPropDefs = { 7 | color: { ...colorProp, default: 'gray' }, 8 | size: { type: 'enum', values: sizes, default: '3' }, 9 | shape: { type: 'enum', values: shapes, default: 'circle' }, 10 | } satisfies { 11 | color: typeof colorProp; 12 | size: PropDef<(typeof sizes)[number]>; 13 | shape: PropDef<(typeof shapes)[number]>; 14 | }; 15 | 16 | export { avatarGroupPropDefs }; 17 | -------------------------------------------------------------------------------- /packages/frosted-ui/src/components/circular-progress/circular-progress.props.ts: -------------------------------------------------------------------------------- 1 | import type { PropDef } from '../../helpers'; 2 | import { colorProp, highContrastProp } from '../../helpers'; 3 | 4 | const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const; 5 | 6 | const circularProgressPropDefs = { 7 | size: { type: 'enum', values: sizes, default: '3' }, 8 | color: { ...colorProp, default: undefined }, 9 | highContrast: highContrastProp, 10 | } satisfies { 11 | size: PropDef<(typeof sizes)[number]>; 12 | color: typeof colorProp; 13 | highContrast: typeof highContrastProp; 14 | }; 15 | 16 | export { circularProgressPropDefs }; 17 | -------------------------------------------------------------------------------- /packages/tsconfig/base.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "display": "Default", 4 | "compilerOptions": { 5 | "composite": false, 6 | "declaration": true, 7 | "declarationMap": true, 8 | "esModuleInterop": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "inlineSources": false, 11 | "isolatedModules": true, 12 | "moduleResolution": "node", 13 | "noUnusedLocals": true, 14 | "noUnusedParameters": true, 15 | "preserveWatchOutput": true, 16 | "skipLibCheck": true, 17 | "strict": true, 18 | "jsx": "react-jsx" 19 | }, 20 | "exclude": ["node_modules"] 21 | } 22 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "tailwindCSS.experimental.classRegex": [ 3 | ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"], 4 | ["cn\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"] 5 | ], 6 | "editor.codeActionsOnSave": { 7 | "source.addMissingImports": "explicit", 8 | "source.fixAll": "explicit", 9 | "source.fixAll.eslint": "explicit", 10 | "source.sortMembers": "explicit", 11 | "source.organizeImports": "explicit" 12 | }, 13 | "editor.defaultFormatter": "esbenp.prettier-vscode", 14 | "editor.formatOnPaste": true, 15 | "editor.formatOnSave": true, 16 | "typescript.updateImportsOnFileMove.enabled": "always" 17 | } 18 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/arrow-down-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/arrow-down-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/arrow-up-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/arrow-up-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/lock-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/pause-filled-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/picture-in-picture-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/pin-filled-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/pin-filled-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/three-dots-horizontal-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/three-dots-vertical-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/filter-down-24.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/pin-filled-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/thumb-down-filled-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/thumb-up-filled-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/menu-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/compass-filled-32.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/filter-down-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/menu-16.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /packages/frosted-ui-icons/icons/arrow-right-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | --------------------------------------------------------------------------------