├── .npmrc ├── src ├── app.css ├── lib │ ├── assets │ │ ├── demo-dark.png │ │ ├── demo-light.png │ │ ├── demo-page.png │ │ ├── login-form.png │ │ ├── dummy-project.png │ │ ├── login-form-light.png │ │ ├── delete-confirmation.png │ │ ├── delete-confirmation-light.png │ │ ├── google.svg │ │ └── favicon.svg │ ├── docs-components │ │ ├── playground │ │ │ ├── index.ts │ │ │ └── playground.svelte │ │ ├── arrow-navigation │ │ │ └── ArrowNavigation.svelte │ │ └── nav-route │ │ │ └── NavRoute.svelte │ ├── util │ │ ├── to-array.ts │ │ ├── utils.ts │ │ ├── to-map.ts │ │ ├── find-child.ts │ │ ├── find-ancestor.ts │ │ └── ip-address.ts │ ├── label │ │ └── Label.svelte │ ├── skeleton │ │ ├── Skeleton.svelte │ │ └── SkeletonContainer.svelte │ ├── center │ │ └── Center.svelte │ ├── spacer │ │ └── Spacer.svelte │ ├── icons │ │ ├── EllipsisIcon.svelte │ │ ├── ChevronIcon.svelte │ │ ├── CheckMarkIcon.svelte │ │ ├── MenuIcon.svelte │ │ ├── PlusIcon.svelte │ │ ├── GridIcon.svelte │ │ ├── ListIcon.svelte │ │ ├── LockIcon.svelte │ │ ├── XIcon.svelte │ │ ├── CloneIcon.svelte │ │ ├── DesktopIcon.svelte │ │ ├── ChevronUpDownIcon.svelte │ │ ├── SearchIcon.svelte │ │ ├── EyeIcon.svelte │ │ ├── SunIcon.svelte │ │ ├── EditIcon.svelte │ │ ├── SvelteIcon.svelte │ │ ├── GithubIcon.svelte │ │ ├── CommandIcon.svelte │ │ ├── MoonIcon.svelte │ │ └── EyeSlashIcon.svelte │ ├── buttongroup │ │ └── ButtonGroup.svelte │ ├── display │ │ └── Display.svelte │ ├── link │ │ └── Link.svelte │ ├── key │ │ └── Key.svelte │ ├── hero │ │ └── Hero.svelte │ ├── buttondropdown │ │ ├── ButtonDropdownItem.svelte │ │ └── ButtonDropdown.svelte │ ├── dot │ │ └── Dot.svelte │ ├── lightswitch │ │ └── LightSwitch.svelte │ ├── page │ │ └── Page.svelte │ ├── types.ts │ ├── header │ │ └── Header.svelte │ ├── tooltip │ │ └── ToolTip.svelte │ ├── divider │ │ └── Divider.svelte │ ├── fieldset │ │ └── FieldSet.svelte │ ├── select │ │ └── Option.svelte │ ├── table │ │ └── Table.svelte │ ├── details │ │ └── Details.svelte │ ├── modal │ │ └── Modal.svelte │ ├── image │ │ └── Image.svelte │ ├── radiotabs │ │ ├── RadioTab.svelte │ │ └── RadioTabs.svelte │ ├── note │ │ └── Note.svelte │ ├── drawer │ │ └── Drawer.svelte │ ├── styles │ │ └── geist-ui-svelte.css │ ├── breadcrumbs │ │ ├── BreadCrumbsDemo.svelte │ │ └── BreadCrumbs.svelte │ ├── card │ │ └── Card.svelte │ ├── modeselector │ │ └── ModeSelector.svelte │ ├── loading │ │ └── Loading.svelte │ ├── avatar │ │ └── Avatar.svelte │ ├── badge │ │ └── Badge.svelte │ ├── toggle │ │ └── Toggle.svelte │ ├── tabs │ │ └── TabItem.svelte │ ├── search │ │ └── Search.svelte │ ├── togglebutton │ │ └── ToggleButton.svelte │ ├── textarea │ │ └── TextArea.svelte │ └── checkbox │ │ └── Checkbox.svelte ├── routes │ ├── components │ │ ├── icons │ │ │ └── +page.server.ts │ │ ├── +layout.server.ts │ │ ├── +page.svelte │ │ ├── center │ │ │ └── +page.svelte │ │ ├── display │ │ │ └── +page.svelte │ │ ├── lightswitch │ │ │ └── +page.svelte │ │ ├── spacer │ │ │ └── +page.svelte │ │ ├── key │ │ │ └── +page.svelte │ │ ├── loading │ │ │ └── +page.svelte │ │ ├── dot │ │ │ └── +page.svelte │ │ ├── divider │ │ │ └── +page.svelte │ │ ├── toggle │ │ │ └── +page.svelte │ │ ├── page │ │ │ └── +page.svelte │ │ ├── modeselector │ │ │ └── +page.svelte │ │ ├── details │ │ │ └── +page.svelte │ │ ├── modal │ │ │ └── +page.svelte │ │ ├── togglebutton │ │ │ └── +page.svelte │ │ ├── label │ │ │ └── +page.svelte │ │ ├── snippet │ │ │ └── +page.svelte │ │ ├── link │ │ │ └── +page.svelte │ │ ├── note │ │ │ └── +page.svelte │ │ ├── ipaddressinput │ │ │ └── +page.svelte │ │ ├── checkbox │ │ │ └── +page.svelte │ │ ├── drawer │ │ │ └── +page.svelte │ │ ├── avatar │ │ │ └── +page.svelte │ │ ├── buttondropdown │ │ │ └── +page.svelte │ │ ├── search │ │ │ └── +page.svelte │ │ ├── tooltip │ │ │ └── +page.svelte │ │ ├── image │ │ │ └── +page.svelte │ │ ├── badge │ │ │ └── +page.svelte │ │ ├── card │ │ │ └── +page.svelte │ │ └── table │ │ │ └── +page.svelte │ ├── guide │ │ ├── +page.svelte │ │ ├── core-principals │ │ │ └── +page.svelte │ │ └── introduction │ │ │ └── +page.svelte │ ├── +page.svelte │ └── examples │ │ └── +page.svelte ├── app.d.ts ├── hooks.client.ts └── app.html ├── .prettierignore ├── postcss.config.js ├── .gitignore ├── .eslintignore ├── .prettierrc ├── tsconfig.json ├── .vscode └── settings.json ├── vite.config.ts ├── routes.js ├── README.md ├── tailwind.config.js ├── .github ├── workflows │ ├── publish.yml │ └── contiunous-integration.yml └── pull_request_template.md ├── svelte.config.js ├── static └── favicon.svg ├── LICENSE ├── CONTRIBUTING.md └── .eslintrc.cjs /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /src/app.css: -------------------------------------------------------------------------------- 1 | html { 2 | scrollbar-gutter: stable; 3 | } 4 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # Ignore files for PNPM, NPM and YARN 2 | pnpm-lock.yaml 3 | package-lock.json 4 | yarn.lock 5 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /src/lib/assets/demo-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ieedan/geist-ui-svelte/HEAD/src/lib/assets/demo-dark.png -------------------------------------------------------------------------------- /src/lib/assets/demo-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ieedan/geist-ui-svelte/HEAD/src/lib/assets/demo-light.png -------------------------------------------------------------------------------- /src/lib/assets/demo-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ieedan/geist-ui-svelte/HEAD/src/lib/assets/demo-page.png -------------------------------------------------------------------------------- /src/lib/assets/login-form.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ieedan/geist-ui-svelte/HEAD/src/lib/assets/login-form.png -------------------------------------------------------------------------------- /src/lib/docs-components/playground/index.ts: -------------------------------------------------------------------------------- 1 | import Root from "./playground.svelte"; 2 | 3 | export default Root; 4 | -------------------------------------------------------------------------------- /src/lib/assets/dummy-project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ieedan/geist-ui-svelte/HEAD/src/lib/assets/dummy-project.png -------------------------------------------------------------------------------- /src/lib/assets/login-form-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ieedan/geist-ui-svelte/HEAD/src/lib/assets/login-form-light.png -------------------------------------------------------------------------------- /src/lib/assets/delete-confirmation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ieedan/geist-ui-svelte/HEAD/src/lib/assets/delete-confirmation.png -------------------------------------------------------------------------------- /src/lib/assets/delete-confirmation-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ieedan/geist-ui-svelte/HEAD/src/lib/assets/delete-confirmation-light.png -------------------------------------------------------------------------------- /src/routes/components/icons/+page.server.ts: -------------------------------------------------------------------------------- 1 | export async function load({ url }) { 2 | return { 3 | currentIcon: url.searchParams.get("icon"), 4 | }; 5 | } 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /dist 5 | /.svelte-kit 6 | /package 7 | .env 8 | .env.* 9 | !.env.example 10 | vite.config.js.timestamp-* 11 | vite.config.ts.timestamp-* -------------------------------------------------------------------------------- /src/routes/components/+layout.server.ts: -------------------------------------------------------------------------------- 1 | import { redirect } from "@sveltejs/kit"; 2 | 3 | export async function load({ url }) { 4 | if (url.pathname == "/components") { 5 | throw redirect(303, "/components/text"); 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/lib/util/to-array.ts: -------------------------------------------------------------------------------- 1 | export const toArray = (map: Map, fn: (key: K, value: V) => T): T[] => { 2 | const arr = []; 3 | for (const [key, value] of map) { 4 | arr.push(fn(key, value)); 5 | } 6 | return arr; 7 | }; 8 | -------------------------------------------------------------------------------- /src/lib/util/utils.ts: -------------------------------------------------------------------------------- 1 | import type { ClassValue } from "clsx"; 2 | import clsx from "clsx"; 3 | import { twMerge } from "tailwind-merge"; 4 | 5 | export const cn = (...classNames: ClassValue[]) => { 6 | return twMerge(clsx(classNames)); 7 | }; 8 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | dist/* 10 | routes.js 11 | 12 | # Ignore files for PNPM, NPM and YARN 13 | pnpm-lock.yaml 14 | package-lock.json 15 | yarn.lock 16 | -------------------------------------------------------------------------------- /src/routes/components/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | If you haven't already been redirected click Here 8 | 9 | -------------------------------------------------------------------------------- /src/routes/guide/+page.svelte: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://kit.svelte.dev/docs/types#app 2 | // for information about these interfaces 3 | declare global { 4 | namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | // interface PageData {} 8 | // interface PageState {} 9 | // interface Platform {} 10 | } 11 | } 12 | 13 | export {}; 14 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "tabWidth": 4, 4 | "printWidth": 100, 5 | "svelteAllowShorthand": true, 6 | "trailingComma": "all", 7 | "htmlWhitespaceSensitivity": "strict", 8 | "svelteBracketNewLine": false, 9 | "plugins": ["prettier-plugin-svelte"], 10 | "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] 11 | } 12 | -------------------------------------------------------------------------------- /src/lib/util/to-map.ts: -------------------------------------------------------------------------------- 1 | type KeyValuePair = { 2 | key: K; 3 | value: V; 4 | }; 5 | 6 | const toMap = (arr: T[], fn: (a: T) => KeyValuePair): Map => { 7 | const map = new Map(); 8 | for (let i = 0; i < arr.length; i++) { 9 | const item = fn(arr[i]); 10 | map.set(item.key, item.value); 11 | } 12 | return map; 13 | }; 14 | 15 | export default toMap; 16 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true, 12 | "module": "NodeNext", 13 | "moduleResolution": "NodeNext" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/lib/label/Label.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 15 | -------------------------------------------------------------------------------- /src/hooks.client.ts: -------------------------------------------------------------------------------- 1 | import { dev } from "$app/environment"; 2 | import { inject } from "@vercel/analytics"; 3 | import { injectSpeedInsights } from "@vercel/speed-insights/sveltekit"; 4 | 5 | injectSpeedInsights(); 6 | inject({ mode: dev ? "development" : "production" }); 7 | 8 | // eslint-disable-next-line no-console 9 | console.log( 10 | "Welcome to geist-ui-svelte.com! See the source here https://github.com/ieedan/geist-ui-svelte! 🚀", 11 | ); 12 | -------------------------------------------------------------------------------- /src/lib/skeleton/Skeleton.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
7 | 8 | 14 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "files.exclude": { 3 | "**/.git": true, 4 | "**/.svn": true, 5 | "**/.hg": true, 6 | "**/CVS": true, 7 | "**/.DS_Store": true, 8 | "**/Thumbs.db": true, 9 | "**/node_modules": true, 10 | "node_modules": true, 11 | "**/.vscode": true, 12 | ".vscode": true, 13 | "**/.svelte-kit": true, 14 | ".svelte-kit": true 15 | }, 16 | "explorerExclude.backup": {}, 17 | "cSpell.words": ["bunx", "hoverable", "pcss", "tailwindcss"] 18 | } 19 | -------------------------------------------------------------------------------- /src/lib/center/Center.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
7 | 8 |
9 | 10 | 16 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { sveltekit } from "@sveltejs/kit/vite"; 2 | import { defineConfig } from "vite"; 3 | import pkg from "./package.json"; 4 | import { getRoutes } from "./routes.js"; 5 | 6 | // Get components 7 | const components = getRoutes(); 8 | 9 | export default defineConfig({ 10 | plugins: [sveltekit()], 11 | define: { 12 | "process.env.PACKAGE_VERSION": JSON.stringify(pkg.version), 13 | "process.env.COMPONENTS": JSON.stringify(components), 14 | }, 15 | }); 16 | -------------------------------------------------------------------------------- /src/lib/util/find-child.ts: -------------------------------------------------------------------------------- 1 | export const findChild = (parent: Element, fn: (node: Element) => boolean): Element | undefined => { 2 | if (!parent) return undefined; 3 | const children = Array.from(parent.children); 4 | 5 | for (let i = 0; i < children.length; i++) { 6 | const child = children[i]; 7 | if (fn(child)) return child; 8 | 9 | if (child.children.length > 0) { 10 | const result = findChild(child, fn); 11 | if (result) return result; 12 | } 13 | } 14 | 15 | return undefined; 16 | }; 17 | -------------------------------------------------------------------------------- /src/lib/skeleton/SkeletonContainer.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
8 | 9 |
10 | 11 | 17 | -------------------------------------------------------------------------------- /routes.js: -------------------------------------------------------------------------------- 1 | import fs from "fs"; 2 | 3 | /** Searches the components directory and returns each component with its href 4 | * 5 | * @returns {{slug: string, name: string}[]} 6 | */ 7 | export const getRoutes = () => { 8 | const routesDirectory = "src/routes/components"; 9 | 10 | const files = fs.readdirSync(routesDirectory); 11 | 12 | const components = files.filter((a) => !a.endsWith(".svelte")); 13 | 14 | return components.map((a) => { 15 | return { 16 | slug: `/components/${a}`, 17 | name: a, 18 | }; 19 | }); 20 | }; 21 | -------------------------------------------------------------------------------- /src/lib/spacer/Spacer.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 13 | 14 | 20 | -------------------------------------------------------------------------------- /src/lib/icons/EllipsisIcon.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/routes/guide/core-principals/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | Core Principals 7 | 8 | 9 | Our goal is to make building UI faster and easier without getting in the way or compromising 10 | interactivity. Because of this we try to keep the components as simple as possible to implement. 11 | 12 | 13 | 14 | We also try to stay out of the way with your layout avoiding components that determine the 15 | structure of your site. 16 | 17 | -------------------------------------------------------------------------------- /src/lib/buttongroup/ButtonGroup.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 |
17 | 18 |
19 | 20 | 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # geist-ui-svelte 4 | 5 | geist-ui-svelte is UI Library for Svelte built to match Vercel's design inspired by other libraries such as geist-ui. 6 | 7 | > [!WARNING] 8 | > This is not longer maintained see [#272](https://github.com/ieedan/geist-ui-svelte/issues/272) 9 | 10 | I started this project on 1/2/2024 in hopes of making it easy to build interactive apps that look good. 11 | 12 | ### Get started with geist-ui-svelte 13 | 14 | To get started see our [docs](https://geist-ui-svelte.dev/guide/introduction) 15 | 16 | ### Contributing 17 | 18 | PRs are welcome see our [Contributing Guide](https://github.com/ieedan/geist-ui-svelte/blob/main/CONTRIBUTING.md) 19 | -------------------------------------------------------------------------------- /src/lib/display/Display.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |
13 | 14 |
15 | {@html caption} 16 |
17 |
18 | 19 | 25 | -------------------------------------------------------------------------------- /src/lib/assets/google.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: ["./src/**/*.{html,js,svelte,ts}"], 4 | theme: { 5 | fontFamily: { 6 | serif: ["Geist Mono", "Monospace"], 7 | sans: ["Geist Sans", "sans-serif"], 8 | }, 9 | extend: { 10 | colors: { 11 | gray: { 12 | 0: "#ffffff", 13 | 50: "#f9f9f9", 14 | 100: "#f2f2f2", 15 | 200: "#d9d9d9", 16 | 300: "#bfbfbf", 17 | 400: "#a6a6a6", 18 | 500: "#8c8c8c", 19 | 600: "#737373", 20 | 700: "#595959", 21 | 800: "#404040", 22 | 900: "#262626", 23 | 925: "#1d1d1d", 24 | 950: "#141414", 25 | 999: "#000000", 26 | }, 27 | }, 28 | }, 29 | }, 30 | plugins: [], 31 | darkMode: "class", 32 | }; 33 | -------------------------------------------------------------------------------- /src/lib/icons/ChevronIcon.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 24 | 25 | 26 | 30 | -------------------------------------------------------------------------------- /.github/workflows/publish.yml: -------------------------------------------------------------------------------- 1 | name: Publish to NPM 2 | 3 | on: 4 | release: 5 | types: [created] 6 | 7 | jobs: 8 | publish: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@v4 12 | - uses: actions/setup-node@v3 13 | with: 14 | node-version: "18" 15 | registry-url: "https://registry.npmjs.org" 16 | - name: Install dependencies 17 | run: npm install 18 | - name: Package 19 | run: npm run package 20 | - name: Build 21 | run: npm run build 22 | - name: Publish 23 | run: npm publish 24 | env: 25 | NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} 26 | -------------------------------------------------------------------------------- /src/lib/icons/CheckMarkIcon.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 24 | 25 | 26 | 30 | -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from "@sveltejs/adapter-auto"; 2 | import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"; 3 | 4 | /** @type {import('@sveltejs/kit').Config} */ 5 | const config = { 6 | // Consult https://kit.svelte.dev/docs/integrations#preprocessors 7 | // for more information about preprocessors 8 | preprocess: vitePreprocess(), 9 | 10 | kit: { 11 | // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. 12 | // If your environment is not supported or you settled on a specific environment, switch out the adapter. 13 | // See https://kit.svelte.dev/docs/adapters for more information about adapters. 14 | adapter: adapter(), 15 | }, 16 | vitePlugin: { 17 | inspector: true, 18 | }, 19 | }; 20 | 21 | export default config; 22 | -------------------------------------------------------------------------------- /src/lib/icons/MenuIcon.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | 22 | 26 | -------------------------------------------------------------------------------- /src/lib/icons/PlusIcon.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 18 | 27 | 28 | 29 | 33 | -------------------------------------------------------------------------------- /src/routes/+page.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | Home - geist-ui-svelte 11 | 12 | 13 | 14 | geist-ui-svelte 15 | 16 |
17 | 18 | 19 | 20 |
21 | 22 | 25 | 26 | -------------------------------------------------------------------------------- /src/lib/icons/GridIcon.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 18 | 19 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /src/lib/icons/ListIcon.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/lib/icons/LockIcon.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 22 | 23 | 24 | 25 | 29 | -------------------------------------------------------------------------------- /.github/workflows/contiunous-integration.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: 4 | pull_request: 5 | branches: 6 | - main 7 | 8 | jobs: 9 | CI: 10 | runs-on: ubuntu-latest 11 | 12 | steps: 13 | - name: Checkout code 14 | uses: actions/checkout@v4 15 | 16 | - name: Setup Node.js 17 | uses: actions/setup-node@v3 18 | with: 19 | node-version: "18" 20 | 21 | - name: Install dependencies 22 | run: npm install 23 | 24 | - name: Format 25 | run: npm run format 26 | 27 | - name: Lint 28 | run: npm run lint 29 | 30 | - name: Package 31 | run: npm run package 32 | 33 | - name: Build 34 | run: npm run build 35 | 36 | - name: Publish Dry Run 37 | run: npm publish --dry-run 38 | -------------------------------------------------------------------------------- /src/lib/icons/XIcon.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 26 | 35 | 36 | 37 | 41 | -------------------------------------------------------------------------------- /src/routes/guide/introduction/+page.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | Introduction 9 | 10 | About 11 | 12 | geist-ui-svelte is a Svelte UI library taking inspiration from the 15 | Vercel design. 16 | 17 | 18 | We built geist-ui-svelte around TailwindCSS and SvelteKit to make it easy to make 20 | interactive websites and web applications that look good. 22 | 23 | This project is not associated with Vercel, Svelte, or Geist-UI. 24 | 25 | -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | ## Description 2 | 3 | 4 | 5 | ### Breaking changes 6 | 7 | 8 | 9 | 14 | 15 | 23 | 24 | ## Checks 🗸 25 | 26 | 27 | 28 | - [ ] My code is up to date with main 29 | - [ ] My code requires a documentation change 30 | - [ ] I have updated the documentation as required 31 | - [ ] My code requires a new package version to be created 32 | - [ ] I have updated the package version 33 | - [ ] CI is passing 34 | - [ ] The vercel deployment is passing and the page is working as expected 35 | -------------------------------------------------------------------------------- /src/lib/link/Link.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | 20 | 21 | 22 | 28 | 29 | 34 | -------------------------------------------------------------------------------- /src/lib/key/Key.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | 19 | 20 | 21 | 27 | -------------------------------------------------------------------------------- /src/lib/hero/Hero.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 |
21 | 22 | {#if trueCenter} 23 | 24 | {/if} 25 |
26 | 27 | 33 | -------------------------------------------------------------------------------- /src/lib/util/find-ancestor.ts: -------------------------------------------------------------------------------- 1 | /** Will recursively search the DOM for the node matching the passed function 2 | * until it reaches the document at which point it will return null. 3 | * 4 | * ```ts 5 | * // Ex: You get the target from the mouse event target 6 | * // and search up the document for the required node 7 | * let ancestor = e.target; 8 | * e.stopPropagation(); 9 | ancestor = findAncestor(ancestor, (target) => { 10 | return target?.getAttribute("data-value") !== null; 11 | }); 12 | * ``` 13 | * 14 | * @param target the current node in the document 15 | * @param found function to determine if the passed node is the node you are looking for in the document 16 | * @returns 17 | */ 18 | const findAncestor = ( 19 | target: Node, 20 | found: (target: HTMLElement | null) => boolean, 21 | ): HTMLElement | null => { 22 | if (target.parentNode === document) return null; 23 | 24 | if (found(target as HTMLElement)) return target as HTMLElement; 25 | 26 | return findAncestor(target.parentNode as Node, found); 27 | }; 28 | 29 | export default findAncestor; 30 | -------------------------------------------------------------------------------- /static/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/lib/assets/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/lib/buttondropdown/ButtonDropdownItem.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 27 | 28 | 34 | -------------------------------------------------------------------------------- /src/lib/dot/Dot.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 25 | -------------------------------------------------------------------------------- /src/lib/icons/CloneIcon.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 26 | 34 | 35 | 36 | 40 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Aidan Bleser 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/lib/docs-components/playground/playground.svelte: -------------------------------------------------------------------------------- 1 | 25 | 26 |
27 |
28 | 29 |
30 |
31 |
32 | 33 |
34 |
35 |
36 | -------------------------------------------------------------------------------- /src/routes/components/center/+page.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | Center 11 | 12 | A layout component used to center content. 13 | 14 | 15 | 16 | Basic 17 | 18 | Center the content of a card. 19 | 20 | 23 | Not Centered Text 24 | 25 | 26 |
27 | Centered Text 28 |
29 | `} 30 | > 31 | 32 | Not Centered Text 33 | 34 | 35 |
36 | Centered Text 37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /src/lib/lightswitch/LightSwitch.svelte: -------------------------------------------------------------------------------- 1 | 18 | 19 | 33 | 34 | 40 | -------------------------------------------------------------------------------- /src/lib/icons/DesktopIcon.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 18 | 19 | 20 | 28 | 36 | 37 | 38 | 42 | -------------------------------------------------------------------------------- /src/routes/components/display/+page.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | Display 12 | 13 | A layout component to add a caption to your content. 14 | 15 | 16 | 17 | Basic 18 | 19 | 22 | Thing 23 | `} 24 | > 25 | 29 | Thing 30 | 31 | 32 | -------------------------------------------------------------------------------- /src/lib/page/Page.svelte: -------------------------------------------------------------------------------- 1 | 28 | 29 | 30 | 31 | 40 | 41 | 47 | -------------------------------------------------------------------------------- /src/lib/types.ts: -------------------------------------------------------------------------------- 1 | export type Size = "xs" | "sm" | "md" | "lg" | "xl"; 2 | 3 | export type Rotation = "0deg" | "90deg" | "180deg" | "270deg" | "45deg" | "-45deg"; 4 | 5 | export type Color = "default" | "success" | "warning" | "error" | "secondary"; 6 | 7 | export type TextAlignment = 8 | | "center" 9 | | "end" 10 | | "justify" 11 | | "left" 12 | | "right" 13 | | "start" 14 | | "inherit" 15 | | "initial" 16 | | "unset"; 17 | 18 | export interface Route { 19 | name: string; 20 | slug: string; 21 | routes?: Route[]; 22 | expanded?: boolean; 23 | hidden?: boolean; 24 | } 25 | 26 | export type ShortRoute = { 27 | name: string; 28 | slug: string; 29 | }; 30 | 31 | export type Column = { 32 | label: string; 33 | property: string; 34 | }; 35 | 36 | export type DataItem = { 37 | [key: string]: string; 38 | }; 39 | 40 | export type ButtonColor = 41 | | "default" 42 | | "secondary" 43 | | "success" 44 | | "warning" 45 | | "error" 46 | | "abort" 47 | | "secondary-light" 48 | | "success-light" 49 | | "warning-light" 50 | | "error-light" 51 | | "abort-active"; 52 | 53 | export type Octets = [number, number, number, number]; 54 | export type IPV4Address = 55 | | `${number}.${number}.${number}.${number}` 56 | | `${number} ${number} ${number} ${number}`; 57 | -------------------------------------------------------------------------------- /src/routes/components/lightswitch/+page.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | LightSwitch 11 | 12 | A component to allow the user to toggle light/dark mode. 13 | 14 | 15 | 16 | Basic 17 | 18 | 19 | If you haven't already setup dark mode like we have in our 20 | installation guide then you should do that before you 21 | continue. 22 | 23 | 24 | `}> 25 | 26 | 27 | 28 | Basic 29 | 30 | Border. 31 | 32 | `}> 33 | 34 | 35 | -------------------------------------------------------------------------------- /src/routes/components/spacer/+page.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | Spacer 10 | 11 | A layout component to space your content. 12 | 13 | 14 | 15 | Vertical Spacing 16 | 17 | 19 | 20 | 21 | 22 | `} 23 | > 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | Horizontal Spacing 32 | 33 | 36 | 37 | 38 | 39 | `} 40 | > 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /src/lib/icons/ChevronUpDownIcon.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 26 | 35 | 44 | 53 | 54 | 55 | 59 | -------------------------------------------------------------------------------- /src/lib/header/Header.svelte: -------------------------------------------------------------------------------- 1 | 40 | 41 |
42 | 43 |
44 | 45 | 51 | -------------------------------------------------------------------------------- /src/lib/icons/SearchIcon.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 18 | 28 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 48 | -------------------------------------------------------------------------------- /src/routes/components/key/+page.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | Key 11 | 12 | A component to signify to the user a keyboard command. 13 | 14 | 15 | 16 | Basic 17 | 18 | 21 | K`} 22 | > 23 | 24 | K 25 | 26 | 27 | Sizes 28 | 29 | K 32 | K 33 | K 34 | K 35 | K`} 36 | > 37 | K 38 | K 39 | K 40 | K 41 | K 42 | 43 | -------------------------------------------------------------------------------- /src/routes/components/loading/+page.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | Loading 10 | 11 | A component to indicate a loading state. 12 | 13 | 14 | 15 | Sizes 16 | 17 | 20 | 21 | 22 | 23 | `} 24 | > 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | Colors 33 | 34 | 37 | 38 | 39 | `} 40 | > 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /src/lib/tooltip/ToolTip.svelte: -------------------------------------------------------------------------------- 1 | 48 | 49 |