├── .eslintignore ├── .eslintrc.json ├── .gitignore ├── .prettierignore ├── .prettierrc ├── .vscode └── settings.json ├── README.md ├── app ├── [component] │ ├── layout.tsx │ └── page.tsx ├── layout.tsx └── page.tsx ├── component-data ├── react │ ├── shared │ │ ├── 404 │ │ │ ├── App.js │ │ │ ├── index.ts │ │ │ └── styles.css │ │ └── wrapper │ │ │ ├── index.css │ │ │ └── index.ts │ ├── tailwind │ │ └── inline │ │ │ └── checkbox │ │ │ ├── index.ts │ │ │ └── styles.ts │ └── vanilla_css │ │ └── scoped │ │ ├── accordion │ │ ├── AccordionIcon.js │ │ ├── App.js │ │ ├── index.ts │ │ └── styles.css │ │ ├── checkbox │ │ ├── App.js │ │ ├── CheckIcon.js │ │ ├── MinusIcon.js │ │ ├── index.ts │ │ └── styles.css │ │ ├── dialog │ │ ├── App.js │ │ ├── CloseIcon.js │ │ ├── index.ts │ │ └── styles.css │ │ ├── hover-card │ │ ├── App.js │ │ ├── MapPinIcon.js │ │ ├── index.ts │ │ └── styles.css │ │ ├── menu │ │ ├── App.js │ │ ├── RightIcon.js │ │ ├── index.ts │ │ └── styles.css │ │ ├── number-input │ │ ├── App.js │ │ ├── ChevronDownIcon.js │ │ ├── ChevronUpIcon.js │ │ ├── index.ts │ │ └── styles.css │ │ ├── pagination │ │ ├── App.js │ │ ├── index.ts │ │ └── styles.css │ │ ├── pin-input │ │ ├── App.js │ │ ├── index.ts │ │ └── styles.css │ │ ├── popover │ │ ├── App.js │ │ ├── index.ts │ │ └── styles.css │ │ ├── radio-group │ │ ├── App.js │ │ ├── index.ts │ │ └── styles.css │ │ ├── range-slider │ │ ├── App.js │ │ └── index.ts │ │ ├── rating-group │ │ ├── App.js │ │ ├── index.ts │ │ └── styles.css │ │ ├── select │ │ ├── App.js │ │ ├── SelectIcon.js │ │ ├── index.ts │ │ └── styles.css │ │ ├── slider │ │ ├── App.js │ │ ├── index.ts │ │ └── styles.css │ │ ├── splitter │ │ ├── App.js │ │ ├── index.ts │ │ └── styles.css │ │ ├── tabs │ │ ├── App.js │ │ ├── index.ts │ │ └── styles.css │ │ ├── tags-input │ │ ├── App.js │ │ ├── index.ts │ │ └── styles.css │ │ ├── toast │ │ ├── App.js │ │ ├── CloseIcon.js │ │ ├── index.ts │ │ └── styles.css │ │ └── tooltip │ │ ├── App.js │ │ ├── index.ts │ │ └── styles.css ├── solid │ ├── shared │ │ ├── 404 │ │ │ └── index.ts │ │ └── wrapper │ │ │ ├── index.html │ │ │ ├── index.ts │ │ │ └── vite.config.js │ ├── tailwind │ │ └── inline │ │ │ └── checkbox │ │ │ └── index.ts │ └── vanilla_css │ │ └── scoped │ │ ├── accordion │ │ ├── AccordionIcon.js │ │ ├── App.js │ │ └── index.ts │ │ └── checkbox │ │ ├── App.js │ │ ├── CheckIcon.js │ │ ├── MinusIcon.js │ │ └── index.ts ├── utils.ts └── vue │ ├── shared │ ├── 404 │ │ └── index.ts │ └── wrapper │ │ └── index.ts │ ├── tailwind │ └── inline │ │ └── checkbox │ │ └── index.ts │ └── vanilla_css │ └── scoped │ ├── checkbox │ ├── App.vue │ ├── CheckIcon.vue │ ├── MinusIcon.vue │ └── index.ts │ ├── popover │ ├── App.vue │ └── index.ts │ └── select │ ├── App.vue │ ├── SelectIcon.vue │ └── index.ts ├── components ├── CloseButton.tsx ├── CodeEditor.tsx ├── ColorModeButton.tsx ├── ColorModeScript.tsx ├── ComponentControls │ ├── FrameworkSwitch.tsx │ ├── Navigation │ │ ├── Search.tsx │ │ └── index.tsx │ ├── StyleSolutionSwitch.tsx │ ├── StyleTypeSwitch.tsx │ └── index.tsx ├── CopyCodeButton.tsx ├── EditorTabs.tsx ├── FormatCodeButton.tsx ├── IconButton.tsx ├── LinkOverlay.tsx ├── Navbar.tsx ├── OpenInCodesandboxButton.tsx ├── SelectIcon.tsx ├── button.tsx └── card.tsx ├── index.css ├── next.config.js ├── package.json ├── panda.config.ts ├── pnpm-lock.yaml ├── postcss.config.js ├── theme ├── global-css.ts ├── recipes │ ├── button.ts │ ├── dialog.ts │ ├── index.ts │ ├── input.ts │ ├── select.ts │ └── splitter.ts └── text-styles.ts ├── tsconfig.json └── utils ├── component-config ├── constants.ts └── index.ts ├── component-setup ├── constants.ts └── index.ts ├── types.ts ├── useColorMode.ts ├── useComponentConfig.ts ├── useComponentSetup.ts ├── useComponentsSearch.ts └── useSyncSandboxColorMode.ts /.eslintignore: -------------------------------------------------------------------------------- 1 | component-data -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.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 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | 38 | ## Panda 39 | design-system 40 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .next 2 | .vscode 3 | .eslintrc.json 4 | next-env.d.ts -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "trailingComma": "es5", 4 | "singleQuote": false, 5 | "semi": true, 6 | 7 | "plugins": ["@trivago/prettier-plugin-sort-imports"], 8 | "importOrder": [ 9 | "^design-system/(.*)$", 10 | "^components/(.*)$", 11 | "^utils/(.*)$", 12 | "^[./]" 13 | ], 14 | "importOrderSeparation": true, 15 | "importOrderSortSpecifiers": true 16 | } 17 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules/.pnpm/typescript@5.0.2/node_modules/typescript/lib", 3 | "typescript.enablePromptUseWorkspaceTsdk": true 4 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Arkxamples 2 | 3 | Sandbox to view [Ark UI](https://github.com/chakra-ui/ark) styling examples. 4 | 5 | Built with [CSS panda](), [Sandpack](sandpack.codesandbox.io/) and ❤️ 6 | 7 | ## Contribution 8 | 9 | Feel free to open a pull request for any of the unchecked components. The only requirement, is that it matches the **Vanilla CSS** version. By match, i mean _Look like it_ 😉 10 | 11 | ## State 12 | 13 | ### Vanilla CSS 14 | 15 | | Scoped | React | Vue | Solid | 16 | | ------------ | ----- | --- | ----- | 17 | | Accordion | 🟢 | ⚪ | 🟢 | 18 | | Carousel | ⚪ | ⚪ | ⚪ | 19 | | Checkbox | 🟢 | 🟢 | 🟢 | 20 | | Dialog | 🟢 | ⚪ | ⚪ | 21 | | Combobox | ⚪ | ⚪ | ⚪ | 22 | | Editable | ⚪ | ⚪ | ⚪ | 23 | | Hover Card | 🟢 | ⚪ | ⚪ | 24 | | Menu | 🟢 | ⚪ | ⚪ | 25 | | Number Input | 🟢 | ⚪ | ⚪ | 26 | | Pagination | 🟢 | ⚪ | ⚪ | 27 | | Pin Input | 🟢 | ⚪ | ⚪ | 28 | | Popover | 🟢 | 🟢 | ⚪ | 29 | | Radio Group | 🟢 | ⚪ | ⚪ | 30 | | Range Slider | 🟢 | ⚪ | ⚪ | 31 | | Rating | 🟢 | ⚪ | ⚪ | 32 | | Select | 🟢 | 🟢 | ⚪ | 33 | | Slider | 🟢 | ⚪ | ⚪ | 34 | | Splitter | 🟢 | ⚪ | ⚪ | 35 | | Tabs | 🟢 | ⚪ | ⚪ | 36 | | Tags Input | 🟢 | ⚪ | ⚪ | 37 | | Toast | 🟢 | ⚪ | ⚪ | 38 | | Tooltip | 🟢 | ⚪ | ⚪ | 39 | 40 | ### Tailwind 41 | 42 | | Inline | React | Vue | Solid | 43 | | ------------ | ----- | --- | ----- | 44 | | Accordion | ⚪ | ⚪ | ⚪ | 45 | | Carousel | ⚪ | ⚪ | ⚪ | 46 | | Checkbox | 🟢 | 🟢 | 🟢 | 47 | | Dialog | ⚪ | ⚪ | ⚪ | 48 | | Combobox | ⚪ | ⚪ | ⚪ | 49 | | Editable | ⚪ | ⚪ | ⚪ | 50 | | Hover Card | ⚪ | ⚪ | ⚪ | 51 | | Menu | ⚪ | ⚪ | ⚪ | 52 | | Number Input | ⚪ | ⚪ | ⚪ | 53 | | Pagination | ⚪ | ⚪ | ⚪ | 54 | | Pin Input | ⚪ | ⚪ | ⚪ | 55 | | Popover | ⚪ | ⚪ | ⚪ | 56 | | Radio Group | ⚪ | ⚪ | ⚪ | 57 | | Range Slider | ⚪ | ⚪ | ⚪ | 58 | | Rating | ⚪ | ⚪ | ⚪ | 59 | | Select | ⚪ | ⚪ | ⚪ | 60 | | Slider | ⚪ | ⚪ | ⚪ | 61 | | Splitter | ⚪ | ⚪ | ⚪ | 62 | | Tabs | ⚪ | ⚪ | ⚪ | 63 | | Tags Input | ⚪ | ⚪ | ⚪ | 64 | | Toast | ⚪ | ⚪ | ⚪ | 65 | | Tooltip | ⚪ | ⚪ | ⚪ | 66 | 67 | 93 | -------------------------------------------------------------------------------- /app/[component]/layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { SandpackLayout, SandpackProvider } from "@codesandbox/sandpack-react"; 4 | import { PropsWithChildren } from "react"; 5 | 6 | import { formatFiles } from "utils/component-setup"; 7 | import { getArkPackage, templates } from "utils/component-setup/constants"; 8 | import { ComponentId } from "utils/types"; 9 | import { useColorMode } from "utils/useColorMode"; 10 | import { useComponentConfig } from "utils/useComponentConfig"; 11 | import { useComponentSetup } from "utils/useComponentSetup"; 12 | 13 | const ComponentLayout = ( 14 | props: PropsWithChildren & { params: { component: ComponentId } } 15 | ) => { 16 | const { component: componentId } = props.params; 17 | 18 | const { colorMode } = useColorMode(); 19 | 20 | const componentDetails = useComponentSetup(componentId); 21 | 22 | const componentConfig = useComponentConfig(); 23 | 24 | if (!componentConfig) return "Loading..."; 25 | 26 | const { framework, styleSolution } = componentConfig; 27 | 28 | return ( 29 | 46 | {props.children} 47 | 48 | ); 49 | }; 50 | 51 | export default ComponentLayout; 52 | -------------------------------------------------------------------------------- /app/[component]/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Splitter, SplitterPanel, SplitterResizeTrigger } from "@ark-ui/react"; 4 | import { SandpackPreview } from "@codesandbox/sandpack-react"; 5 | 6 | import { css, cx } from "design-system/css"; 7 | import { panda } from "design-system/jsx"; 8 | import { splitter } from "design-system/recipes"; 9 | 10 | import { CodeEditor } from "components/CodeEditor"; 11 | import { ComponentControls } from "components/ComponentControls"; 12 | import { Navbar } from "components/Navbar"; 13 | 14 | import { getComponent } from "utils/component-setup"; 15 | import { ComponentParams } from "utils/types"; 16 | import { useSyncSandboxColorMode } from "utils/useSyncSandboxColorMode"; 17 | 18 | export default function Component(props: { params: ComponentParams }) { 19 | const { component: componentId } = props.params; 20 | const component = getComponent(componentId as any); 21 | 22 | useSyncSandboxColorMode(); 23 | 24 | return ( 25 | <> 26 | 42 | 43 | 47 | 48 | 49 | 55 | 56 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | ); 70 | } 71 | -------------------------------------------------------------------------------- /app/layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { cx } from "@/panda/css"; 4 | import { getSandpackCssText } from "@codesandbox/sandpack-react"; 5 | import { Fira_Code, Inter } from "next/font/google"; 6 | import type { PropsWithChildren } from "react"; 7 | 8 | // import "design-system/styles.css"; 9 | import { ColorModeScript } from "components/ColorModeScript"; 10 | 11 | import "../index.css"; 12 | 13 | const inter = Inter({ subsets: ["latin"], variable: "--font-inter" }); 14 | const firaCode = Fira_Code({ 15 | subsets: ["latin"], 16 | variable: "--font-fira-code", 17 | }); 18 | 19 | const RootLayout = (props: PropsWithChildren) => { 20 | return ( 21 | 22 | 23 | 24 | 25 |