├── .config ├── cz-config.js └── package.json ├── .editorconfig ├── .eslintignore ├── .eslintrc.cjs ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.yml │ ├── docs_report.yml │ └── feature_request.yml ├── PULL_REQUEST_TEMPLATE.md └── workflows │ ├── deploy-docs.yml │ └── main.yml ├── .gitignore ├── .husky ├── .gitignore └── pre-commit ├── .lintstagedrc ├── .npmrc ├── .prettierignore ├── .prettierrc ├── .svelte-kit └── tsconfig.json ├── .vscode ├── extentions.json └── settings.json ├── CODE_OF_CONDUCT.md ├── CODE_OF_CONDUCT_KR.md ├── CONTRIBUTING.md ├── CONTRIBUTING_KR.md ├── LICENSE ├── README.md ├── apps ├── .gitkeep └── docs │ ├── .gitignore │ ├── .npmrc │ ├── README.md │ ├── package.json │ ├── src │ ├── app.d.ts │ ├── app.html │ ├── hooks.server.ts │ ├── lib │ │ ├── components │ │ │ ├── Banner.svelte │ │ │ ├── BottomNav.svelte │ │ │ ├── CodeBlock.svelte │ │ │ ├── Device.svelte │ │ │ ├── Global.svelte │ │ │ ├── Heading.svelte │ │ │ ├── Logo.svelte │ │ │ ├── MinorHeading.svelte │ │ │ ├── NavigationTitle.svelte │ │ │ ├── PageTransition.svelte │ │ │ ├── SearchItem.svelte │ │ │ ├── Sidebar.svelte │ │ │ ├── TopBar │ │ │ │ ├── TopBar.svelte │ │ │ │ └── data.ts │ │ │ ├── homepage │ │ │ │ ├── AllComponents.svelte │ │ │ │ ├── ComponentsExample.svelte │ │ │ │ ├── Features.svelte │ │ │ │ ├── HomePageExample.svelte │ │ │ │ ├── HomePageExample.ts │ │ │ │ ├── Waves │ │ │ │ │ ├── Waves.styles.ts │ │ │ │ │ └── Waves.svelte │ │ │ │ ├── _Card.svelte │ │ │ │ └── index.ts │ │ │ ├── index.ts │ │ │ ├── mainpages │ │ │ │ ├── GettingStarted │ │ │ │ │ ├── Guides │ │ │ │ │ │ ├── Guides.styles.js │ │ │ │ │ │ ├── Guides.svelte │ │ │ │ │ │ ├── StartGuide.svelte │ │ │ │ │ │ ├── data.js │ │ │ │ │ │ └── icons │ │ │ │ │ │ │ ├── ElderJs.svelte │ │ │ │ │ │ │ ├── Svelte.svelte │ │ │ │ │ │ │ ├── SvelteKit.svelte │ │ │ │ │ │ │ ├── elderjs-logo 1.svg │ │ │ │ │ │ │ └── index.js │ │ │ │ │ └── Installation │ │ │ │ │ │ ├── Card.styles.js │ │ │ │ │ │ ├── Card.svelte │ │ │ │ │ │ ├── Installation.svelte │ │ │ │ │ │ └── data.js │ │ │ │ ├── MainLink.svelte │ │ │ │ ├── NextSteps.svelte │ │ │ │ └── index.ts │ │ │ ├── svgs │ │ │ │ ├── Arrows.svelte │ │ │ │ ├── ChevronDown.svelte │ │ │ │ ├── Discord.svelte │ │ │ │ ├── Logo.svelte │ │ │ │ ├── TypeScript.svelte │ │ │ │ └── index.js │ │ │ └── temp │ │ │ │ └── colors.js │ │ ├── data │ │ │ ├── index.js │ │ │ ├── main │ │ │ │ ├── homepage.js │ │ │ │ ├── index.js │ │ │ │ └── installation.js │ │ │ └── theming │ │ │ │ ├── index.js │ │ │ │ └── utils.data.js │ │ └── theme │ │ │ ├── components │ │ │ ├── Example.svelte │ │ │ └── Properties.svelte │ │ │ ├── info.md │ │ │ ├── style.css │ │ │ ├── styles │ │ │ ├── layout.css │ │ │ ├── prism-theme.css │ │ │ └── typography.css │ │ │ ├── ui │ │ │ ├── Banner │ │ │ │ ├── Banner.styles.js │ │ │ │ ├── Banner.svelte │ │ │ │ └── index.js │ │ │ ├── Sibling │ │ │ │ ├── Sibling.styles.js │ │ │ │ ├── Sibling.svelte │ │ │ │ └── index.js │ │ │ └── index.js │ │ │ └── utils │ │ │ ├── index.js │ │ │ └── link-actions.js │ └── routes │ │ ├── +error.svelte │ │ ├── +layout.svelte │ │ ├── +layout.ts │ │ ├── +page.svelte │ │ ├── basics │ │ └── +page.md │ │ ├── changelog │ │ ├── v0-10-0 │ │ │ └── +page.md │ │ ├── v0-11-0 │ │ │ └── +page.md │ │ ├── v0-12-0 │ │ │ └── +page.md │ │ ├── v0-13-0 │ │ │ └── +page.md │ │ ├── v0-14-0 │ │ │ └── +page.md │ │ ├── v0-15-0 │ │ │ └── +page.md │ │ ├── v0-5-0 │ │ │ └── +page.md │ │ ├── v0-5-5 │ │ │ └── +page.md │ │ ├── v0-6-0 │ │ │ └── +page.md │ │ ├── v0-6-5 │ │ │ └── +page.md │ │ └── v0-7-0 │ │ │ └── +page.md │ │ ├── composables │ │ ├── use-browser-context │ │ │ └── +page.md │ │ ├── use-click-outside │ │ │ └── +page.md │ │ ├── use-clipboard │ │ │ └── +page.md │ │ ├── use-css-variable │ │ │ └── +page.md │ │ ├── use-debounce │ │ │ └── +page.md │ │ ├── use-download │ │ │ └── +page.md │ │ ├── use-element-size │ │ │ └── +page.md │ │ ├── use-eye-dropper │ │ │ └── +page.md │ │ ├── use-focus-return │ │ │ └── +page.md │ │ ├── use-focus-trap │ │ │ └── +page.md │ │ ├── use-focus-within │ │ │ └── +page.md │ │ ├── use-focus │ │ │ └── +page.md │ │ ├── use-hash │ │ │ └── +page.md │ │ ├── use-hot-key │ │ │ └── +page.md │ │ ├── use-id │ │ │ └── +page.md │ │ ├── use-io │ │ │ └── +page.md │ │ ├── use-lazy │ │ │ └── +page.md │ │ ├── use-lock-scroll │ │ │ └── +page.md │ │ ├── use-long-press │ │ │ └── +page.md │ │ ├── use-mouse-position │ │ │ └── +page.md │ │ ├── use-move │ │ │ └── +page.md │ │ ├── use-os │ │ │ └── +page.md │ │ ├── use-page-leave │ │ │ └── +page.md │ │ ├── use-persistent-tab │ │ │ └── +page.md │ │ ├── use-portal │ │ │ └── +page.md │ │ ├── use-raf-fn │ │ │ └── +page.md │ │ ├── use-tab-leave │ │ │ └── +page.md │ │ ├── use-throttle │ │ │ └── +page.md │ │ ├── use-viewport-size │ │ │ └── +page.md │ │ └── use-web-worker │ │ │ └── +page.md │ │ ├── contributing │ │ └── +page.md │ │ ├── core │ │ ├── accordion │ │ │ └── +page.md │ │ ├── action-icon │ │ │ └── +page.md │ │ ├── affix │ │ │ └── +page.md │ │ ├── alert │ │ │ └── +page.md │ │ ├── anchor │ │ │ └── +page.md │ │ ├── app-shell │ │ │ └── +page.md │ │ ├── aspect-ratio │ │ │ └── +page.md │ │ ├── badge │ │ │ └── +page.md │ │ ├── blockquote │ │ │ └── +page.md │ │ ├── box │ │ │ └── +page.md │ │ ├── breadcrumbs │ │ │ └── +page.md │ │ ├── burger │ │ │ └── +page.md │ │ ├── button │ │ │ └── +page.md │ │ ├── card │ │ │ └── +page.md │ │ ├── center │ │ │ └── +page.md │ │ ├── checkbox │ │ │ └── +page.md │ │ ├── chip │ │ │ └── +page.md │ │ ├── code │ │ │ └── +page.md │ │ ├── collapse │ │ │ └── +page.md │ │ ├── container │ │ │ └── +page.md │ │ ├── divider │ │ │ └── +page.md │ │ ├── flex │ │ │ └── +page.md │ │ ├── grid │ │ │ └── +page.md │ │ ├── group │ │ │ └── +page.md │ │ ├── image │ │ │ └── +page.md │ │ ├── input-wrapper │ │ │ └── +page.md │ │ ├── input │ │ │ └── +page.md │ │ ├── json-input │ │ │ └── +page.md │ │ ├── kbd │ │ │ └── +page.md │ │ ├── loader │ │ │ └── +page.md │ │ ├── mark │ │ │ └── +page.md │ │ ├── media-query │ │ │ └── +page.md │ │ ├── menu │ │ │ └── +page.md │ │ ├── modal │ │ │ └── +page.md │ │ ├── native-select │ │ │ └── +page.md │ │ ├── notification │ │ │ └── +page.md │ │ ├── number-input │ │ │ └── +page.md │ │ ├── observer-render │ │ │ └── +page.md │ │ ├── overlay │ │ │ └── +page.md │ │ ├── paper │ │ │ └── +page.md │ │ ├── password-input │ │ │ └── +page.md │ │ ├── popper │ │ │ └── +page.md │ │ ├── portal │ │ │ └── +page.md │ │ ├── progress │ │ │ └── +page.md │ │ ├── radio │ │ │ └── +page.md │ │ ├── seo │ │ │ └── +page.md │ │ ├── simple-grid │ │ │ └── +page.md │ │ ├── skeleton │ │ │ └── +page.md │ │ ├── space │ │ │ └── +page.md │ │ ├── stack │ │ │ └── +page.md │ │ ├── switch │ │ │ └── +page.md │ │ ├── tabs │ │ │ └── +page.md │ │ ├── text-input │ │ │ └── +page.md │ │ ├── text │ │ │ └── +page.md │ │ ├── textarea │ │ │ └── +page.md │ │ ├── theme-icon │ │ │ └── +page.md │ │ ├── timeline │ │ │ └── +page.md │ │ ├── title │ │ │ └── +page.md │ │ ├── tooltip │ │ │ └── +page.md │ │ ├── typography-provider │ │ │ └── +page.md │ │ └── unstyled-button │ │ │ └── +page.md │ │ ├── dates │ │ ├── getting-started │ │ │ └── +page.md │ │ └── month │ │ │ └── +page.md │ │ ├── faq │ │ └── +page.md │ │ ├── installation │ │ └── +page.md │ │ ├── introduction │ │ └── +page.md │ │ ├── motion │ │ ├── flipboard │ │ │ └── +page.md │ │ └── typewriter │ │ │ └── +page.md │ │ ├── others │ │ └── prism │ │ │ └── +page.md │ │ ├── preprocessors │ │ ├── getting-started │ │ │ └── +page.md │ │ └── view-source │ │ │ └── +page.md │ │ └── theming │ │ ├── create-styles │ │ └── +page.md │ │ ├── dark-theme │ │ └── +page.md │ │ ├── default-theme │ │ └── +page.md │ │ ├── override │ │ └── +page.md │ │ ├── ssr │ │ └── +page.md │ │ ├── stitches-utilities │ │ └── +page.md │ │ └── svelteui-provider │ │ └── +page.md │ ├── static │ ├── Lemon Days.otf │ ├── emblem-light.svg │ ├── favicon.png │ ├── logo-name.png │ ├── logo-noname.png │ ├── logo-noname.svg │ ├── logo.png │ ├── logo.svg │ └── new-banner.png │ ├── svelte.config.js │ ├── tsconfig.json │ └── vite.config.js ├── configuration ├── eslint-preset-svelteui │ ├── index.js │ └── package.json ├── storybook │ ├── ThemeDecorator.svelte │ ├── constants.js │ ├── main.cjs │ └── preview.cjs └── svelteui-tsconfig │ ├── README.md │ ├── base.json │ ├── package.json │ └── svelte.json ├── gallery └── Logo.png ├── package.json ├── packages ├── svelteui-composables │ ├── .eslintignore │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── .npmignore │ ├── .npmrc │ ├── .prettierignore │ ├── .prettierrc │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ │ ├── actions │ │ │ ├── index.ts │ │ │ ├── use-click-outside │ │ │ │ ├── index.ts │ │ │ │ ├── use-click-outside.stories.svelte │ │ │ │ └── use-click-outside.ts │ │ │ ├── use-clipboard │ │ │ │ ├── index.ts │ │ │ │ └── use-clipboard.ts │ │ │ ├── use-css-variable │ │ │ │ ├── index.ts │ │ │ │ └── use-css-variable.ts │ │ │ ├── use-download │ │ │ │ ├── index.ts │ │ │ │ └── use-download.ts │ │ │ ├── use-focus-trap │ │ │ │ ├── create-aria-hider.ts │ │ │ │ ├── index.ts │ │ │ │ ├── scope-tab.ts │ │ │ │ ├── tabbable.ts │ │ │ │ ├── use-focus-trap.stories.svelte │ │ │ │ └── use-focus-trap.ts │ │ │ ├── use-focus │ │ │ │ ├── index.ts │ │ │ │ └── use-focus.ts │ │ │ ├── use-hot-key │ │ │ │ ├── index.ts │ │ │ │ ├── parse-hotkey.ts │ │ │ │ └── use-hot-key.ts │ │ │ ├── use-io │ │ │ │ ├── index.ts │ │ │ │ ├── use-io.config.ts │ │ │ │ └── use-io.ts │ │ │ ├── use-lazy │ │ │ │ ├── index.ts │ │ │ │ └── use-lazy.ts │ │ │ ├── use-lock-scroll │ │ │ │ ├── index.ts │ │ │ │ ├── use-lock-scroll.ts │ │ │ │ └── utils │ │ │ │ │ ├── create-style-tag.ts │ │ │ │ │ ├── get-lock-styles.ts │ │ │ │ │ ├── get-scroll-width.ts │ │ │ │ │ ├── inject-style-tag.ts │ │ │ │ │ └── insert-style-tag.ts │ │ │ ├── use-long-press │ │ │ │ ├── index.ts │ │ │ │ └── use-long-press.ts │ │ │ ├── use-move │ │ │ │ ├── index.ts │ │ │ │ ├── use-move.stories.svelte │ │ │ │ └── use-move.ts │ │ │ ├── use-page-leave │ │ │ │ ├── index.ts │ │ │ │ └── use-page-leave.ts │ │ │ ├── use-persistent-tab │ │ │ │ ├── index.ts │ │ │ │ └── use-persistent-tab.ts │ │ │ ├── use-portal │ │ │ │ ├── index.ts │ │ │ │ └── use-portal.ts │ │ │ └── use-tab-leave │ │ │ │ ├── index.ts │ │ │ │ └── use-tab-leave.ts │ │ ├── index.ts │ │ ├── shared │ │ │ ├── actions │ │ │ │ ├── index.ts │ │ │ │ ├── types │ │ │ │ │ ├── ActionTypes.d.ts │ │ │ │ │ ├── events.d.ts │ │ │ │ │ └── index.d.ts │ │ │ │ └── utils │ │ │ │ │ ├── clamp.ts │ │ │ │ │ ├── environment.ts │ │ │ │ │ └── index.ts │ │ │ ├── index.ts │ │ │ ├── types │ │ │ │ ├── a │ │ │ │ │ └── index.ts │ │ │ │ ├── index.ts │ │ │ │ ├── svelte-ui-composables-jsx.d.ts │ │ │ │ └── u │ │ │ │ │ ├── index.ts │ │ │ │ │ └── shared.ts │ │ │ ├── utilities │ │ │ │ ├── index.ts │ │ │ │ ├── types │ │ │ │ │ ├── Shared.ts │ │ │ │ │ └── index.ts │ │ │ │ └── utils │ │ │ │ │ ├── _configurable.ts │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── is │ │ │ │ │ ├── index.ts │ │ │ │ │ └── is.ts │ │ │ │ │ ├── random-id │ │ │ │ │ ├── index.ts │ │ │ │ │ └── random-id.ts │ │ │ │ │ └── time │ │ │ │ │ ├── index.ts │ │ │ │ │ └── time.ts │ │ │ └── utils │ │ │ │ ├── filter │ │ │ │ ├── debounce.ts │ │ │ │ ├── filter.ts │ │ │ │ └── throttle.ts │ │ │ │ ├── index.ts │ │ │ │ └── upper-first │ │ │ │ └── upper-first.ts │ │ └── utilities │ │ │ ├── index.ts │ │ │ ├── use-browser-context │ │ │ ├── index.ts │ │ │ └── use-browser-context.ts │ │ │ ├── use-debounce │ │ │ ├── index.ts │ │ │ ├── use-debounce.stories.svelte │ │ │ └── use-debounce.ts │ │ │ ├── use-deep-search │ │ │ ├── index.ts │ │ │ ├── types.ts │ │ │ ├── use-deep-search.ts │ │ │ └── utils.ts │ │ │ ├── use-element-size │ │ │ ├── index.ts │ │ │ └── use-element-size.ts │ │ │ ├── use-eye-dropper │ │ │ ├── index.ts │ │ │ └── use-eye-dropper.ts │ │ │ ├── use-focus-return │ │ │ ├── index.ts │ │ │ ├── use-focus-return.stories.svelte │ │ │ └── use-focus-return.ts │ │ │ ├── use-focus-within │ │ │ ├── index.ts │ │ │ └── use-focus-within.ts │ │ │ ├── use-hash │ │ │ ├── index.ts │ │ │ └── use-hash.ts │ │ │ ├── use-id │ │ │ ├── index.ts │ │ │ └── use-id.ts │ │ │ ├── use-mouse-position │ │ │ ├── index.ts │ │ │ └── use-mouse-position.ts │ │ │ ├── use-os │ │ │ ├── index.ts │ │ │ └── use-os.ts │ │ │ ├── use-raf-fn │ │ │ ├── index.ts │ │ │ └── use-raf-fn.ts │ │ │ ├── use-regex │ │ │ ├── index.ts │ │ │ ├── types.ts │ │ │ └── use-regex.ts │ │ │ ├── use-throttle │ │ │ ├── index.ts │ │ │ └── use-throttle.ts │ │ │ ├── use-viewport-size │ │ │ ├── index.ts │ │ │ └── use-viewport-size.ts │ │ │ └── use-web-worker │ │ │ ├── index.ts │ │ │ ├── lib │ │ │ ├── createWorkerBlobUrl.ts │ │ │ ├── depsParser.ts │ │ │ └── jobRunner.ts │ │ │ └── use-web-worker.ts │ ├── svelte.config.js │ ├── test │ │ ├── actions │ │ │ ├── components │ │ │ │ ├── use-click-outside.svelte │ │ │ │ ├── use-clipboard.svelte │ │ │ │ ├── use-css-variable.svelte │ │ │ │ ├── use-download.svelte │ │ │ │ ├── use-focus.svelte │ │ │ │ ├── use-page-leave.svelte │ │ │ │ └── use-tab-leave.svelte │ │ │ ├── example.test.ts │ │ │ ├── use-click-outside.test.ts │ │ │ ├── use-clipboard.test.ts │ │ │ ├── use-css-variable.test.ts │ │ │ ├── use-download.test.ts │ │ │ ├── use-focus.test.ts │ │ │ ├── use-page-leave.test.ts │ │ │ └── use-tab-leave.test.ts │ │ ├── shared │ │ │ ├── is.test.ts │ │ │ ├── random-id.test.ts │ │ │ └── time.test.ts │ │ └── utilities │ │ │ ├── example.test.ts │ │ │ ├── use-os.test.ts │ │ │ └── use-raf-fn.test.ts │ ├── tsconfig.json │ ├── vite.config.js │ └── vitest.config.ts ├── svelteui-core │ ├── .eslintignore │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── .npmignore │ ├── .npmrc │ ├── .prettierignore │ ├── .prettierrc │ ├── LICENSE │ ├── README.md │ ├── assets │ │ └── _icons │ │ │ ├── ChevronDown.svelte │ │ │ └── Gear.svelte │ ├── package.json │ ├── src │ │ ├── components │ │ │ ├── Accordion │ │ │ │ ├── Accordion.d.ts │ │ │ │ ├── Accordion.stories.svelte │ │ │ │ ├── Accordion.styles.ts │ │ │ │ ├── Accordion.svelte │ │ │ │ ├── Accordion.test.ts │ │ │ │ ├── AccordionItem │ │ │ │ │ ├── AccordionItem.d.ts │ │ │ │ │ ├── AccordionItem.styles.ts │ │ │ │ │ └── AccordionItem.svelte │ │ │ │ ├── Chevron │ │ │ │ │ └── Chevron.svelte │ │ │ │ ├── combinator.ts │ │ │ │ ├── index.ts │ │ │ │ └── key.ts │ │ │ ├── ActionIcon │ │ │ │ ├── ActionIcon.d.ts │ │ │ │ ├── ActionIcon.errors.ts │ │ │ │ ├── ActionIcon.stories.svelte │ │ │ │ ├── ActionIcon.styles.ts │ │ │ │ ├── ActionIcon.svelte │ │ │ │ ├── ActionIcon.test.ts │ │ │ │ ├── CloseButton │ │ │ │ │ ├── CloseButton.d.ts │ │ │ │ │ ├── CloseButton.svelte │ │ │ │ │ ├── CloseButton.test.ts │ │ │ │ │ └── CloseIcon.svelte │ │ │ │ └── index.ts │ │ │ ├── Affix │ │ │ │ ├── Affix.d.ts │ │ │ │ ├── Affix.svelte │ │ │ │ ├── Affix.test.ts │ │ │ │ └── index.ts │ │ │ ├── Alert │ │ │ │ ├── Alert.d.ts │ │ │ │ ├── Alert.stories.svelte │ │ │ │ ├── Alert.styles.ts │ │ │ │ ├── Alert.svelte │ │ │ │ ├── Alert.test.ts │ │ │ │ └── index.ts │ │ │ ├── Anchor │ │ │ │ ├── Anchor.d.ts │ │ │ │ ├── Anchor.styles.ts │ │ │ │ ├── Anchor.svelte │ │ │ │ ├── Anchor.test.ts │ │ │ │ └── index.ts │ │ │ ├── AppShell │ │ │ │ ├── AppShell.d.ts │ │ │ │ ├── AppShell.stories.svelte │ │ │ │ ├── AppShell.styles.ts │ │ │ │ ├── AppShell.svelte │ │ │ │ ├── AppShell.test.ts │ │ │ │ ├── AppShellProvider.svelte │ │ │ │ ├── Aside │ │ │ │ │ ├── Aside.svelte │ │ │ │ │ └── Aside.test.ts │ │ │ │ ├── Footer │ │ │ │ │ ├── Footer.svelte │ │ │ │ │ └── Footer.test.ts │ │ │ │ ├── Header │ │ │ │ │ ├── Header.svelte │ │ │ │ │ └── Header.test.ts │ │ │ │ ├── HorizontalSection │ │ │ │ │ ├── HorizontalSection.d.ts │ │ │ │ │ ├── HorizontalSection.styles.ts │ │ │ │ │ ├── HorizontalSection.svelte │ │ │ │ │ ├── HorizontalSection.test.ts │ │ │ │ │ ├── Section │ │ │ │ │ │ ├── Section.styles.ts │ │ │ │ │ │ └── Section.svelte │ │ │ │ │ ├── get-sorted-breakpoints │ │ │ │ │ │ └── get-sorted-breakpoints.ts │ │ │ │ │ └── index.ts │ │ │ │ ├── Navbar │ │ │ │ │ ├── Navbar.svelte │ │ │ │ │ └── Navbar.test.ts │ │ │ │ ├── VerticalSection │ │ │ │ │ ├── VerticalSection.d.ts │ │ │ │ │ ├── VerticalSection.styles.ts │ │ │ │ │ ├── VerticalSection.svelte │ │ │ │ │ ├── VerticalSection.test.ts │ │ │ │ │ └── index.ts │ │ │ │ └── index.ts │ │ │ ├── AspectRatio │ │ │ │ ├── AspectRatio.d.ts │ │ │ │ ├── AspectRatio.stories.svelte │ │ │ │ ├── AspectRatio.styles.ts │ │ │ │ ├── AspectRatio.svelte │ │ │ │ ├── AspectRatio.test.ts │ │ │ │ └── index.ts │ │ │ ├── Badge │ │ │ │ ├── Badge.d.ts │ │ │ │ ├── Badge.stories.svelte │ │ │ │ ├── Badge.styles.ts │ │ │ │ ├── Badge.svelte │ │ │ │ ├── Badge.test.ts │ │ │ │ └── index.ts │ │ │ ├── Blockquote │ │ │ │ ├── Blockquote.d.ts │ │ │ │ ├── Blockquote.stories.svelte │ │ │ │ ├── Blockquote.styles.ts │ │ │ │ ├── Blockquote.svelte │ │ │ │ ├── Blockquote.test.ts │ │ │ │ ├── QuoteIcon.svelte │ │ │ │ └── index.ts │ │ │ ├── Box │ │ │ │ ├── Box.d.ts │ │ │ │ ├── Box.svelte │ │ │ │ ├── Box.test.ts │ │ │ │ ├── context │ │ │ │ │ ├── get-system-styles │ │ │ │ │ │ └── get-system-styles.ts │ │ │ │ │ └── index.ts │ │ │ │ └── index.ts │ │ │ ├── Breadcrumbs │ │ │ │ ├── Breadcrumbs.d.ts │ │ │ │ ├── Breadcrumbs.stories.svelte │ │ │ │ ├── Breadcrumbs.styles.ts │ │ │ │ ├── Breadcrumbs.svelte │ │ │ │ ├── Breadcrumbs.test.ts │ │ │ │ ├── BreadcrumbsItem │ │ │ │ │ ├── BreadcrumbsItem.d.ts │ │ │ │ │ ├── BreadcrumbsItem.styles.ts │ │ │ │ │ ├── BreadcrumbsItem.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── combinator.ts │ │ │ │ └── index.ts │ │ │ ├── Burger │ │ │ │ ├── Burger.d.ts │ │ │ │ ├── Burger.stories.svelte │ │ │ │ ├── Burger.styles.ts │ │ │ │ ├── Burger.svelte │ │ │ │ ├── Burger.test.ts │ │ │ │ └── index.ts │ │ │ ├── Button │ │ │ │ ├── Button.d.ts │ │ │ │ ├── Button.errors.ts │ │ │ │ ├── Button.stories.svelte │ │ │ │ ├── Button.styles.ts │ │ │ │ ├── Button.svelte │ │ │ │ ├── Button.test.ts │ │ │ │ ├── Ripple.svelte │ │ │ │ ├── UnstyledButton │ │ │ │ │ ├── UnstyledButton.d.ts │ │ │ │ │ ├── UnstyledButton.styles.ts │ │ │ │ │ ├── UnstyledButton.svelte │ │ │ │ │ └── UnstyledButton.test.ts │ │ │ │ └── index.ts │ │ │ ├── Card │ │ │ │ ├── Card.d.ts │ │ │ │ ├── Card.stories.svelte │ │ │ │ ├── Card.styles.ts │ │ │ │ ├── Card.svelte │ │ │ │ ├── Card.test.ts │ │ │ │ ├── CardSection │ │ │ │ │ ├── CardSection.d.ts │ │ │ │ │ ├── CardSection.styles.ts │ │ │ │ │ ├── CardSection.svelte │ │ │ │ │ └── CardSection.test.ts │ │ │ │ ├── combinator.ts │ │ │ │ └── index.ts │ │ │ ├── Center │ │ │ │ ├── Center.d.ts │ │ │ │ ├── Center.styles.ts │ │ │ │ ├── Center.svelte │ │ │ │ ├── Center.test.ts │ │ │ │ └── index.ts │ │ │ ├── Checkbox │ │ │ │ ├── Checkbox.d.ts │ │ │ │ ├── Checkbox.stories.svelte │ │ │ │ ├── Checkbox.styles.ts │ │ │ │ ├── Checkbox.svelte │ │ │ │ ├── Checkbox.test.ts │ │ │ │ ├── CheckboxGroup │ │ │ │ │ ├── CheckboxGroup.d.ts │ │ │ │ │ ├── CheckboxGroup.svelte │ │ │ │ │ └── CheckboxGroup.test.ts │ │ │ │ ├── CheckboxIcon.svelte │ │ │ │ └── index.ts │ │ │ ├── Chip │ │ │ │ ├── Chip.d.ts │ │ │ │ ├── Chip.stories.svelte │ │ │ │ ├── Chip.styles.ts │ │ │ │ ├── Chip.svelte │ │ │ │ ├── Chip.test.ts │ │ │ │ ├── ChipGroup │ │ │ │ │ ├── ChipGroup.d.ts │ │ │ │ │ ├── ChipGroup.stories.svelte │ │ │ │ │ ├── ChipGroup.svelte │ │ │ │ │ └── ChipGroup.test.ts │ │ │ │ └── index.ts │ │ │ ├── Code │ │ │ │ ├── Code.d.ts │ │ │ │ ├── Code.errors.ts │ │ │ │ ├── Code.styles.ts │ │ │ │ ├── Code.svelte │ │ │ │ ├── Code.test.ts │ │ │ │ ├── CopyIcon.svelte │ │ │ │ └── index.ts │ │ │ ├── Collapse │ │ │ │ ├── Collapse.d.ts │ │ │ │ ├── Collapse.stories.svelte │ │ │ │ ├── Collapse.svelte │ │ │ │ ├── Collapse.test.ts │ │ │ │ └── index.ts │ │ │ ├── Container │ │ │ │ ├── Container.d.ts │ │ │ │ ├── Container.styles.ts │ │ │ │ ├── Container.svelte │ │ │ │ ├── Container.test.ts │ │ │ │ └── index.ts │ │ │ ├── Divider │ │ │ │ ├── Divider.d.ts │ │ │ │ ├── Divider.errors.ts │ │ │ │ ├── Divider.stories.svelte │ │ │ │ ├── Divider.styles.ts │ │ │ │ ├── Divider.svelte │ │ │ │ ├── Divider.test.ts │ │ │ │ └── index.ts │ │ │ ├── FileUpload │ │ │ │ ├── FileUpload.d.ts │ │ │ │ ├── FileUpload.stories.svelte │ │ │ │ ├── FileUpload.styles.ts │ │ │ │ ├── FileUpload.svelte │ │ │ │ └── index.ts │ │ │ ├── Flex │ │ │ │ ├── Flex.d.ts │ │ │ │ ├── Flex.stories.svelte │ │ │ │ ├── Flex.styles.ts │ │ │ │ ├── Flex.svelte │ │ │ │ ├── Flex.test.ts │ │ │ │ └── index.ts │ │ │ ├── Grid │ │ │ │ ├── Col │ │ │ │ │ ├── Col.d.ts │ │ │ │ │ ├── Col.styles.ts │ │ │ │ │ └── Col.svelte │ │ │ │ ├── Grid.d.ts │ │ │ │ ├── Grid.styles.ts │ │ │ │ ├── Grid.svelte │ │ │ │ ├── Grid.test.ts │ │ │ │ ├── combinator.ts │ │ │ │ └── index.ts │ │ │ ├── Group │ │ │ │ ├── Group.d.ts │ │ │ │ ├── Group.errors.ts │ │ │ │ ├── Group.styles.ts │ │ │ │ ├── Group.svelte │ │ │ │ ├── Group.test.ts │ │ │ │ └── index.ts │ │ │ ├── IconRenderer │ │ │ │ ├── IconRenderer.d.ts │ │ │ │ ├── IconRenderer.stories.svelte │ │ │ │ ├── IconRenderer.styles.ts │ │ │ │ ├── IconRenderer.svelte │ │ │ │ ├── IconRendererUsage.stories.svelte │ │ │ │ └── index.ts │ │ │ ├── Image │ │ │ │ ├── BackgroundImage │ │ │ │ │ ├── BackgroundImage.d.ts │ │ │ │ │ ├── BackgroundImage.styles.ts │ │ │ │ │ ├── BackgroundImage.svelte │ │ │ │ │ └── BackgroundImage.test.ts │ │ │ │ ├── Image.d.ts │ │ │ │ ├── Image.stories.svelte │ │ │ │ ├── Image.styles.ts │ │ │ │ ├── Image.svelte │ │ │ │ ├── Image.test.ts │ │ │ │ ├── ImageIcon.svelte │ │ │ │ └── index.ts │ │ │ ├── Input │ │ │ │ ├── Input.d.ts │ │ │ │ ├── Input.errors.ts │ │ │ │ ├── Input.stories.svelte │ │ │ │ ├── Input.styles.ts │ │ │ │ ├── Input.svelte │ │ │ │ ├── Input.test.ts │ │ │ │ └── index.ts │ │ │ ├── InputWrapper │ │ │ │ ├── InputWrapper.d.ts │ │ │ │ ├── InputWrapper.styles.ts │ │ │ │ ├── InputWrapper.svelte │ │ │ │ ├── InputWrapper.test.ts │ │ │ │ ├── LabelElement.svelte │ │ │ │ ├── LabelElement.test.ts │ │ │ │ └── index.ts │ │ │ ├── JsonInput │ │ │ │ ├── JsonInput.d.ts │ │ │ │ ├── JsonInput.stories.svelte │ │ │ │ ├── JsonInput.svelte │ │ │ │ ├── JsonInput.test.ts │ │ │ │ ├── index.ts │ │ │ │ └── validate-json │ │ │ │ │ └── validate-json.ts │ │ │ ├── Kbd │ │ │ │ ├── Kbd.d.ts │ │ │ │ ├── Kbd.styles.ts │ │ │ │ ├── Kbd.svelte │ │ │ │ ├── Kbd.test.ts │ │ │ │ └── index.ts │ │ │ ├── Loader │ │ │ │ ├── Loader.d.ts │ │ │ │ ├── Loader.stories.svelte │ │ │ │ ├── Loader.styles.ts │ │ │ │ ├── Loader.svelte │ │ │ │ ├── index.ts │ │ │ │ └── loaders │ │ │ │ │ ├── Bars.svelte │ │ │ │ │ ├── Circle.svelte │ │ │ │ │ └── Dots.svelte │ │ │ ├── Mark │ │ │ │ ├── Mark.d.ts │ │ │ │ ├── Mark.stories.svelte │ │ │ │ ├── Mark.styles.ts │ │ │ │ ├── Mark.svelte │ │ │ │ ├── Mark.test.ts │ │ │ │ └── index.ts │ │ │ ├── MediaQuery │ │ │ │ ├── MediaQuery.d.ts │ │ │ │ ├── MediaQuery.styles.ts │ │ │ │ ├── MediaQuery.svelte │ │ │ │ └── index.ts │ │ │ ├── Menu │ │ │ │ ├── Menu.context.ts │ │ │ │ ├── Menu.d.ts │ │ │ │ ├── Menu.stories.svelte │ │ │ │ ├── Menu.styles.ts │ │ │ │ ├── Menu.svelte │ │ │ │ ├── MenuIcon.svelte │ │ │ │ ├── MenuItem │ │ │ │ │ ├── MenuItem.d.ts │ │ │ │ │ ├── MenuItem.styles.ts │ │ │ │ │ └── MenuItem.svelte │ │ │ │ ├── MenuLabel │ │ │ │ │ └── MenuLabel.svelte │ │ │ │ ├── combinator.ts │ │ │ │ └── index.ts │ │ │ ├── Modal │ │ │ │ ├── Modal.d.ts │ │ │ │ ├── Modal.stories.svelte │ │ │ │ ├── Modal.styles.ts │ │ │ │ ├── Modal.svelte │ │ │ │ └── index.ts │ │ │ ├── NativeSelect │ │ │ │ ├── ChevronUpDown.svelte │ │ │ │ ├── NativeSelect.d.ts │ │ │ │ ├── NativeSelect.stories.svelte │ │ │ │ ├── NativeSelect.svelte │ │ │ │ ├── NativeSelect.test.ts │ │ │ │ └── index.ts │ │ │ ├── Notification │ │ │ │ ├── Notification.d.ts │ │ │ │ ├── Notification.styles.ts │ │ │ │ ├── Notification.svelte │ │ │ │ ├── Notification.test.ts │ │ │ │ └── index.ts │ │ │ ├── NumberInput │ │ │ │ ├── NumberInput.d.ts │ │ │ │ ├── NumberInput.stories.svelte │ │ │ │ ├── NumberInput.styles.ts │ │ │ │ ├── NumberInput.svelte │ │ │ │ ├── NumberInput.test.ts │ │ │ │ ├── index.ts │ │ │ │ └── utils.ts │ │ │ ├── ObserverRender │ │ │ │ ├── ObserverRender.d.ts │ │ │ │ ├── ObserverRender.svelte │ │ │ │ ├── ObserverRender.test.ts │ │ │ │ └── index.ts │ │ │ ├── Overlay │ │ │ │ ├── Overlay.d.ts │ │ │ │ ├── Overlay.styles.ts │ │ │ │ ├── Overlay.svelte │ │ │ │ ├── Overlay.test.ts │ │ │ │ └── index.ts │ │ │ ├── Paper │ │ │ │ ├── Paper.d.ts │ │ │ │ ├── Paper.stories.svelte │ │ │ │ ├── Paper.styles.ts │ │ │ │ ├── Paper.svelte │ │ │ │ ├── Paper.test.ts │ │ │ │ └── index.ts │ │ │ ├── PasswordInput │ │ │ │ ├── PasswordInput.d.ts │ │ │ │ ├── PasswordInput.stories.svelte │ │ │ │ ├── PasswordInput.styles.ts │ │ │ │ ├── PasswordInput.svelte │ │ │ │ ├── PasswordInput.test.ts │ │ │ │ ├── PasswordToggleIcon.svelte │ │ │ │ └── index.ts │ │ │ ├── Popper │ │ │ │ ├── Popper.d.ts │ │ │ │ ├── Popper.styles.ts │ │ │ │ ├── Popper.svelte │ │ │ │ ├── Popper.test.ts │ │ │ │ ├── PopperContainer │ │ │ │ │ ├── PopperContainer.svelte │ │ │ │ │ └── index.ts │ │ │ │ └── index.ts │ │ │ ├── Portal │ │ │ │ ├── OptionalPortal.d.ts │ │ │ │ ├── OptionalPortal.svelte │ │ │ │ ├── OptionalPortal.test.ts │ │ │ │ ├── Portal.d.ts │ │ │ │ ├── Portal.svelte │ │ │ │ ├── Portal.test.ts │ │ │ │ └── index.ts │ │ │ ├── Progress │ │ │ │ ├── Progress.d.ts │ │ │ │ ├── Progress.stories.svelte │ │ │ │ ├── Progress.styles.ts │ │ │ │ ├── Progress.svelte │ │ │ │ └── index.ts │ │ │ ├── Radio │ │ │ │ ├── Radio.d.ts │ │ │ │ ├── Radio.stories.svelte │ │ │ │ ├── Radio.styles.ts │ │ │ │ ├── Radio.svelte │ │ │ │ ├── Radio.test.ts │ │ │ │ ├── RadioGroup │ │ │ │ │ ├── RadioGroup.d.ts │ │ │ │ │ ├── RadioGroup.svelte │ │ │ │ │ └── RadioGroup.test.ts │ │ │ │ └── index.ts │ │ │ ├── SegmentedControl │ │ │ │ ├── SegmentedControl.d.ts │ │ │ │ ├── SegmentedControl.styles.ts │ │ │ │ ├── SegmentedControl.svelte │ │ │ │ └── index.ts │ │ │ ├── Seo │ │ │ │ ├── Seo.d.ts │ │ │ │ ├── Seo.svelte │ │ │ │ └── index.ts │ │ │ ├── SimpleGrid │ │ │ │ ├── SimpleGrid.d.ts │ │ │ │ ├── SimpleGrid.styles.ts │ │ │ │ ├── SimpleGrid.svelte │ │ │ │ ├── SimpleGrid.test.ts │ │ │ │ ├── get-sorted-breakpoints.ts │ │ │ │ └── index.ts │ │ │ ├── Skeleton │ │ │ │ ├── Skeleton.d.ts │ │ │ │ ├── Skeleton.styles.ts │ │ │ │ ├── Skeleton.svelte │ │ │ │ ├── Skeleton.test.ts │ │ │ │ └── index.ts │ │ │ ├── Space │ │ │ │ ├── Space.d.ts │ │ │ │ ├── Space.styles.ts │ │ │ │ ├── Space.svelte │ │ │ │ ├── Space.test.ts │ │ │ │ └── index.ts │ │ │ ├── Stack │ │ │ │ ├── Stack.d.ts │ │ │ │ ├── Stack.errors.ts │ │ │ │ ├── Stack.stories.svelte │ │ │ │ ├── Stack.styles.ts │ │ │ │ ├── Stack.svelte │ │ │ │ ├── Stack.test.ts │ │ │ │ └── index.ts │ │ │ ├── Switch │ │ │ │ ├── Switch.d.ts │ │ │ │ ├── Switch.stories.svelte │ │ │ │ ├── Switch.styles.ts │ │ │ │ ├── Switch.svelte │ │ │ │ ├── Switch.test.ts │ │ │ │ └── index.ts │ │ │ ├── Tabs │ │ │ │ ├── Tab │ │ │ │ │ ├── Tab.d.ts │ │ │ │ │ ├── Tab.styles.ts │ │ │ │ │ └── Tab.svelte │ │ │ │ ├── Tabs.d.ts │ │ │ │ ├── Tabs.stories.svelte │ │ │ │ ├── Tabs.styles.ts │ │ │ │ ├── Tabs.svelte │ │ │ │ ├── Tabs.test.ts │ │ │ │ ├── combinator.ts │ │ │ │ └── index.ts │ │ │ ├── Text │ │ │ │ ├── Text.d.ts │ │ │ │ ├── Text.errors.ts │ │ │ │ ├── Text.stories.svelte │ │ │ │ ├── Text.styles.ts │ │ │ │ ├── Text.svelte │ │ │ │ ├── Text.test.ts │ │ │ │ └── index.ts │ │ │ ├── TextInput │ │ │ │ ├── TextInput.d.ts │ │ │ │ ├── TextInput.stories.svelte │ │ │ │ ├── TextInput.svelte │ │ │ │ ├── TextInput.test.ts │ │ │ │ └── index.ts │ │ │ ├── Textarea │ │ │ │ ├── Textarea.d.ts │ │ │ │ ├── Textarea.stories.svelte │ │ │ │ ├── Textarea.svelte │ │ │ │ ├── Textarea.test.ts │ │ │ │ └── index.ts │ │ │ ├── ThemeIcon │ │ │ │ ├── ThemeIcon.d.ts │ │ │ │ ├── ThemeIcon.styles.ts │ │ │ │ ├── ThemeIcon.svelte │ │ │ │ ├── ThemeIcon.test.ts │ │ │ │ └── index.ts │ │ │ ├── Timeline │ │ │ │ ├── Timeline.d.ts │ │ │ │ ├── Timeline.styles.ts │ │ │ │ ├── Timeline.svelte │ │ │ │ ├── Timeline.test.ts │ │ │ │ ├── TimelineItem │ │ │ │ │ ├── TimelineItem.d.ts │ │ │ │ │ ├── TimelineItem.styles.ts │ │ │ │ │ └── TimelineItem.svelte │ │ │ │ ├── combinator.ts │ │ │ │ └── index.ts │ │ │ ├── Title │ │ │ │ ├── Title.d.ts │ │ │ │ ├── Title.stories.svelte │ │ │ │ ├── Title.styles.ts │ │ │ │ ├── Title.svelte │ │ │ │ ├── Title.test.ts │ │ │ │ └── index.ts │ │ │ ├── Tooltip │ │ │ │ ├── Tooltip.d.ts │ │ │ │ ├── Tooltip.styles.ts │ │ │ │ ├── Tooltip.svelte │ │ │ │ ├── Tooltip.test.ts │ │ │ │ └── index.ts │ │ │ ├── TypographyProvider │ │ │ │ ├── TypographyProvider.d.ts │ │ │ │ ├── TypographyProvider.styles.ts │ │ │ │ ├── TypographyProvider.svelte │ │ │ │ ├── TypographyProvider.test.ts │ │ │ │ └── index.ts │ │ │ └── index.ts │ │ ├── index.ts │ │ ├── internal │ │ │ ├── errors │ │ │ │ ├── Error.svelte │ │ │ │ ├── assets │ │ │ │ │ └── error-styles.ts │ │ │ │ ├── error-context.ts │ │ │ │ ├── exception.ts │ │ │ │ ├── index.ts │ │ │ │ ├── modules │ │ │ │ │ └── browser.ts │ │ │ │ ├── types │ │ │ │ │ ├── CurrentComponents.d.ts │ │ │ │ │ ├── error-context.d.ts │ │ │ │ │ ├── index.d.ts │ │ │ │ │ └── user-exception.d.ts │ │ │ │ └── user-exception.ts │ │ │ ├── index.ts │ │ │ ├── temp │ │ │ │ ├── actions │ │ │ │ │ └── use-clipboard │ │ │ │ │ │ └── use-clipboard.ts │ │ │ │ └── index.ts │ │ │ ├── types │ │ │ │ ├── Component.d.ts │ │ │ │ ├── Transition.d.ts │ │ │ │ ├── helpers.d.ts │ │ │ │ ├── index.d.ts │ │ │ │ ├── index.ts │ │ │ │ ├── literal-union.d.ts │ │ │ │ └── primitive.d.ts │ │ │ └── utils │ │ │ │ ├── environment.ts │ │ │ │ ├── forwarding │ │ │ │ ├── forward-actions.ts │ │ │ │ ├── forward-events.ts │ │ │ │ └── forward-transitions.ts │ │ │ │ ├── get-transition │ │ │ │ └── get-transition.ts │ │ │ │ └── index.ts │ │ └── styles │ │ │ ├── engine │ │ │ ├── create-styles.ts │ │ │ ├── css.ts │ │ │ ├── index.ts │ │ │ ├── types │ │ │ │ ├── ARIA.d.ts │ │ │ │ ├── Selectors.d.ts │ │ │ │ ├── index.d.ts │ │ │ │ └── index.ts │ │ │ └── utils │ │ │ │ └── from-entries │ │ │ │ └── from-entries.ts │ │ │ ├── index.ts │ │ │ ├── ssr.ts │ │ │ ├── stitches.config.ts │ │ │ └── theme │ │ │ ├── SvelteUIProvider │ │ │ ├── SvelteUIProvider.svelte │ │ │ ├── default-theme.ts │ │ │ ├── index.ts │ │ │ ├── svelteui.provider.ts │ │ │ └── svelteui.stores.ts │ │ │ ├── default-colors.ts │ │ │ ├── functions │ │ │ ├── attach-functions.ts │ │ │ ├── fns │ │ │ │ ├── cover │ │ │ │ │ └── cover.ts │ │ │ │ ├── index.ts │ │ │ │ ├── radius │ │ │ │ │ └── radius.ts │ │ │ │ ├── rgba │ │ │ │ │ └── rgba.ts │ │ │ │ ├── size │ │ │ │ │ └── size.ts │ │ │ │ ├── theme-color │ │ │ │ │ └── theme-color.ts │ │ │ │ └── variant │ │ │ │ │ └── variant.ts │ │ │ └── index.ts │ │ │ ├── index.ts │ │ │ ├── types │ │ │ ├── ColorScheme.d.ts │ │ │ ├── DeepPartial.d.ts │ │ │ ├── DefaultProps.d.ts │ │ │ ├── SvelteUIColor.d.ts │ │ │ ├── SvelteUIGradient.d.ts │ │ │ ├── SvelteUIMargin.d.ts │ │ │ ├── SvelteUIShadow.d.ts │ │ │ ├── SvelteUISize.d.ts │ │ │ ├── SvelteUIStyleSystem.d.ts │ │ │ ├── SvelteUITheme.d.ts │ │ │ ├── SvelteUITypography.d.ts │ │ │ ├── index.d.ts │ │ │ └── index.ts │ │ │ └── utils │ │ │ ├── extract-system-styles │ │ │ └── extract-system-styles.ts │ │ │ ├── get-size │ │ │ ├── get-size.test.ts │ │ │ └── get-size.ts │ │ │ ├── get-variant-theme │ │ │ └── get-variant-theme.ts │ │ │ ├── merge-theme │ │ │ └── merge-theme.ts │ │ │ ├── random-id │ │ │ └── random-id.ts │ │ │ ├── rem │ │ │ └── rem.ts │ │ │ └── to-rgba │ │ │ └── to-rgba.ts │ ├── svelte.config.js │ ├── tsconfig.json │ ├── vite.config.js │ └── vitest.config.ts ├── svelteui-dates │ ├── .eslintignore │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── .npmignore │ ├── .npmrc │ ├── .prettierignore │ ├── .prettierrc │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ │ ├── components │ │ │ ├── CalendarBase │ │ │ │ ├── CalendarBase.svelte │ │ │ │ └── CalendarHeader │ │ │ │ │ ├── ArrowIcon.svelte │ │ │ │ │ ├── CalendarHeader.styles.ts │ │ │ │ │ ├── CalendarHeader.svelte │ │ │ │ │ └── SelectChevronIcon.svelte │ │ │ ├── Month │ │ │ │ ├── Day │ │ │ │ │ ├── Day.styles.ts │ │ │ │ │ ├── Day.svelte │ │ │ │ │ ├── get-day-autofocus │ │ │ │ │ │ └── get-day-autofocus.ts │ │ │ │ │ ├── get-day-tab-index │ │ │ │ │ │ └── get-day-tab-index.ts │ │ │ │ │ └── index.ts │ │ │ │ ├── Month.stories.svelte │ │ │ │ ├── Month.styles.ts │ │ │ │ ├── Month.svelte │ │ │ │ ├── get-day-props │ │ │ │ │ ├── get-day-props.ts │ │ │ │ │ ├── get-range-props │ │ │ │ │ │ └── get-range-props.ts │ │ │ │ │ ├── is-disabled │ │ │ │ │ │ └── is-disabled.ts │ │ │ │ │ ├── is-outside │ │ │ │ │ │ └── is-outside.ts │ │ │ │ │ └── is-weekend │ │ │ │ │ │ └── is-weekend.ts │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ └── TimeInputBase │ │ │ │ └── TimeInputBase.styles.ts │ │ ├── index.ts │ │ ├── types.ts │ │ └── utils │ │ │ ├── get-end-of-week │ │ │ ├── get-end-of-week.test.ts │ │ │ └── get-end-of-week.ts │ │ │ ├── get-month-days │ │ │ ├── get-month-days.test.ts │ │ │ └── get-month-days.ts │ │ │ ├── get-months-names │ │ │ ├── get-months-names.test.ts │ │ │ └── get-months-names.ts │ │ │ ├── get-start-of-week │ │ │ ├── get-start-of-week.test.ts │ │ │ └── get-start-of-week.ts │ │ │ ├── get-weekdays-names │ │ │ ├── get-weekdays-names.test.ts │ │ │ └── get-weekdays-names.ts │ │ │ ├── get-years-range │ │ │ ├── get-years-range.test.ts │ │ │ └── get-years-range.ts │ │ │ ├── index.ts │ │ │ ├── is-same-date │ │ │ ├── is-same-date.test.ts │ │ │ └── is-same-date.ts │ │ │ └── is-same-month │ │ │ ├── is-same-month.test.ts │ │ │ └── is-same-month.ts │ ├── svelte.config.js │ ├── tsconfig.json │ └── vite.config.js ├── svelteui-demos │ ├── .eslintignore │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── .npmignore │ ├── .npmrc │ ├── .prettierignore │ ├── .prettierrc │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ │ ├── components │ │ │ ├── CodeDemo │ │ │ │ └── CodeDemo.svelte │ │ │ ├── Configurator │ │ │ │ ├── Configurator.svelte │ │ │ │ └── controls │ │ │ │ │ ├── BooleanControl.svelte │ │ │ │ │ ├── ColorControl.svelte │ │ │ │ │ ├── CompositeControl.svelte │ │ │ │ │ ├── ControlsRenderer.svelte │ │ │ │ │ ├── NumberControl.svelte │ │ │ │ │ ├── SegmentedControl.svelte │ │ │ │ │ ├── SelectControl.svelte │ │ │ │ │ ├── SizeControl.svelte │ │ │ │ │ ├── StringControl.svelte │ │ │ │ │ └── index.ts │ │ │ ├── Demo.svelte │ │ │ └── index.ts │ │ ├── demos │ │ │ ├── composables │ │ │ │ ├── actions │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── use-click-outside │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ └── usage.svelte │ │ │ │ │ ├── use-clipboard │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ └── usage.svelte │ │ │ │ │ ├── use-css-variable │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ └── usage.svelte │ │ │ │ │ ├── use-download │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ └── usage.svelte │ │ │ │ │ ├── use-focus │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ └── usage.svelte │ │ │ │ │ ├── use-hot-key │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ ├── target.svelte │ │ │ │ │ │ └── usage.svelte │ │ │ │ │ ├── use-io │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ └── usage.svelte │ │ │ │ │ ├── use-lazy │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ └── usage.svelte │ │ │ │ │ ├── use-lock-scroll │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ └── usage.svelte │ │ │ │ │ ├── use-long-press │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ └── usage.svelte │ │ │ │ │ ├── use-move │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ └── usage.svelte │ │ │ │ │ ├── use-page-leave │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ └── usage.svelte │ │ │ │ │ ├── use-persistent-tab │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ └── usage.svelte │ │ │ │ │ ├── use-portal │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ └── usage.svelte │ │ │ │ │ └── use-tab-leave │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ └── usage.svelte │ │ │ │ ├── index.ts │ │ │ │ └── utilities │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── use-browser-context │ │ │ │ │ ├── index.ts │ │ │ │ │ └── usage.svelte │ │ │ │ │ ├── use-debounce │ │ │ │ │ ├── index.ts │ │ │ │ │ └── usage.svelte │ │ │ │ │ ├── use-element-size │ │ │ │ │ ├── index.ts │ │ │ │ │ └── usage.svelte │ │ │ │ │ ├── use-eye-dropper │ │ │ │ │ ├── index.ts │ │ │ │ │ └── usage.svelte │ │ │ │ │ ├── use-focus-within │ │ │ │ │ ├── index.ts │ │ │ │ │ └── usage.svelte │ │ │ │ │ ├── use-hash │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── persist.svelte │ │ │ │ │ └── usage.svelte │ │ │ │ │ ├── use-id │ │ │ │ │ ├── index.ts │ │ │ │ │ └── usage.svelte │ │ │ │ │ ├── use-mouse-position │ │ │ │ │ ├── document.svelte │ │ │ │ │ ├── index.ts │ │ │ │ │ └── usage.svelte │ │ │ │ │ ├── use-os │ │ │ │ │ ├── index.ts │ │ │ │ │ └── usage.svelte │ │ │ │ │ ├── use-raf-fn │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── options.svelte │ │ │ │ │ └── usage.svelte │ │ │ │ │ ├── use-throttle │ │ │ │ │ ├── index.ts │ │ │ │ │ └── usage.svelte │ │ │ │ │ ├── use-viewport-size │ │ │ │ │ ├── index.ts │ │ │ │ │ └── usage.svelte │ │ │ │ │ └── use-web-worker │ │ │ │ │ ├── index.ts │ │ │ │ │ └── usage.svelte │ │ │ ├── core │ │ │ │ ├── Accordion │ │ │ │ │ ├── Accordion.demo.chevron.svelte │ │ │ │ │ ├── Accordion.demo.configurator.svelte │ │ │ │ │ ├── Accordion.demo.controlled.svelte │ │ │ │ │ ├── Accordion.demo.custom.svelte │ │ │ │ │ ├── Accordion.demo.data.svelte │ │ │ │ │ ├── Accordion.demo.default.svelte │ │ │ │ │ ├── Accordion.demo.defaultMultiple.svelte │ │ │ │ │ ├── Accordion.demo.disabled.svelte │ │ │ │ │ ├── Accordion.demo.noTransition.svelte │ │ │ │ │ ├── Accordion.demo.transitionDuration.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── ActionIcon │ │ │ │ │ ├── ActionIcon.demo.close.svelte │ │ │ │ │ ├── ActionIcon.demo.colors.svelte │ │ │ │ │ ├── ActionIcon.demo.configurator.svelte │ │ │ │ │ ├── ActionIcon.demo.variants.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Affix │ │ │ │ │ ├── Affix.demo.usage.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Alert │ │ │ │ │ ├── Alert.demo.configurator.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Anchor │ │ │ │ │ ├── Anchor.demo.usage.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── AppShell │ │ │ │ │ ├── AppShell.demo.responsive.svelte │ │ │ │ │ ├── AppShell.demo.usage.svelte │ │ │ │ │ ├── _HeadContent.svelte │ │ │ │ │ ├── _Logo.svelte │ │ │ │ │ ├── _NavContent.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── AspectRatio │ │ │ │ │ ├── AspectRatio.demo.image.svelte │ │ │ │ │ ├── AspectRatio.demo.usage.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Badge │ │ │ │ │ ├── Badge.demo.configurator.svelte │ │ │ │ │ ├── Badge.demo.gradient.svelte │ │ │ │ │ ├── Badge.demo.sections.svelte │ │ │ │ │ ├── Badge.demo.width.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Blockquote │ │ │ │ │ ├── Blockquote.demo.icon.svelte │ │ │ │ │ ├── Blockquote.demo.noicon.svelte │ │ │ │ │ ├── Blockquote.demo.usage.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Box │ │ │ │ │ ├── Box.demo.custom.svelte │ │ │ │ │ ├── Box.demo.usage.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Breadcrumbs │ │ │ │ │ ├── Breadcrumbs.demo.usage.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Burger │ │ │ │ │ ├── Burger.demo.color.svelte │ │ │ │ │ ├── Burger.demo.size.svelte │ │ │ │ │ ├── Burger.demo.usage.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Button │ │ │ │ │ ├── Button.demo.compact.svelte │ │ │ │ │ ├── Button.demo.configurator.svelte │ │ │ │ │ ├── Button.demo.customize.svelte │ │ │ │ │ ├── Button.demo.gradient.svelte │ │ │ │ │ ├── Button.demo.icons.svelte │ │ │ │ │ ├── Button.demo.loadingConfigurator.svelte │ │ │ │ │ ├── Button.demo.overflow.svelte │ │ │ │ │ ├── Button.demo.ripple.svelte │ │ │ │ │ ├── Button.demo.root.svelte │ │ │ │ │ ├── Button.demo.variants.svelte │ │ │ │ │ ├── Button.demo.whiteConfigurator.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Card │ │ │ │ │ ├── Card.demo.usage.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Center │ │ │ │ │ ├── Center.demo.inline.svelte │ │ │ │ │ ├── Center.demo.usage.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Checkbox │ │ │ │ │ ├── Checkbox.demo.configurator.svelte │ │ │ │ │ ├── Checkbox.demo.icon.svelte │ │ │ │ │ ├── Checkbox.demo.indeterminate.svelte │ │ │ │ │ ├── Checkbox.demo.sizes.svelte │ │ │ │ │ ├── Checkbox.demo.states.svelte │ │ │ │ │ ├── CheckboxGroup.demo.configurator.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Chip │ │ │ │ │ ├── Chip.demo.configurator.svelte │ │ │ │ │ ├── Chip.demo.states.svelte │ │ │ │ │ ├── ChipGroup.demo.configurator.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Code │ │ │ │ │ ├── Code.demo.block.svelte │ │ │ │ │ ├── Code.demo.color.svelte │ │ │ │ │ ├── Code.demo.prism.svelte │ │ │ │ │ ├── Code.demo.usage.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Collapse │ │ │ │ │ ├── Collapse.demo.nested.svelte │ │ │ │ │ ├── Collapse.demo.transition.svelte │ │ │ │ │ ├── Collapse.demo.usage.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Container │ │ │ │ │ ├── Container.demo.usage.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Divider │ │ │ │ │ ├── Divider.demo.label.svelte │ │ │ │ │ ├── Divider.demo.size.svelte │ │ │ │ │ ├── Divider.demo.usage.svelte │ │ │ │ │ ├── Divider.demo.vertical.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Flex │ │ │ │ │ ├── Flex.demo.configurator.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Grid │ │ │ │ │ ├── ColWrapper.svelte │ │ │ │ │ ├── Grid.demo.columns.svelte │ │ │ │ │ ├── Grid.demo.grow.svelte │ │ │ │ │ ├── Grid.demo.justify.svelte │ │ │ │ │ ├── Grid.demo.offset.svelte │ │ │ │ │ ├── Grid.demo.responsive.svelte │ │ │ │ │ ├── Grid.demo.rows.svelte │ │ │ │ │ ├── Grid.demo.usage.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Group │ │ │ │ │ ├── Group.demo.configurator.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Image │ │ │ │ │ ├── Image.demo.background.svelte │ │ │ │ │ ├── Image.demo.caption.svelte │ │ │ │ │ ├── Image.demo.placeholder.svelte │ │ │ │ │ ├── Image.demo.radius.svelte │ │ │ │ │ ├── Image.demo.usage.svelte │ │ │ │ │ ├── Image.demo.width.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Input │ │ │ │ │ ├── Input.demo.configurator.svelte │ │ │ │ │ ├── Input.demo.custom.svelte │ │ │ │ │ ├── Input.demo.headless.svelte │ │ │ │ │ ├── Input.demo.sections.svelte │ │ │ │ │ ├── Input.demo.sizes.svelte │ │ │ │ │ ├── Input.demo.variants.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── InputWrapper │ │ │ │ │ ├── InputWrapper.demo.configurator.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── JsonInput │ │ │ │ │ ├── JsonInput.demo.configurator.svelte │ │ │ │ │ ├── JsonInput.demo.disabled.svelte │ │ │ │ │ ├── JsonInput.demo.format.svelte │ │ │ │ │ ├── JsonInput.demo.icon.svelte │ │ │ │ │ ├── JsonInput.demo.validation.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Kbd │ │ │ │ │ ├── Kbd.demo.example.svelte │ │ │ │ │ ├── Kbd.demo.usage.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Loader │ │ │ │ │ ├── Loader.demo.colors.svelte │ │ │ │ │ ├── Loader.demo.size.svelte │ │ │ │ │ ├── Loader.demo.usage.svelte │ │ │ │ │ ├── Loader.demo.variants.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Mark │ │ │ │ │ ├── Mark.demo.color.svelte │ │ │ │ │ ├── Mark.demo.usage.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── MediaQuery │ │ │ │ │ ├── MediaQuery.demo.query.svelte │ │ │ │ │ ├── MediaQuery.demo.usage.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Menu │ │ │ │ │ ├── Menu.demo.control.svelte │ │ │ │ │ ├── Menu.demo.custom.svelte │ │ │ │ │ ├── Menu.demo.disabled.svelte │ │ │ │ │ ├── Menu.demo.hover.svelte │ │ │ │ │ ├── Menu.demo.outside.svelte │ │ │ │ │ ├── Menu.demo.position.svelte │ │ │ │ │ ├── Menu.demo.size.svelte │ │ │ │ │ ├── Menu.demo.styles.svelte │ │ │ │ │ ├── Menu.demo.transition.svelte │ │ │ │ │ ├── Menu.demo.usage.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Modal │ │ │ │ │ ├── Modal.demo.centered.svelte │ │ │ │ │ ├── Modal.demo.header.svelte │ │ │ │ │ ├── Modal.demo.overflow.svelte │ │ │ │ │ ├── Modal.demo.overlay.svelte │ │ │ │ │ ├── Modal.demo.sizes.svelte │ │ │ │ │ ├── Modal.demo.usage.svelte │ │ │ │ │ ├── ModalForm.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── NativeSelect │ │ │ │ │ ├── NativeSelect.demo.binding.svelte │ │ │ │ │ ├── NativeSelect.demo.configurator.svelte │ │ │ │ │ ├── NativeSelect.demo.disabled.svelte │ │ │ │ │ ├── NativeSelect.demo.error.svelte │ │ │ │ │ ├── NativeSelect.demo.icon.svelte │ │ │ │ │ ├── NativeSelect.demo.objects.svelte │ │ │ │ │ ├── NativeSelect.demo.section.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Notification │ │ │ │ │ ├── Notification.demo.configurator.svelte │ │ │ │ │ ├── Notification.demo.usage.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── NumberInput │ │ │ │ │ ├── NumberInput.demo.configurator.svelte │ │ │ │ │ ├── NumberInput.demo.controls.svelte │ │ │ │ │ ├── NumberInput.demo.decimal.svelte │ │ │ │ │ ├── NumberInput.demo.externalcontrols.svelte │ │ │ │ │ ├── NumberInput.demo.hold.svelte │ │ │ │ │ ├── NumberInput.demo.icon.svelte │ │ │ │ │ ├── NumberInput.demo.invalid.svelte │ │ │ │ │ ├── NumberInput.demo.minmax.svelte │ │ │ │ │ ├── NumberInput.demo.parser.svelte │ │ │ │ │ ├── NumberInput.demo.separator.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── ObserverRender │ │ │ │ │ ├── ObserverRender.demo.options.svelte │ │ │ │ │ ├── ObserverRender.demo.slots.svelte │ │ │ │ │ ├── ObserverRender.demo.usage.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Overlay │ │ │ │ │ ├── Overlay.demo.blur.svelte │ │ │ │ │ ├── Overlay.demo.content.svelte │ │ │ │ │ ├── Overlay.demo.gradient.svelte │ │ │ │ │ ├── Overlay.demo.usage.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Paper │ │ │ │ │ ├── Paper.demo.configurator.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── PasswordInput │ │ │ │ │ ├── PasswordInput.demo.configurator.svelte │ │ │ │ │ ├── PasswordInput.demo.controlledvisibility.svelte │ │ │ │ │ ├── PasswordInput.demo.disabled.svelte │ │ │ │ │ ├── PasswordInput.demo.icon.svelte │ │ │ │ │ ├── PasswordInput.demo.invalid.svelte │ │ │ │ │ ├── PasswordInput.demo.visibilityfocus.svelte │ │ │ │ │ ├── PasswordInput.demo.visibilityicon.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Popper │ │ │ │ │ ├── Popper.demo.configurator.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Progress │ │ │ │ │ ├── Progress.demo.colors.svelte │ │ │ │ │ ├── Progress.demo.configurator.svelte │ │ │ │ │ ├── Progress.demo.label.svelte │ │ │ │ │ ├── Progress.demo.sections.svelte │ │ │ │ │ ├── Progress.demo.tween.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Radio │ │ │ │ │ ├── Radio.demo.configurator.svelte │ │ │ │ │ ├── RadioGroup.demo.configurator.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Seo │ │ │ │ │ ├── Seo.demo.usage.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── SimpleGrid │ │ │ │ │ ├── SimpleGrid.demo.breakpoints.svelte │ │ │ │ │ ├── SimpleGrid.demo.configurator.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Skeleton │ │ │ │ │ ├── Skeleton.demo.configurator.svelte │ │ │ │ │ ├── Skeleton.demo.content.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Space │ │ │ │ │ ├── Space.demo.configurator.svelte │ │ │ │ │ ├── Space.demo.configuratorW.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Stack │ │ │ │ │ ├── Stack.demo.configurator.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Switch │ │ │ │ │ ├── Switch.demo.configurator.svelte │ │ │ │ │ ├── Switch.demo.inner.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Tabs │ │ │ │ │ ├── Tabs.demo.colors.svelte │ │ │ │ │ ├── Tabs.demo.component.svelte │ │ │ │ │ ├── Tabs.demo.configurator.svelte │ │ │ │ │ ├── Tabs.demo.icons.svelte │ │ │ │ │ ├── Tabs.demo.override.svelte │ │ │ │ │ ├── Tabs.demo.position.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Text │ │ │ │ │ ├── Text.demo.clamp.svelte │ │ │ │ │ ├── Text.demo.custom.svelte │ │ │ │ │ ├── Text.demo.dimmed.svelte │ │ │ │ │ ├── Text.demo.gradient.svelte │ │ │ │ │ ├── Text.demo.inherit.svelte │ │ │ │ │ ├── Text.demo.usage.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── TextInput │ │ │ │ │ ├── TextInput.demo.configurator.svelte │ │ │ │ │ ├── TextInput.demo.disabled.svelte │ │ │ │ │ ├── TextInput.demo.icon.svelte │ │ │ │ │ ├── TextInput.demo.invalid.svelte │ │ │ │ │ ├── TextInput.demo.rightsection.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Textarea │ │ │ │ │ ├── Textarea.demo.configurator.svelte │ │ │ │ │ ├── Textarea.demo.disabled.svelte │ │ │ │ │ ├── Textarea.demo.icon.svelte │ │ │ │ │ ├── Textarea.demo.invalid.svelte │ │ │ │ │ ├── Textarea.demo.rightsection.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── ThemeIcon │ │ │ │ │ ├── ThemeIcon.demo.colors.svelte │ │ │ │ │ ├── ThemeIcon.demo.configurator.svelte │ │ │ │ │ ├── ThemeIcon.demo.gradient.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Timeline │ │ │ │ │ ├── Timeline.demo.bullet.svelte │ │ │ │ │ ├── Timeline.demo.component.svelte │ │ │ │ │ ├── Timeline.demo.usage.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Title │ │ │ │ │ ├── Title.demo.shared.svelte │ │ │ │ │ ├── Title.demo.usage.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── Tooltip │ │ │ │ │ ├── Tooltip.demo.arrow.svelte │ │ │ │ │ ├── Tooltip.demo.configurator.svelte │ │ │ │ │ ├── Tooltip.demo.controlled.svelte │ │ │ │ │ ├── Tooltip.demo.delay.svelte │ │ │ │ │ ├── Tooltip.demo.multiline.svelte │ │ │ │ │ ├── Tooltip.demo.pointer.svelte │ │ │ │ │ ├── Tooltip.demo.positions.svelte │ │ │ │ │ └── index.ts │ │ │ │ ├── TypographyProvider │ │ │ │ │ ├── TypographyProvider.demo.all.svelte │ │ │ │ │ ├── TypographyProvider.demo.usage.svelte │ │ │ │ │ └── index.ts │ │ │ │ └── UnstyledButton │ │ │ │ │ ├── UnstyledButton.demo.usage.svelte │ │ │ │ │ └── index.ts │ │ │ ├── createStyles │ │ │ │ ├── CreateStyles.demo.basic.svelte │ │ │ │ ├── CreateStyles.demo.cx.svelte │ │ │ │ ├── CreateStyles.demo.params.svelte │ │ │ │ └── index.ts │ │ │ ├── dates │ │ │ │ ├── Month │ │ │ │ │ ├── Month.demo.boundaries.svelte │ │ │ │ │ ├── Month.demo.exclude.svelte │ │ │ │ │ ├── Month.demo.firstDaySunday.svelte │ │ │ │ │ ├── Month.demo.localization.svelte │ │ │ │ │ ├── Month.demo.range.svelte │ │ │ │ │ ├── Month.demo.usage.svelte │ │ │ │ │ ├── Month.demo.weekdays.svelte │ │ │ │ │ ├── Month.demo.weekendDays.svelte │ │ │ │ │ └── index.ts │ │ │ │ └── placeholder.txt │ │ │ ├── misc │ │ │ │ ├── contributing │ │ │ │ │ ├── index.ts │ │ │ │ │ └── tree.demo.example.svelte │ │ │ │ └── index.ts │ │ │ ├── motion │ │ │ │ ├── flipboard │ │ │ │ │ ├── index.ts │ │ │ │ │ └── usage.configurator.svelte │ │ │ │ ├── index.ts │ │ │ │ └── typewriter │ │ │ │ │ ├── index.ts │ │ │ │ │ └── usage.configurator.svelte │ │ │ ├── preprocessors │ │ │ │ ├── placeholder.txt │ │ │ │ └── view-source │ │ │ │ │ ├── index.ts │ │ │ │ │ └── usage.svelte │ │ │ ├── prism │ │ │ │ ├── Prism.demo.copy.svelte │ │ │ │ ├── Prism.demo.lineHighlight.svelte │ │ │ │ ├── Prism.demo.lineNumbers.svelte │ │ │ │ ├── Prism.demo.usage.svelte │ │ │ │ └── index.ts │ │ │ └── theme │ │ │ │ ├── DarkTheme.demo.basic.svelte │ │ │ │ ├── DefaultTheme.demo.basic.svelte │ │ │ │ ├── Override.demo.basic.svelte │ │ │ │ ├── ThemeUtilities.demo.basic.svelte │ │ │ │ └── index.ts │ │ ├── index.ts │ │ ├── types.ts │ │ └── utils │ │ │ ├── index.ts │ │ │ ├── is-enabled.ts │ │ │ ├── props-to-string.ts │ │ │ └── upper-first.ts │ ├── svelte.config.js │ ├── tsconfig.json │ └── vite.config.js ├── svelteui-motion │ ├── .eslintignore │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── .npmignore │ ├── .npmrc │ ├── .prettierignore │ ├── .prettierrc │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ │ ├── animations │ │ │ ├── Animation │ │ │ │ ├── Animation.svelte │ │ │ │ └── index.ts │ │ │ ├── Motion │ │ │ │ └── index.ts │ │ │ ├── TextAnimation │ │ │ │ ├── TextAnimation.svelte │ │ │ │ └── index.ts │ │ │ ├── index.ts │ │ │ └── types │ │ │ │ ├── Animations.ts │ │ │ │ └── index.ts │ │ ├── index.ts │ │ └── transitions │ │ │ ├── flipboard │ │ │ ├── flipboard.config.ts │ │ │ ├── flipboard.ts │ │ │ └── index.ts │ │ │ ├── index.ts │ │ │ ├── types │ │ │ ├── DefaultParams.ts │ │ │ └── index.ts │ │ │ └── typewriter │ │ │ ├── index.ts │ │ │ ├── typewriter.config.ts │ │ │ └── typewriter.ts │ ├── svelte.config.js │ ├── tsconfig.json │ └── vite.config.js ├── svelteui-preprocessors │ ├── .eslintignore │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── .npmignore │ ├── .npmrc │ ├── .prettierignore │ ├── .prettierrc │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ │ ├── SourceCode │ │ │ ├── DisplaySourceCode.svelte │ │ │ ├── SourceCode.svelte │ │ │ ├── index.ts │ │ │ ├── preprocess.ts │ │ │ └── types.ts │ │ ├── index.ts │ │ ├── types.ts │ │ └── utils │ │ │ └── index.ts │ ├── svelte.config.js │ ├── tsconfig.json │ └── vite.config.js ├── svelteui-prism │ ├── .eslintignore │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── .npmignore │ ├── .npmrc │ ├── .prettierignore │ ├── .prettierrc │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ │ ├── Prism │ │ │ ├── Prism.config.ts │ │ │ ├── Prism.errors.ts │ │ │ ├── Prism.styles.ts │ │ │ ├── Prism.svelte │ │ │ ├── clipboard.ts │ │ │ └── index.ts │ │ ├── index.ts │ │ └── types │ │ │ ├── PrismTheme.ts │ │ │ └── index.d.ts │ ├── svelte.config.js │ ├── tsconfig.json │ └── vite.config.js └── svelteui-tests │ ├── .eslintignore │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── .npmignore │ ├── .npmrc │ ├── .prettierignore │ ├── .prettierrc │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ ├── index.ts │ └── it-supports-classname.ts │ ├── svelte.config.js │ ├── tsconfig.json │ └── vite.config.js ├── scripts ├── README.md ├── bump.ts ├── generate-types.ts ├── git │ ├── discard.sh │ ├── rebase-branches.sh │ ├── sync-branches.sh │ └── update-branches.sh ├── pre-release.ts ├── test-script.ts ├── types │ └── index.ts └── utils │ ├── packages.ts │ └── version.ts ├── turbo.json └── yarn.lock /.config/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "commonjs" 3 | } 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | dist 2 | public 3 | .cache 4 | .eslintrc.js 5 | /packages/svelteui-prism/static 6 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = require('./configuration/eslint-preset-svelteui'); 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OS 2 | .DS_Store 3 | 4 | # node 5 | node_modules 6 | 7 | # editor 8 | .idea/ 9 | .vscode/ 10 | 11 | # logs 12 | logs 13 | *.log 14 | npm-debug.log* 15 | yarn-debug.log* 16 | yarn-error.log* 17 | 18 | # build 19 | build 20 | build/** 21 | dist/** 22 | .output 23 | storybook-static 24 | 25 | # project 26 | /coverage 27 | .svelte-kit/* 28 | /.svelte-kit/* 29 | dist 30 | /dist 31 | /packages/svelteui-errors/dist 32 | .vercel 33 | .turbo 34 | .yarn 35 | coverage 36 | 37 | # env 38 | .env 39 | .env.* 40 | !.env.example 41 | -------------------------------------------------------------------------------- /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | yarn pre-commit 5 | -------------------------------------------------------------------------------- /.lintstagedrc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/svelteuidev/svelteui/1538d71a11a969b0c827722fc1e65afc206dc2c8/.lintstagedrc -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | apps/docs/src/routes/changelog/** 2 | apps/docs/.svelte-kit/** 3 | apps/docs/build/** 4 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "printWidth": 100 6 | } 7 | -------------------------------------------------------------------------------- /.vscode/extentions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "streetsidesoftware.code-spell-checker", 4 | "esbenp.prettier-vscode", 5 | "denoland.deno" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /apps/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/svelteuidev/svelteui/1538d71a11a969b0c827722fc1e65afc206dc2c8/apps/.gitkeep -------------------------------------------------------------------------------- /apps/docs/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | .env 6 | .env.* 7 | !.env.example 8 | vite.config.js.timestamp-* 9 | vite.config.ts.timestamp-* 10 | -------------------------------------------------------------------------------- /apps/docs/.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /apps/docs/src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://kit.svelte.dev/docs/types#app 2 | // for information about these interfaces 3 | // and what to do when importing types 4 | declare namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | // interface PageData {} 8 | // interface Platform {} 9 | } 10 | -------------------------------------------------------------------------------- /apps/docs/src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %sveltekit.head% 8 | 9 | 10 |
%sveltekit.body%
11 | 12 | 13 | -------------------------------------------------------------------------------- /apps/docs/src/hooks.server.ts: -------------------------------------------------------------------------------- 1 | import { prepareStylesSSR } from '@svelteuidev/core'; 2 | 3 | export const handle = prepareStylesSSR; 4 | -------------------------------------------------------------------------------- /apps/docs/src/lib/components/PageTransition.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | {#key refresh} 7 |
8 | 9 |
10 | {/key} 11 | -------------------------------------------------------------------------------- /apps/docs/src/lib/components/homepage/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Features } from './Features.svelte'; 2 | export { default as AllComponents } from './AllComponents.svelte'; 3 | export { default as HomePageExample } from './HomePageExample.svelte'; 4 | export { default as Waves } from './Waves/Waves.svelte'; 5 | export { default as ComponentsExample } from './ComponentsExample.svelte'; 6 | // Non components 7 | export { HomePageExampleCode } from './HomePageExample'; 8 | -------------------------------------------------------------------------------- /apps/docs/src/lib/components/mainpages/GettingStarted/Guides/icons/index.js: -------------------------------------------------------------------------------- 1 | export { default as Svelte } from './Svelte.svelte'; 2 | export { default as SvelteKit } from './SvelteKit.svelte'; 3 | export { default as ElderJs } from './ElderJs.svelte'; 4 | -------------------------------------------------------------------------------- /apps/docs/src/lib/components/mainpages/index.ts: -------------------------------------------------------------------------------- 1 | export { default as NextSteps } from './NextSteps.svelte'; 2 | export { default as MainLink } from './MainLink.svelte'; 3 | export { default as Installation } from './GettingStarted/Installation/Installation.svelte'; 4 | export { default as StartGuide } from './GettingStarted/Guides/StartGuide.svelte'; 5 | -------------------------------------------------------------------------------- /apps/docs/src/lib/components/svgs/Arrows.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | {#if open} 8 | 9 | {:else} 10 | 11 | {/if} 12 | -------------------------------------------------------------------------------- /apps/docs/src/lib/components/svgs/index.js: -------------------------------------------------------------------------------- 1 | export { default as Arrows } from './Arrows.svelte'; 2 | export { default as Discord } from './Discord.svelte'; 3 | export { default as TypeScript } from './TypeScript.svelte'; 4 | export { default as Logo } from './Logo.svelte'; 5 | export { default as ChevronDown } from './ChevronDown.svelte'; 6 | -------------------------------------------------------------------------------- /apps/docs/src/lib/components/temp/colors.js: -------------------------------------------------------------------------------- 1 | export const colors = [ 2 | 'dark', 3 | 'gray', 4 | 'red', 5 | 'pink', 6 | 'grape', 7 | 'violet', 8 | 'indigo', 9 | 'blue', 10 | 'cyan', 11 | 'teal', 12 | 'green', 13 | 'lime', 14 | 'yellow', 15 | 'orange' 16 | ]; 17 | -------------------------------------------------------------------------------- /apps/docs/src/lib/data/index.js: -------------------------------------------------------------------------------- 1 | export * from './main'; 2 | export * from './theming'; 3 | -------------------------------------------------------------------------------- /apps/docs/src/lib/data/main/index.js: -------------------------------------------------------------------------------- 1 | export { features, components } from './homepage'; 2 | export { NEXT_STEPS_DATA } from './installation'; 3 | -------------------------------------------------------------------------------- /apps/docs/src/lib/data/theming/index.js: -------------------------------------------------------------------------------- 1 | export { theme, utils } from './utils.data'; 2 | -------------------------------------------------------------------------------- /apps/docs/src/lib/theme/components/Example.svelte: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
6 | 7 |
8 |
9 | -------------------------------------------------------------------------------- /apps/docs/src/lib/theme/ui/Banner/Banner.styles.js: -------------------------------------------------------------------------------- 1 | import { createStyles } from '@svelteuidev/core'; 2 | 3 | export default createStyles((theme) => { 4 | return { 5 | root: { 6 | // 7 | } 8 | }; 9 | }); 10 | -------------------------------------------------------------------------------- /apps/docs/src/lib/theme/ui/Banner/Banner.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
8 |
9 | {message} 10 |
11 |
12 | -------------------------------------------------------------------------------- /apps/docs/src/lib/theme/ui/Banner/index.js: -------------------------------------------------------------------------------- 1 | export { default as Banner } from './Banner.svelte'; 2 | -------------------------------------------------------------------------------- /apps/docs/src/lib/theme/ui/Sibling/index.js: -------------------------------------------------------------------------------- 1 | export { default as Sibling } from './Sibling.svelte'; 2 | -------------------------------------------------------------------------------- /apps/docs/src/lib/theme/ui/index.js: -------------------------------------------------------------------------------- 1 | export * from './Banner'; 2 | export * from './Sibling'; 3 | -------------------------------------------------------------------------------- /apps/docs/src/lib/theme/utils/index.js: -------------------------------------------------------------------------------- 1 | export { outside_click } from './link-actions'; 2 | -------------------------------------------------------------------------------- /apps/docs/src/routes/+error.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | Error 7 | 8 | 9 |

Page not found!

10 | 11 | Go to start page 12 | 13 | 22 | -------------------------------------------------------------------------------- /apps/docs/src/routes/+layout.ts: -------------------------------------------------------------------------------- 1 | import type { PageLoad } from './$types'; 2 | 3 | export const prerender = true; 4 | 5 | // Necessary since without it, console errors are thrown 6 | // when building for production. 7 | export const ssr = false; 8 | 9 | export const load = (async ({ url: { pathname } }) => { 10 | return { 11 | pathname 12 | }; 13 | }) satisfies PageLoad; 14 | -------------------------------------------------------------------------------- /apps/docs/static/Lemon Days.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/svelteuidev/svelteui/1538d71a11a969b0c827722fc1e65afc206dc2c8/apps/docs/static/Lemon Days.otf -------------------------------------------------------------------------------- /apps/docs/static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/svelteuidev/svelteui/1538d71a11a969b0c827722fc1e65afc206dc2c8/apps/docs/static/favicon.png -------------------------------------------------------------------------------- /apps/docs/static/logo-name.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/svelteuidev/svelteui/1538d71a11a969b0c827722fc1e65afc206dc2c8/apps/docs/static/logo-name.png -------------------------------------------------------------------------------- /apps/docs/static/logo-noname.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/svelteuidev/svelteui/1538d71a11a969b0c827722fc1e65afc206dc2c8/apps/docs/static/logo-noname.png -------------------------------------------------------------------------------- /apps/docs/static/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/svelteuidev/svelteui/1538d71a11a969b0c827722fc1e65afc206dc2c8/apps/docs/static/logo.png -------------------------------------------------------------------------------- /apps/docs/static/new-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/svelteuidev/svelteui/1538d71a11a969b0c827722fc1e65afc206dc2c8/apps/docs/static/new-banner.png -------------------------------------------------------------------------------- /apps/docs/vite.config.js: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | 3 | /** @type {import('vite').UserConfig} */ 4 | const config = { 5 | plugins: [sveltekit()], 6 | server: { 7 | fs: { 8 | strict: false 9 | } 10 | } 11 | }; 12 | 13 | export default config; 14 | -------------------------------------------------------------------------------- /configuration/eslint-preset-svelteui/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "eslint-preset-svelteui", 3 | "private": true, 4 | "version": "1.0.0", 5 | "main": "index.js", 6 | "license": "MIT", 7 | "dependencies": { 8 | "@typescript-eslint/eslint-plugin": "5.59.5", 9 | "@typescript-eslint/parser": "5.59.5", 10 | "eslint-config-prettier": "8.8.0", 11 | "eslint-plugin-svelte": "2.28.0" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /configuration/storybook/constants.js: -------------------------------------------------------------------------------- 1 | export const APP_VIEWPORT = { 2 | SM: 768, 3 | MD: 992, 4 | LG: 1200, 5 | XL: 1400 6 | }; 7 | 8 | export const DEFAULT_APP_VIEWPORT = APP_VIEWPORT.LG; 9 | -------------------------------------------------------------------------------- /configuration/svelteui-tsconfig/README.md: -------------------------------------------------------------------------------- 1 | # `tsconfig` 2 | 3 | This is the base shared `tsconfig.json` from which all other `tsconfig.json`'s inherit from. 4 | -------------------------------------------------------------------------------- /configuration/svelteui-tsconfig/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@svelteuidev/tsconfig", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "files": [ 6 | "base.json", 7 | "svelte.json" 8 | ], 9 | "publishConfig": { 10 | "access": "public" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /gallery/Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/svelteuidev/svelteui/1538d71a11a969b0c827722fc1e65afc206dc2c8/gallery/Logo.png -------------------------------------------------------------------------------- /packages/svelteui-composables/.eslintignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | /dist 7 | .env 8 | .env.* 9 | !.env.example 10 | 11 | # Ignore files for PNPM, NPM and YARN 12 | pnpm-lock.yaml 13 | package-lock.json 14 | yarn.lock 15 | -------------------------------------------------------------------------------- /packages/svelteui-composables/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['../../configuration/eslint-preset-svelteui'], 3 | rules: {} 4 | }; 5 | -------------------------------------------------------------------------------- /packages/svelteui-composables/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | /dist 7 | .env 8 | .env.* 9 | !.env.example 10 | -------------------------------------------------------------------------------- /packages/svelteui-composables/.npmignore: -------------------------------------------------------------------------------- 1 | *.test.* 2 | *.stories.svelte -------------------------------------------------------------------------------- /packages/svelteui-composables/.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/.prettierignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | /dist 7 | .env 8 | .env.* 9 | !.env.example 10 | 11 | 12 | # Ignore files for PNPM, NPM and YARN 13 | pnpm-lock.yaml 14 | package-lock.json 15 | yarn.lock 16 | -------------------------------------------------------------------------------- /packages/svelteui-composables/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "printWidth": 100 6 | } 7 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/actions/use-click-outside/index.ts: -------------------------------------------------------------------------------- 1 | export { clickoutside } from './use-click-outside.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/actions/use-clipboard/index.ts: -------------------------------------------------------------------------------- 1 | export { clipboard } from './use-clipboard.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/actions/use-css-variable/index.ts: -------------------------------------------------------------------------------- 1 | export { cssvariable } from './use-css-variable.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/actions/use-download/index.ts: -------------------------------------------------------------------------------- 1 | export { download } from './use-download.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/actions/use-focus-trap/index.ts: -------------------------------------------------------------------------------- 1 | export { focustrap } from './use-focus-trap.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/actions/use-focus/index.ts: -------------------------------------------------------------------------------- 1 | export { focus } from './use-focus.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/actions/use-hot-key/index.ts: -------------------------------------------------------------------------------- 1 | export { hotkey, getHotkeyHandler } from './use-hot-key.js'; 2 | export type { HotkeyItem } from './use-hot-key.js'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/actions/use-io/index.ts: -------------------------------------------------------------------------------- 1 | export { io } from './use-io.js'; 2 | export * as IoConfig from './use-io.config.js'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/actions/use-lazy/index.ts: -------------------------------------------------------------------------------- 1 | export { lazy } from './use-lazy.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/actions/use-lock-scroll/index.ts: -------------------------------------------------------------------------------- 1 | export { lockscroll } from './use-lock-scroll.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/actions/use-lock-scroll/utils/create-style-tag.ts: -------------------------------------------------------------------------------- 1 | export function createStyleTag() { 2 | const tag = document.createElement('style'); 3 | tag.type = 'text/css'; 4 | tag.setAttribute('svelteui-scroll-lock', ''); 5 | 6 | return tag; 7 | } 8 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/actions/use-lock-scroll/utils/get-scroll-width.ts: -------------------------------------------------------------------------------- 1 | export function getScrollWidth() { 2 | if (typeof window === 'undefined' || typeof document === 'undefined') return 0; 3 | 4 | const paddingRight = parseInt(window.getComputedStyle(document.body).paddingRight, 10); 5 | const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth; 6 | 7 | return paddingRight + scrollbarWidth; 8 | } 9 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/actions/use-lock-scroll/utils/inject-style-tag.ts: -------------------------------------------------------------------------------- 1 | export function injectStyles(tag, css): void { 2 | if (tag.styleSheet) { 3 | tag.styleSheet.cssText = css; 4 | } else { 5 | tag.appendChild(document.createTextNode(css)); 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/actions/use-lock-scroll/utils/insert-style-tag.ts: -------------------------------------------------------------------------------- 1 | export function insertStyleTag(tag) { 2 | const head = document.head || document.getElementsByTagName('head')[0]; 3 | 4 | head.appendChild(tag); 5 | } 6 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/actions/use-long-press/index.ts: -------------------------------------------------------------------------------- 1 | export { longpress } from './use-long-press.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/actions/use-move/index.ts: -------------------------------------------------------------------------------- 1 | export { move } from './use-move.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/actions/use-page-leave/index.ts: -------------------------------------------------------------------------------- 1 | export { pageleave } from './use-page-leave.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/actions/use-page-leave/use-page-leave.ts: -------------------------------------------------------------------------------- 1 | import type { Action, Fn } from '../../shared/actions/types'; 2 | 3 | export function pageleave(node: HTMLElement, callback: Fn): ReturnType { 4 | document.documentElement.addEventListener('mouseleave', callback); 5 | 6 | return { 7 | destroy() { 8 | document.documentElement.removeEventListener('mouseleave', callback); 9 | } 10 | }; 11 | } 12 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/actions/use-persistent-tab/index.ts: -------------------------------------------------------------------------------- 1 | export { persistenttab } from './use-persistent-tab.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/actions/use-portal/index.ts: -------------------------------------------------------------------------------- 1 | export { portal } from './use-portal.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/actions/use-tab-leave/index.ts: -------------------------------------------------------------------------------- 1 | export { tableave } from './use-tab-leave.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/actions/use-tab-leave/use-tab-leave.ts: -------------------------------------------------------------------------------- 1 | import type { Action, Fn } from '../../shared/actions/types'; 2 | 3 | export function tableave(node: HTMLElement, callback: Fn): ReturnType { 4 | document.addEventListener('visibilitychange', callback); 5 | 6 | return { 7 | destroy() { 8 | document.removeEventListener('visibilitychange', callback); 9 | } 10 | }; 11 | } 12 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './actions/index.js'; 2 | export * from './utilities/index.js'; 3 | export * from './shared/index.js'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/shared/actions/index.ts: -------------------------------------------------------------------------------- 1 | export * from './utils/index.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/shared/actions/types/index.d.ts: -------------------------------------------------------------------------------- 1 | import type { 2 | Action, 3 | FocusableElement, 4 | UnknownKeyNumber, 5 | UnknownKeyString, 6 | Fn 7 | } from './ActionTypes'; 8 | 9 | export { Action, Fn, FocusableElement, UnknownKeyNumber, UnknownKeyString }; 10 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/shared/actions/utils/clamp.ts: -------------------------------------------------------------------------------- 1 | interface Clamp { 2 | value: number; 3 | min: number; 4 | max: number; 5 | } 6 | 7 | export function clamp({ value, min, max }: Clamp) { 8 | return Math.min(Math.max(value, min), max); 9 | } 10 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/shared/actions/utils/environment.ts: -------------------------------------------------------------------------------- 1 | type Fn = (args: T) => R; 2 | 3 | export interface Environnement { 4 | readonly browser?: boolean | Fn; 5 | readonly server?: boolean | Fn; 6 | } 7 | 8 | const isBrowser = () => typeof window !== 'undefined'; 9 | 10 | export const ENVIRONMENT: Environnement = { 11 | browser: isBrowser(), 12 | server: !isBrowser() 13 | } as const; 14 | 15 | export const defaultWindow = ENVIRONMENT.browser ? window : undefined; 16 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/shared/actions/utils/index.ts: -------------------------------------------------------------------------------- 1 | export { clamp } from './clamp.js'; 2 | export { ENVIRONMENT } from './environment.js'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/shared/index.ts: -------------------------------------------------------------------------------- 1 | export * from './actions/index.js'; 2 | export * from './utilities/index.js'; 3 | export * from './utils/index.js'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/shared/types/a/index.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/shared/types/index.ts: -------------------------------------------------------------------------------- 1 | export * from './a'; 2 | export * from './u'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/shared/types/u/index.ts: -------------------------------------------------------------------------------- 1 | export type { Action, Fn, Pauseable, Writable } from './shared'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/shared/utilities/index.ts: -------------------------------------------------------------------------------- 1 | export * from './utils/index.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/shared/utilities/types/index.ts: -------------------------------------------------------------------------------- 1 | import type { Fn, Pauseable, Action, Writable } from './Shared'; 2 | export type { Fn, Pauseable, Action, Writable }; 3 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/shared/utilities/utils/is/index.ts: -------------------------------------------------------------------------------- 1 | export { 2 | isBoolean, 3 | isClient, 4 | isFunction, 5 | isNumber, 6 | isObject, 7 | isString, 8 | isWindow, 9 | now, 10 | rand, 11 | sleep, 12 | timestamp 13 | } from './is.js'; 14 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/shared/utilities/utils/random-id/index.ts: -------------------------------------------------------------------------------- 1 | export { randomID } from './random-id.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/shared/utilities/utils/random-id/random-id.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Generates random id 3 | * @returns a hash with a svelteui prefix 4 | */ 5 | export function randomID(): string { 6 | return `svelteui-${Math.random().toString(36).substring(2, 10)}`; 7 | } 8 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/shared/utilities/utils/time/index.ts: -------------------------------------------------------------------------------- 1 | export { dateTimeString } from './time.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/shared/utilities/utils/time/time.ts: -------------------------------------------------------------------------------- 1 | export const dateTimeString = ( 2 | timestamp: number, 3 | locale: string | undefined = undefined, 4 | options: Intl.DateTimeFormatOptions = { 5 | dateStyle: 'short', 6 | timeStyle: 'short' 7 | } 8 | ): string => { 9 | const date = new Date(timestamp); 10 | return new Intl.DateTimeFormat(locale, options).format(date); 11 | }; 12 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/shared/utils/index.ts: -------------------------------------------------------------------------------- 1 | export { upperFirst } from './upper-first/upper-first.js'; 2 | export { debounceFilter } from './filter/debounce.js'; 3 | export { createFilterWrapper } from './filter/filter.js'; 4 | export { throttleFilter } from './filter/throttle.js'; 5 | export type { EventFilter, FunctionArgs, FunctionWrapperOptions } from './filter/filter'; 6 | export type { DebounceFilterOptions } from './filter/debounce'; 7 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/shared/utils/upper-first/upper-first.ts: -------------------------------------------------------------------------------- 1 | export function upperFirst(value: string) { 2 | return typeof value !== 'string' ? '' : value.charAt(0).toUpperCase() + value.slice(1); 3 | } 4 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/utilities/use-browser-context/index.ts: -------------------------------------------------------------------------------- 1 | export { useBrowserContext } from './use-browser-context.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/utilities/use-debounce/index.ts: -------------------------------------------------------------------------------- 1 | export { useDebounce } from './use-debounce.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/utilities/use-deep-search/index.ts: -------------------------------------------------------------------------------- 1 | export { useDeepSearch } from './use-deep-search.js'; 2 | export type { DeepSearchOptions } from './types'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/utilities/use-deep-search/types.ts: -------------------------------------------------------------------------------- 1 | export type Obj = Record; 2 | 3 | export interface DeepSearchOptions { 4 | searchFor: 'keys' | 'values'; 5 | } 6 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/utilities/use-element-size/index.ts: -------------------------------------------------------------------------------- 1 | export { useElementSize } from './use-element-size.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/utilities/use-eye-dropper/index.ts: -------------------------------------------------------------------------------- 1 | export { useEyeDropper } from './use-eye-dropper.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/utilities/use-focus-return/index.ts: -------------------------------------------------------------------------------- 1 | export { useFocusReturn } from './use-focus-return.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/utilities/use-focus-within/index.ts: -------------------------------------------------------------------------------- 1 | export { useFocusWithin } from './use-focus-within.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/utilities/use-hash/index.ts: -------------------------------------------------------------------------------- 1 | export { useHash } from './use-hash.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/utilities/use-id/index.ts: -------------------------------------------------------------------------------- 1 | export { useId } from './use-id.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/utilities/use-mouse-position/index.ts: -------------------------------------------------------------------------------- 1 | export { useMousePosition } from './use-mouse-position.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/utilities/use-os/index.ts: -------------------------------------------------------------------------------- 1 | export { useOs } from './use-os.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/utilities/use-raf-fn/index.ts: -------------------------------------------------------------------------------- 1 | export { useRafFn } from './use-raf-fn.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/utilities/use-regex/index.ts: -------------------------------------------------------------------------------- 1 | export { useRegexFactory } from './use-regex.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/utilities/use-throttle/index.ts: -------------------------------------------------------------------------------- 1 | export { useThrottle } from './use-throttle.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/utilities/use-viewport-size/index.ts: -------------------------------------------------------------------------------- 1 | export { useViewportSize } from './use-viewport-size.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-composables/src/utilities/use-web-worker/index.ts: -------------------------------------------------------------------------------- 1 | export { useWebWorker } from './use-web-worker.js'; 2 | export type { UseWebWorkerReturn, WebWorkerOptions, WebWorkerStatus } from './use-web-worker'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-composables/svelte.config.js: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | import preprocess from 'svelte-preprocess'; 3 | 4 | /** @type {import('@sveltejs/kit').Config} */ 5 | const config = { 6 | // Consult https://github.com/sveltejs/svelte-preprocess 7 | // for more information about preprocessors 8 | preprocess: preprocess(), 9 | kit: { 10 | files: { 11 | lib: 'src' 12 | }, 13 | alias: { 14 | $clib: path.resolve('./src') 15 | } 16 | } 17 | }; 18 | 19 | export default config; 20 | -------------------------------------------------------------------------------- /packages/svelteui-composables/test/actions/components/use-click-outside.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
8 |
(open = false) }} /> 9 |
10 | -------------------------------------------------------------------------------- /packages/svelteui-composables/test/actions/components/use-clipboard.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 17 | -------------------------------------------------------------------------------- /packages/svelteui-composables/test/actions/components/use-css-variable.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
8 | -------------------------------------------------------------------------------- /packages/svelteui-composables/test/actions/components/use-focus.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /packages/svelteui-composables/test/actions/components/use-page-leave.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
callback()}>Leave
8 | -------------------------------------------------------------------------------- /packages/svelteui-composables/test/actions/components/use-tab-leave.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
callback()}>Leave
8 | -------------------------------------------------------------------------------- /packages/svelteui-composables/test/actions/example.test.ts: -------------------------------------------------------------------------------- 1 | import { expect, test } from 'vitest'; 2 | 3 | test('example test', async () => { 4 | expect(1 + 1).eq(2); 5 | }); 6 | -------------------------------------------------------------------------------- /packages/svelteui-composables/test/shared/random-id.test.ts: -------------------------------------------------------------------------------- 1 | import { describe, expect, test } from 'vitest'; 2 | 3 | import { randomID } from '$clib'; 4 | 5 | describe('random-id', () => { 6 | test('returns a random string ID', () => { 7 | const id = randomID(); 8 | expect(id.startsWith('svelteui-')).toBeTruthy(); 9 | expect(id.length).eq(17); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /packages/svelteui-composables/test/utilities/example.test.ts: -------------------------------------------------------------------------------- 1 | import { expect, test } from 'vitest'; 2 | 3 | test('example test', async () => { 4 | expect(1 + 1).eq(2); 5 | }); 6 | -------------------------------------------------------------------------------- /packages/svelteui-composables/vite.config.js: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | 3 | /** @type {import('vite').UserConfig} */ 4 | const config = { 5 | plugins: [sveltekit()], 6 | server: process.env.VITEST 7 | ? {} 8 | : { 9 | fs: { 10 | allow: ['./package'] 11 | } 12 | }, 13 | resolve: { 14 | alias: { 15 | $clib: './src' 16 | } 17 | } 18 | }; 19 | 20 | export default config; 21 | -------------------------------------------------------------------------------- /packages/svelteui-core/.eslintignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | /dist 7 | .env 8 | .env.* 9 | !.env.example 10 | 11 | # Ignore files for PNPM, NPM and YARN 12 | pnpm-lock.yaml 13 | package-lock.json 14 | yarn.lock 15 | -------------------------------------------------------------------------------- /packages/svelteui-core/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['../../configuration/eslint-preset-svelteui'], 3 | rules: {} 4 | }; 5 | -------------------------------------------------------------------------------- /packages/svelteui-core/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | /dist 7 | .env 8 | .env.* 9 | !.env.example 10 | -------------------------------------------------------------------------------- /packages/svelteui-core/.npmignore: -------------------------------------------------------------------------------- 1 | *.test.* 2 | *.stories.svelte -------------------------------------------------------------------------------- /packages/svelteui-core/.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /packages/svelteui-core/.prettierignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | /dist 7 | .env 8 | .env.* 9 | !.env.example 10 | 11 | 12 | # Ignore files for PNPM, NPM and YARN 13 | pnpm-lock.yaml 14 | package-lock.json 15 | yarn.lock 16 | -------------------------------------------------------------------------------- /packages/svelteui-core/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "printWidth": 100 6 | } 7 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Accordion/Accordion.styles.ts: -------------------------------------------------------------------------------- 1 | import { createStyles } from '$lib/styles'; 2 | import type { SvelteUINumberSize } from '$lib/styles'; 3 | import type { AccordionVariant } from './Accordion'; 4 | 5 | export interface AccordionStylesParams { 6 | radius: SvelteUINumberSize; 7 | variant: AccordionVariant; 8 | } 9 | 10 | export default createStyles((theme, { radius, variant }: AccordionStylesParams) => { 11 | return { 12 | root: {} 13 | }; 14 | }); 15 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Accordion/Accordion.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { Accordion } from './index'; 5 | 6 | describe('Accordion', () => { 7 | itSupportsClassName(Accordion); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Accordion/AccordionItem/AccordionItem.d.ts: -------------------------------------------------------------------------------- 1 | import { HTMLAttributes } from 'svelte/elements'; 2 | import type { DefaultProps } from '$lib/styles'; 3 | import { Component } from '$lib/internal'; 4 | import { SvelteUINumberSize } from '$lib/styles'; 5 | import { ButtonProps } from '../../Button'; 6 | 7 | export interface AccordionItemProps extends ButtonProps { 8 | value?: string; 9 | chevron?: Component | HTMLOrSVGElement; 10 | disabled?: boolean; 11 | } 12 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Accordion/combinator.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-ts-comment */ 2 | import _Accordion from './Accordion.svelte'; 3 | import AccordionItem from './AccordionItem/AccordionItem.svelte'; 4 | 5 | // @ts-ignore 6 | _Accordion.Item = AccordionItem; 7 | const Accordion = _Accordion as typeof _Accordion & { 8 | Item: typeof AccordionItem; 9 | }; 10 | 11 | export { Accordion }; 12 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Accordion/index.ts: -------------------------------------------------------------------------------- 1 | export { Accordion } from './combinator'; 2 | export type { AccordionProps, AccordionVariant } from './Accordion'; 3 | export type { AccordionStylesParams } from './Accordion.styles'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Accordion/key.ts: -------------------------------------------------------------------------------- 1 | export const key = Symbol(); 2 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/ActionIcon/ActionIcon.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { ActionIcon } from './index'; 5 | 6 | describe('ActionIcon', () => { 7 | itSupportsClassName(ActionIcon); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/ActionIcon/CloseButton/CloseButton.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteUINumberSize } from '$lib/styles'; 2 | import type { ActionIconProps } from '../ActionIcon'; 3 | 4 | export interface CloseButtonProps extends ActionIconProps { 5 | iconSize?: SvelteUINumberSize; 6 | } 7 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/ActionIcon/CloseButton/CloseButton.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as CloseButton } from './CloseButton.svelte'; 5 | 6 | describe('CloseButton', () => { 7 | itSupportsClassName(CloseButton); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/ActionIcon/index.ts: -------------------------------------------------------------------------------- 1 | export { default as ActionIcon } from './ActionIcon.svelte'; 2 | export type { ActionIconProps, ActionIconVariant } from './ActionIcon'; 3 | export type { ActionIconStylesParams } from './ActionIcon.styles'; 4 | export * as ActionIconErrors from './ActionIcon.errors'; 5 | 6 | export { default as CloseButton } from './CloseButton/CloseButton.svelte'; 7 | export { default as CloseIcon } from './CloseButton/CloseIcon.svelte'; 8 | export type { CloseButtonProps } from './CloseButton/CloseButton'; 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Affix/Affix.d.ts: -------------------------------------------------------------------------------- 1 | import { HTMLAttributes } from 'svelte/elements'; 2 | import type { DefaultProps } from '$lib/styles'; 3 | 4 | export interface AffixProps extends DefaultProps, HTMLAttributes { 5 | target?: HTMLElement | string; 6 | zIndex?: number; 7 | position?: { 8 | top?: string | number; 9 | left?: string | number; 10 | bottom?: string | number; 11 | right?: string | number; 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Affix/Affix.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Affix } from './Affix.svelte'; 5 | 6 | describe('Affix', () => { 7 | itSupportsClassName(Affix, {}, true); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Affix/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Affix } from './Affix.svelte'; 2 | export type { AffixProps } from './Affix'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Alert/Alert.stories.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Alert/Alert.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Alert } from './Alert.svelte'; 5 | 6 | describe('Alert', () => { 7 | itSupportsClassName(Alert); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Alert/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Alert } from './Alert.svelte'; 2 | export type { AlertStylesParams } from './Alert.styles'; 3 | export type { AlertProps, AlertVariant } from './Alert'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Anchor/Anchor.d.ts: -------------------------------------------------------------------------------- 1 | import { DefaultProps } from '$lib/styles'; 2 | import { TextProps } from '../Text/Text'; 3 | 4 | export type AnchorVariant = 'filled' | 'outline' | 'light'; 5 | 6 | export interface AnchorProps extends DefaultProps, TextProps { 7 | root?: TextProps['root']; 8 | external?: boolean; 9 | } 10 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Anchor/Anchor.styles.ts: -------------------------------------------------------------------------------- 1 | import { createStyles } from '$lib/styles'; 2 | 3 | export default createStyles(() => { 4 | return { 5 | root: { 6 | backgroundColor: 'transparent', 7 | cursor: 'pointer', 8 | padding: 0, 9 | border: 0 10 | } 11 | }; 12 | }); 13 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Anchor/Anchor.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Anchor } from './Anchor.svelte'; 5 | 6 | describe('Anchor', () => { 7 | itSupportsClassName(Anchor); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Anchor/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Anchor } from './Anchor.svelte'; 2 | export type { AnchorProps } from './Anchor'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/AppShell/AppShell.d.ts: -------------------------------------------------------------------------------- 1 | import { HTMLAttributes } from 'svelte/elements'; 2 | import { DefaultProps, SvelteUINumberSize } from '$lib/styles'; 3 | 4 | export interface AppShellProps extends DefaultProps, HTMLAttributes { 5 | zIndex?: number; 6 | fixed?: boolean; 7 | padding?: SvelteUINumberSize; 8 | navbarOffsetBreakpoint?: SvelteUINumberSize; 9 | asideOffsetBreakpoint?: SvelteUINumberSize; 10 | } 11 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/AppShell/AppShell.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as AppShell } from './AppShell.svelte'; 5 | 6 | describe('AppShell', () => { 7 | itSupportsClassName(AppShell); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/AppShell/Aside/Aside.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Aside } from './Aside.svelte'; 5 | 6 | describe('Aside', () => { 7 | itSupportsClassName(Aside); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/AppShell/Footer/Footer.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Footer } from './Footer.svelte'; 5 | 6 | describe('Footer', () => { 7 | itSupportsClassName(Footer); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/AppShell/Header/Header.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Header } from './Header.svelte'; 5 | 6 | describe('Header', () => { 7 | itSupportsClassName(Header); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/AppShell/HorizontalSection/HorizontalSection.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as HorizontalSection } from './HorizontalSection.svelte'; 5 | 6 | describe('HorizontalSection', () => { 7 | itSupportsClassName(HorizontalSection, { section: 'navbar' }); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/AppShell/HorizontalSection/Section/Section.styles.ts: -------------------------------------------------------------------------------- 1 | import type { DefaultProps } from '$lib/styles'; 2 | 3 | export interface SectionProps extends DefaultProps { 4 | grow: boolean; 5 | } 6 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/AppShell/HorizontalSection/index.ts: -------------------------------------------------------------------------------- 1 | export { default as HorizontalSection } from './HorizontalSection.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/AppShell/Navbar/Navbar.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Navbar } from './Navbar.svelte'; 5 | 6 | describe('Navbar', () => { 7 | itSupportsClassName(Navbar); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/AppShell/VerticalSection/VerticalSection.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as VerticalSection } from './VerticalSection.svelte'; 5 | 6 | describe('VerticalSection', () => { 7 | itSupportsClassName(VerticalSection, { section: 'navbar' }); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/AppShell/VerticalSection/index.ts: -------------------------------------------------------------------------------- 1 | export { default as VerticalSection } from './VerticalSection.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/AspectRatio/AspectRatio.d.ts: -------------------------------------------------------------------------------- 1 | import { HTMLAttributes } from 'svelte/elements'; 2 | import { DefaultProps } from '$lib/styles'; 3 | 4 | export interface AspectRatioProps extends DefaultProps, HTMLAttributes { 5 | ratio: number; 6 | } 7 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/AspectRatio/AspectRatio.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as AspectRatio } from './AspectRatio.svelte'; 5 | import type { AspectRatioProps } from './AspectRatio'; 6 | 7 | const defaultProps: AspectRatioProps = { 8 | ratio: 16 / 9 9 | }; 10 | 11 | describe('AspectRatio', () => { 12 | itSupportsClassName(AspectRatio, defaultProps); 13 | }); 14 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/AspectRatio/index.ts: -------------------------------------------------------------------------------- 1 | export { default as AspectRatio } from './AspectRatio.svelte'; 2 | export type { AspectRatioStylesParams } from './AspectRatio.styles'; 3 | export type { AspectRatioProps } from './AspectRatio'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Badge/Badge.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Badge } from './Badge.svelte'; 5 | 6 | describe('Badge', () => { 7 | itSupportsClassName(Badge); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Badge/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Badge } from './Badge.svelte'; 2 | export type { BadgeStyleParams } from './Badge.styles'; 3 | export type { BadgeProps, BadgeVariant } from './Badge'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Blockquote/Blockquote.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Blockquote } from './Blockquote.svelte'; 5 | 6 | describe('Blockquote', () => { 7 | itSupportsClassName(Blockquote); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Blockquote/QuoteIcon.svelte: -------------------------------------------------------------------------------- 1 | 7 | 10 | 11 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Blockquote/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Blockquote } from './Blockquote.svelte'; 2 | export type { BlockquoteProps } from './Blockquote'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Box/Box.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Box } from './Box.svelte'; 5 | 6 | describe('Box', () => { 7 | itSupportsClassName(Box); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Box/context/index.ts: -------------------------------------------------------------------------------- 1 | export { getSystemStyles } from './get-system-styles/get-system-styles'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Box/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Box } from './Box.svelte'; 2 | export type { BoxProps } from './Box'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Breadcrumbs/Breadcrumbs.styles.ts: -------------------------------------------------------------------------------- 1 | import { createStyles } from '$lib/styles'; 2 | 3 | export default createStyles(() => ({ 4 | root: { 5 | position: 'relative', 6 | display: 'flex' 7 | } 8 | })); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Breadcrumbs/Breadcrumbs.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Breadcrumbs } from './Breadcrumbs.svelte'; 5 | 6 | describe('Breadcrumbs', () => { 7 | itSupportsClassName(Breadcrumbs, { mounted: true }); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Breadcrumbs/BreadcrumbsItem/BreadcrumbsItem.d.ts: -------------------------------------------------------------------------------- 1 | import { HTMLAttributes } from 'svelte/elements'; 2 | import { DefaultProps, SvelteUIColor, SvelteUINumberSize } from '$lib/styles'; 3 | 4 | export interface BreadcrumbItemProps 5 | extends DefaultProps, 6 | HTMLAttributes { 7 | value?: number; 8 | color?: SvelteUIColor; 9 | size?: SvelteUINumberSize; 10 | label?: string; 11 | active?: boolean; 12 | href?: string; 13 | } 14 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Breadcrumbs/BreadcrumbsItem/index.ts: -------------------------------------------------------------------------------- 1 | export { default as BreadcrumbsItem } from './BreadcrumbsItem.svelte'; 2 | export type { BreadcrumbItemStylesParams } from './BreadcrumbsItem.styles'; 3 | export type { BreadcrumbItemProps } from './BreadcrumbsItem'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Breadcrumbs/combinator.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-ts-comment */ 2 | import _Breadcrumb from './Breadcrumbs.svelte'; 3 | import Item from './BreadcrumbsItem/BreadcrumbsItem.svelte'; 4 | 5 | // @ts-ignore 6 | _Breadcrumb.Item = Item; 7 | const Breadcrumbs = _Breadcrumb as typeof _Breadcrumb & { Item: typeof Item }; 8 | 9 | export { Breadcrumbs }; 10 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Breadcrumbs/index.ts: -------------------------------------------------------------------------------- 1 | export { Breadcrumbs } from './combinator'; 2 | export type { BreadcrumbProps } from './Breadcrumbs'; 3 | export type { BreadcrumbItemProps, BreadcrumbItemStylesParams } from './BreadcrumbsItem'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Burger/Burger.d.ts: -------------------------------------------------------------------------------- 1 | import { SvelteUIColor, SvelteUINumberSize } from '$lib/styles'; 2 | import { UnstyledButtonProps } from '../Button/UnstyledButton/UnstyledButton'; 3 | 4 | export interface BurgerProps extends UnstyledButtonProps { 5 | opened?: boolean; 6 | color?: SvelteUIColor; 7 | size?: SvelteUINumberSize; 8 | } 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Burger/Burger.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Burger } from './Burger.svelte'; 5 | 6 | describe('Burger', () => { 7 | itSupportsClassName(Burger); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Burger/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Burger } from './Burger.svelte'; 2 | export type { BurgerStyleParams } from './Burger.styles'; 3 | export type { BurgerProps } from './Burger'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Button/Button.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Button } from './Button.svelte'; 5 | 6 | describe('Button', () => { 7 | itSupportsClassName(Button); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Button/UnstyledButton/UnstyledButton.d.ts: -------------------------------------------------------------------------------- 1 | import { ButtonProps } from '../Button'; 2 | 3 | export interface UnstyledButtonProps extends ButtonProps { 4 | root?: keyof HTMLElementTagNameMap; 5 | } 6 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Button/UnstyledButton/UnstyledButton.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as UnstyledButton } from './UnstyledButton.svelte'; 5 | 6 | describe('UnstyledButton', () => { 7 | itSupportsClassName(UnstyledButton); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Button/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Button } from './Button.svelte'; 2 | export * as ButtonErrors from './Button.errors'; 3 | export type { ButtonStylesParams } from './Button.styles'; 4 | export type { ButtonProps, ButtonVariant } from './Button'; 5 | 6 | export { default as UnstyledButton } from './UnstyledButton/UnstyledButton.svelte'; 7 | export type { UnstyledButtonProps } from './UnstyledButton/UnstyledButton'; 8 | 9 | export { default as Ripple } from './Ripple.svelte'; 10 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Card/Card.d.ts: -------------------------------------------------------------------------------- 1 | import { PaperProps } from '../Paper/Paper'; 2 | 3 | export interface CardProps extends PaperProps {} 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Card/Card.styles.ts: -------------------------------------------------------------------------------- 1 | import { createStyles } from '$lib/styles'; 2 | 3 | export default createStyles((theme) => { 4 | return { 5 | root: { 6 | position: 'relative', 7 | overflow: 'hidden', 8 | backgroundColor: theme.colors.white.value 9 | } 10 | }; 11 | }); 12 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Card/Card.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Card } from './Card.svelte'; 5 | 6 | describe('Card', () => { 7 | itSupportsClassName(Card); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Card/CardSection/CardSection.d.ts: -------------------------------------------------------------------------------- 1 | import { CardProps } from '../Card'; 2 | 3 | export interface CardSectionProps extends CardProps {} 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Card/CardSection/CardSection.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as CardSection } from './CardSection.svelte'; 5 | 6 | describe('CardSection', () => { 7 | itSupportsClassName(CardSection); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Card/combinator.ts: -------------------------------------------------------------------------------- 1 | import _Card from './Card.svelte'; 2 | import Section from './CardSection/CardSection.svelte'; 3 | 4 | // Combine Card and Section 5 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment 6 | // @ts-ignore 7 | _Card.Section = Section; 8 | const Card = _Card as typeof _Card & { Section: typeof Section }; 9 | 10 | export { Card }; 11 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Card/index.ts: -------------------------------------------------------------------------------- 1 | export { Card } from './combinator'; 2 | export type { CardProps } from './Card'; 3 | 4 | export type { CardSectionStyleParams } from './CardSection/CardSection.styles'; 5 | export type { CardSectionProps } from './CardSection/CardSection'; 6 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Center/Center.d.ts: -------------------------------------------------------------------------------- 1 | import { HTMLAttributes } from 'svelte/elements'; 2 | import { DefaultProps } from '$lib/styles'; 3 | 4 | export interface CenterProps extends DefaultProps, HTMLAttributes { 5 | inline?: boolean; 6 | } 7 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Center/Center.styles.ts: -------------------------------------------------------------------------------- 1 | import { createStyles } from '$lib/styles'; 2 | 3 | export interface CenterStyleParams { 4 | inline: boolean; 5 | } 6 | 7 | export default createStyles((_, { inline }: CenterStyleParams) => { 8 | return { 9 | root: { 10 | display: inline ? 'inline-flex' : 'flex', 11 | alignItems: 'center', 12 | justifyContent: 'center' 13 | } 14 | }; 15 | }); 16 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Center/Center.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Center } from './Center.svelte'; 5 | 6 | describe('Center', () => { 7 | itSupportsClassName(Center); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Center/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Center } from './Center.svelte'; 2 | export type { CenterStyleParams } from './Center.styles'; 3 | export type { CenterProps } from './Center'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Checkbox/Checkbox.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Checkbox } from './Checkbox.svelte'; 5 | 6 | describe('Checkbox', () => { 7 | itSupportsClassName(Checkbox); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Checkbox/CheckboxGroup/CheckboxGroup.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as CheckboxGroup } from './CheckboxGroup.svelte'; 5 | 6 | describe('CheckboxGroup', () => { 7 | itSupportsClassName(CheckboxGroup); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Checkbox/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Checkbox } from './Checkbox.svelte'; 2 | export type { CheckboxStyleParams } from './Checkbox.styles'; 3 | export type { CheckboxProps } from './Checkbox'; 4 | 5 | export { default as CheckboxGroup } from './CheckboxGroup/CheckboxGroup.svelte'; 6 | export type { CheckboxGroupProps } from './CheckboxGroup/CheckboxGroup'; 7 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Chip/Chip.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Chip } from './Chip.svelte'; 5 | 6 | describe('Chip', () => { 7 | itSupportsClassName(Chip); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Chip/ChipGroup/ChipGroup.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as ChipGroup } from './ChipGroup.svelte'; 5 | 6 | describe('ChipGroup', () => { 7 | itSupportsClassName(ChipGroup); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Chip/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Chip } from './Chip.svelte'; 2 | export type { ChipStyleParams } from './Chip.styles'; 3 | export type { ChipProps } from './Chip'; 4 | 5 | export { default as ChipGroup } from './ChipGroup/ChipGroup.svelte'; 6 | export type { ChipGroupProps } from './ChipGroup/ChipGroup'; 7 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Code/Code.d.ts: -------------------------------------------------------------------------------- 1 | import { HTMLAttributes } from 'svelte/elements'; 2 | import { DefaultProps, SvelteUIColor } from '$lib/styles'; 3 | 4 | export interface CodeProps 5 | extends DefaultProps, 6 | HTMLAttributes { 7 | color?: SvelteUIColor; 8 | block?: boolean; 9 | width?: number; 10 | copy?: boolean; 11 | message?: string; 12 | noMono?: boolean; 13 | } 14 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Code/Code.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Code } from './Code.svelte'; 5 | 6 | describe('Code', () => { 7 | itSupportsClassName(Code); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Code/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Code } from './Code.svelte'; 2 | export { default as CopyIcon } from './CopyIcon.svelte'; 3 | export * as CodeErrors from './Code.errors'; 4 | export type { CodeStyleParams } from './Code.styles'; 5 | export type { CodeProps } from './Code'; 6 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Collapse/Collapse.d.ts: -------------------------------------------------------------------------------- 1 | import { HTMLAttributes } from 'svelte/elements'; 2 | import { SlideParams } from 'svelte/transition'; 3 | import { DefaultProps } from '$lib/styles'; 4 | 5 | export interface CollapseProps extends DefaultProps, HTMLAttributes { 6 | open: boolean; 7 | animateOpacity?: boolean; 8 | transitionDuration?: number; 9 | slideTransitionOptions?: SlideParams; 10 | } 11 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Collapse/Collapse.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Collapse } from './Collapse.svelte'; 5 | 6 | describe('Collapse', () => { 7 | itSupportsClassName(Collapse); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Collapse/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Collapse } from './Collapse.svelte'; 2 | export type { CollapseProps } from './Collapse'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Container/Container.d.ts: -------------------------------------------------------------------------------- 1 | import { HTMLAttributes } from 'svelte/elements'; 2 | import { DefaultProps, SvelteUINumberSize, SvelteUISize } from '$lib/styles'; 3 | 4 | export interface ContainerProps extends DefaultProps, HTMLAttributes { 5 | size?: SvelteUINumberSize; 6 | fluid?: boolean; 7 | sizes?: Record; 8 | } 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Container/Container.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Container } from './Container.svelte'; 5 | 6 | describe('Container', () => { 7 | itSupportsClassName(Container); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Container/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Container } from './Container.svelte'; 2 | export type { ContainerStyleParams } from './Container.styles'; 3 | export type { ContainerProps } from './Container'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Divider/Divider.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Divider } from './Divider.svelte'; 5 | 6 | describe('Divider', () => { 7 | itSupportsClassName(Divider); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Divider/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Divider } from './Divider.svelte'; 2 | export * as DividerErrors from './Divider.errors'; 3 | export type { DividerStyleParams } from './Divider.styles'; 4 | export type { DividerProps, DividerVariant } from './Divider'; 5 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/FileUpload/index.ts: -------------------------------------------------------------------------------- 1 | export { default as FileUpload } from './FileUpload.svelte'; 2 | export type { FileUploadStylesParams } from './FileUpload.styles'; 3 | export type { FileUploadProps } from './FileUpload'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Flex/Flex.d.ts: -------------------------------------------------------------------------------- 1 | import { HTMLAttributes } from 'svelte/elements'; 2 | import { CSS, DefaultProps } from '$lib/styles'; 3 | 4 | export interface FlexProps extends DefaultProps, HTMLAttributes { 5 | gap?: CSS['gap']; 6 | rowGap?: CSS['rowGap']; 7 | columnGap?: CSS['columnGap']; 8 | align?: CSS['alignItems']; 9 | justify?: CSS['justifyContent']; 10 | wrap?: CSS['flexWrap']; 11 | direction?: CSS['flexDirection']; 12 | } 13 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Flex/Flex.stories.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Flex/Flex.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Flex } from './Flex.svelte'; 5 | 6 | describe('Flex', () => { 7 | itSupportsClassName(Flex); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Flex/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Flex } from './Flex.svelte'; 2 | export type { FlexStylesParams } from './Flex.styles'; 3 | export type { FlexProps } from './Flex'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Grid/Col/Col.d.ts: -------------------------------------------------------------------------------- 1 | import { HTMLAttributes } from 'svelte/elements'; 2 | import { DefaultProps } from '$lib/styles'; 3 | 4 | export interface ColProps extends DefaultProps, HTMLAttributes { 5 | span?: number; 6 | offset?: number; 7 | offsetXs?: number; 8 | offsetSm?: number; 9 | offsetMd?: number; 10 | offsetLg?: number; 11 | offsetXl?: number; 12 | xs?: number; 13 | sm?: number; 14 | md?: number; 15 | lg?: number; 16 | xl?: number; 17 | } 18 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Grid/Grid.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Grid } from './Grid.svelte'; 5 | 6 | describe('Grid', () => { 7 | itSupportsClassName(Grid); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Grid/combinator.ts: -------------------------------------------------------------------------------- 1 | import _Grid from './Grid.svelte'; 2 | import Col from './Col/Col.svelte'; 3 | 4 | // Combine Grid and Col 5 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment 6 | // @ts-ignore 7 | _Grid.Col = Col; 8 | const Grid = _Grid as typeof _Grid & { Col: typeof Col }; 9 | 10 | export { Grid }; 11 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Grid/index.ts: -------------------------------------------------------------------------------- 1 | export { Grid } from './combinator'; 2 | export type { GridStyleParams } from './Grid.styles'; 3 | export type { GridProps, GridContext } from './Grid'; 4 | export type { ColStyleParams } from './Col/Col.styles'; 5 | export type { ColProps } from './Col/Col'; 6 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Group/Group.d.ts: -------------------------------------------------------------------------------- 1 | import { HTMLAttributes } from 'svelte/elements'; 2 | import { CSS, DefaultProps, SvelteUINumberSize } from '$lib/styles'; 3 | 4 | export type GroupPosition = 'right' | 'center' | 'left' | 'apart'; 5 | 6 | export interface GroupProps extends DefaultProps, HTMLAttributes { 7 | position?: GroupPosition; 8 | noWrap?: boolean; 9 | grow?: boolean; 10 | spacing?: SvelteUINumberSize; 11 | direction?: 'row' | 'column'; 12 | align?: CSS['alignItems']; 13 | children?: number; 14 | } 15 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Group/Group.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Group } from './Group.svelte'; 5 | 6 | describe('Group', () => { 7 | itSupportsClassName(Group); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Group/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Group } from './Group.svelte'; 2 | export type { GroupStylesParams } from './Group.styles'; 3 | export type { GroupProps, GroupPosition } from './Group'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/IconRenderer/IconRenderer.d.ts: -------------------------------------------------------------------------------- 1 | import { HTMLAttributes } from 'svelte/elements'; 2 | import { Component } from '$lib/internal'; 3 | import { DefaultProps, SvelteUINumberSize } from '$lib/styles'; 4 | 5 | export interface IconRendererProps extends DefaultProps, HTMLAttributes { 6 | icon?: Component | HTMLOrSVGElement; 7 | iconSize?: SvelteUINumberSize; 8 | iconProps?: Record; 9 | } 10 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/IconRenderer/index.ts: -------------------------------------------------------------------------------- 1 | export { default as IconRenderer } from './IconRenderer.svelte'; 2 | export type { IconRendererProps } from './IconRenderer'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Image/BackgroundImage/BackgroundImage.d.ts: -------------------------------------------------------------------------------- 1 | import { ImageProps } from '../Image'; 2 | 3 | export interface BackgroundImageProps extends ImageProps {} 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Image/BackgroundImage/BackgroundImage.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as BackgroundImage } from './BackgroundImage.svelte'; 5 | 6 | describe('BackgroundImage', () => { 7 | itSupportsClassName(BackgroundImage); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Image/Image.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Image } from './Image.svelte'; 5 | 6 | describe('Image', () => { 7 | itSupportsClassName(Image); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Image/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Image } from './Image.svelte'; 2 | export { default as ImageIcon } from './ImageIcon.svelte'; 3 | export type { ImageStylesParams } from './Image.styles'; 4 | export type { ImageProps } from './Image'; 5 | 6 | export { default as BackgroundImage } from './BackgroundImage/BackgroundImage.svelte'; 7 | export type { BackgroundImageStyleParams } from './BackgroundImage/BackgroundImage.styles'; 8 | export type { BackgroundImageProps } from './BackgroundImage/BackgroundImage'; 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Input/Input.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Input } from './Input.svelte'; 5 | 6 | describe('Input', () => { 7 | itSupportsClassName(Input, {}, true); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Input/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Input } from './Input.svelte'; 2 | export * as InputErrors from './Input.errors'; 3 | export type { InputStylesParams } from './Input.styles'; 4 | export type { InputProps, InputBaseProps, InputVariant } from './Input'; 5 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/InputWrapper/InputWrapper.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as InputWrapper } from './InputWrapper.svelte'; 5 | 6 | describe('InputWrapper', () => { 7 | itSupportsClassName(InputWrapper); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/InputWrapper/LabelElement.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as LabelElement } from './LabelElement.svelte'; 5 | 6 | describe('LabelElement', () => { 7 | itSupportsClassName(LabelElement); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/InputWrapper/index.ts: -------------------------------------------------------------------------------- 1 | export { default as InputWrapper } from './InputWrapper.svelte'; 2 | export type { InputWrapperStyleParams } from './InputWrapper.styles'; 3 | export type { InputWrapperProps, InputWrapperBaseProps } from './InputWrapper'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/JsonInput/JsonInput.d.ts: -------------------------------------------------------------------------------- 1 | import { TextareaProps } from '../Textarea/Textarea'; 2 | 3 | export interface JsonInputProps extends TextareaProps { 4 | validationError?: string; 5 | serialize?: typeof JSON.stringify; 6 | deserialize?: typeof JSON.parse; 7 | formatOnBlur?: boolean; 8 | } 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/JsonInput/index.ts: -------------------------------------------------------------------------------- 1 | export { default as JsonInput } from './JsonInput.svelte'; 2 | export type { JsonInputProps } from './JsonInput'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/JsonInput/validate-json/validate-json.ts: -------------------------------------------------------------------------------- 1 | export function validateJson(value: string, deserialize: typeof JSON.parse) { 2 | if (!value || (typeof value === 'string' && value.trim().length === 0)) { 3 | return true; 4 | } 5 | 6 | try { 7 | deserialize(value); 8 | return true; 9 | } catch (e) { 10 | return false; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Kbd/Kbd.d.ts: -------------------------------------------------------------------------------- 1 | import { HTMLAttributes } from 'svelte/elements'; 2 | import { DefaultProps } from '$lib/styles'; 3 | 4 | export type KbdPosition = 'right' | 'center' | 'left' | 'apart'; 5 | 6 | export interface KbdProps extends DefaultProps, HTMLAttributes {} 7 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Kbd/Kbd.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Kbd } from './Kbd.svelte'; 5 | 6 | describe('Kbd', () => { 7 | itSupportsClassName(Kbd); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Kbd/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Kbd } from './Kbd.svelte'; 2 | export type { KbdProps } from './Kbd'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Loader/Loader.d.ts: -------------------------------------------------------------------------------- 1 | import { SVGAttributes } from 'svelte/elements'; 2 | import { Component } from '$lib/internal/types'; 3 | import { DefaultProps, SvelteUIColor, SvelteUINumberSize, LoaderType } from '$lib/styles'; 4 | 5 | export interface LoaderProps 6 | extends DefaultProps>, 7 | Omit, 'className'> { 8 | size?: SvelteUINumberSize; 9 | color?: SvelteUIColor | 'white'; 10 | variant?: LoaderType; 11 | } 12 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Loader/Loader.styles.ts: -------------------------------------------------------------------------------- 1 | import { theme } from '$lib/styles'; 2 | import type { SvelteUIColor } from '$lib/styles'; 3 | 4 | export const LOADER_SIZES = { 5 | xs: 18, 6 | sm: 22, 7 | md: 36, 8 | lg: 44, 9 | xl: 58 10 | }; 11 | 12 | export const getCorrectShade = (color: SvelteUIColor | string, dark: boolean = false) => { 13 | return theme.colors[dark ? `${color}400` : `${color}600`].value; 14 | }; 15 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Loader/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Loader } from './Loader.svelte'; 2 | export { default as Bars } from './loaders/Bars.svelte'; 3 | export { default as Circle } from './loaders/Circle.svelte'; 4 | export { default as Dots } from './loaders/Dots.svelte'; 5 | export type { LoaderProps } from './Loader'; 6 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Mark/Mark.d.ts: -------------------------------------------------------------------------------- 1 | import { TextProps } from '../Text/Text'; 2 | 3 | export interface MarkProps extends TextProps {} 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Mark/Mark.stories.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 11 | Here's some random text with a 12 | highlight in it. 13 | 14 | 15 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Mark/Mark.styles.ts: -------------------------------------------------------------------------------- 1 | import { createStyles, type SvelteUIColor } from '$lib/styles'; 2 | 3 | export interface MarkStyleParams { 4 | color: SvelteUIColor; 5 | } 6 | 7 | export default createStyles((theme, { color }: MarkStyleParams) => { 8 | return { 9 | root: { 10 | backgroundColor: theme.fn.themeColor(color, 2), 11 | darkMode: { 12 | backgroundColor: theme.fn.themeColor(color, 5), 13 | color: theme.colors.dark900.value 14 | } 15 | } 16 | }; 17 | }); 18 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Mark/Mark.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Mark } from './Mark.svelte'; 5 | 6 | describe('Mark', () => { 7 | itSupportsClassName(Mark); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Mark/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Mark } from './Mark.svelte'; 2 | export type { MarkProps } from './Mark'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/MediaQuery/MediaQuery.d.ts: -------------------------------------------------------------------------------- 1 | import { HTMLAttributes } from 'svelte/elements'; 2 | import { CSS, DefaultProps, SvelteUINumberSize } from '$lib/styles'; 3 | 4 | export interface MediaQueryProps extends DefaultProps, HTMLAttributes { 5 | smallerThan?: SvelteUINumberSize; 6 | largerThan?: SvelteUINumberSize; 7 | styles?: CSS; 8 | query?: string; 9 | } 10 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/MediaQuery/index.ts: -------------------------------------------------------------------------------- 1 | export { default as MediaQuery } from './MediaQuery.svelte'; 2 | export type { MediaQueryStylesParams } from './MediaQuery.styles'; 3 | export type { MediaQueryProps } from './MediaQuery'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Menu/Menu.context.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteUINumberSize } from '$lib/styles'; 2 | 3 | export interface MenuContextValue { 4 | hovered: number; 5 | radius: SvelteUINumberSize; 6 | onItemHover(index: number); 7 | onItemKeyDown(event: KeyboardEvent): void; 8 | onItemClick(event: MouseEvent): void; 9 | } 10 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Menu/combinator.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-ts-comment */ 2 | import _Menu from './Menu.svelte'; 3 | import Item from './MenuItem/MenuItem.svelte'; 4 | import Label from './MenuLabel/MenuLabel.svelte'; 5 | 6 | // combine Menu, MenuItem, and MenuLabel 7 | 8 | // @ts-ignore 9 | _Menu.Item = Item; 10 | // @ts-ignore 11 | _Menu.Label = Label; 12 | const Menu = _Menu as typeof _Menu & { Item: typeof Item; Label: typeof Label }; 13 | 14 | export { Menu }; 15 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Menu/index.ts: -------------------------------------------------------------------------------- 1 | export { Menu } from './combinator'; 2 | export type { MenuStyleParams } from './Menu.styles'; 3 | export type { MenuProps, MenuEvents } from './Menu'; 4 | 5 | import type MenuComponent from './Menu.svelte'; 6 | export type { MenuComponent }; 7 | 8 | export { default as MenuIcon } from './MenuIcon.svelte'; 9 | export type { MenuItemStylesParams } from './MenuItem/MenuItem.styles'; 10 | export type { MenuItemProps, SharedMenuItemProps } from './MenuItem/MenuItem'; 11 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Modal/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Modal } from './Modal.svelte'; 2 | export type { ModalStylesParams } from './Modal.styles'; 3 | export type { ModalProps, ModalEvents } from './Modal'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/NativeSelect/NativeSelect.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as NativeSelect } from './NativeSelect.svelte'; 5 | 6 | describe('NativeSelect', () => { 7 | itSupportsClassName(NativeSelect); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/NativeSelect/index.ts: -------------------------------------------------------------------------------- 1 | export { default as NativeSelect } from './NativeSelect.svelte'; 2 | export type { NativeSelectProps, SelectItem } from './NativeSelect'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Notification/Notification.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Notification } from './Notification.svelte'; 5 | 6 | describe('Notification', () => { 7 | itSupportsClassName(Notification, {}); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Notification/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Notification } from './Notification.svelte'; 2 | export type { NotificationStylesParams } from './Notification.styles'; 3 | export type { NotificationProps } from './Notification'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/NumberInput/NumberInput.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as NumberInput } from './NumberInput.svelte'; 5 | 6 | describe('NumberInput', () => { 7 | itSupportsClassName(NumberInput); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/NumberInput/index.ts: -------------------------------------------------------------------------------- 1 | export { default as NumberInput } from './NumberInput.svelte'; 2 | export type { NumberInputStyleParams } from './NumberInput.styles'; 3 | export type { NumberInputProps, Formatter, Parser } from './NumberInput'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/NumberInput/utils.ts: -------------------------------------------------------------------------------- 1 | import type { Formatter, Parser } from '../NumberInput'; 2 | 3 | export const defaultFormatter: Formatter = (value) => value || ''; 4 | export const defaultParser: Parser = (num) => { 5 | if (num === '-') return num; 6 | 7 | const parsedNum = parseFloat(num); 8 | return Number.isNaN(parsedNum) ? undefined : num; 9 | }; 10 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/ObserverRender/ObserverRender.d.ts: -------------------------------------------------------------------------------- 1 | import { IoConfig } from '@svelteuidev/composables'; 2 | import { TextInputProps } from '../TextInput/TextInput'; 3 | 4 | export type Formatter = (value: string | undefined) => string; 5 | export type Parser = (value: string | undefined) => string | undefined; 6 | 7 | export interface ObserverRenderProps extends Omit { 8 | options?: IoConfig.Options; 9 | } 10 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/ObserverRender/ObserverRender.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as ObserverRender } from './ObserverRender.svelte'; 5 | 6 | describe('ObserverRender', () => { 7 | itSupportsClassName(ObserverRender); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/ObserverRender/index.ts: -------------------------------------------------------------------------------- 1 | export { default as ObserverRender } from './ObserverRender.svelte'; 2 | export type { ObserverRenderProps } from './ObserverRender'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Overlay/Overlay.d.ts: -------------------------------------------------------------------------------- 1 | import { HTMLAttributes } from 'svelte/elements'; 2 | import { CSS, DefaultProps, SvelteUINumberSize } from '$lib/styles'; 3 | 4 | export interface OverlayProps extends DefaultProps, Omit, 'color'> { 5 | blur?: number; 6 | gradient?: string; 7 | center?: boolean; 8 | opacity?: CSS['opacity']; 9 | color?: CSS['backgroundColor']; 10 | zIndex?: CSS['zIndex']; 11 | radius?: SvelteUINumberSize; 12 | } 13 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Overlay/Overlay.styles.ts: -------------------------------------------------------------------------------- 1 | const elevations = { 2 | app: 100, 3 | modal: 200, 4 | popover: 300, 5 | overlay: 400 6 | } as const; 7 | 8 | export function getDefaultZIndex(level: keyof typeof elevations) { 9 | return elevations[level]; 10 | } 11 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Overlay/Overlay.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Overlay } from './Overlay.svelte'; 5 | 6 | describe('Overlay', () => { 7 | itSupportsClassName(Overlay); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Overlay/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Overlay } from './Overlay.svelte'; 2 | export type { OverlayProps } from './Overlay'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Paper/Paper.d.ts: -------------------------------------------------------------------------------- 1 | import { HTMLAttributes } from 'svelte/elements'; 2 | import { DefaultProps, SvelteUINumberSize, SvelteUIShadow } from '$lib/styles'; 3 | 4 | export interface PaperProps extends DefaultProps, HTMLAttributes { 5 | shadow?: SvelteUIShadow; 6 | radius?: SvelteUINumberSize; 7 | withBorder?: boolean; 8 | padding?: SvelteUINumberSize; 9 | } 10 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Paper/Paper.stories.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Paper/Paper.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Paper } from './Paper.svelte'; 5 | 6 | describe('Paper', () => { 7 | itSupportsClassName(Paper); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Paper/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Paper } from './Paper.svelte'; 2 | export type { PaperStyleParams } from './Paper.styles'; 3 | export type { PaperProps } from './Paper'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/PasswordInput/PasswordInput.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as PasswordInput } from './PasswordInput.svelte'; 5 | 6 | describe('PasswordInput', () => { 7 | itSupportsClassName(PasswordInput); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/PasswordInput/index.ts: -------------------------------------------------------------------------------- 1 | export { default as PasswordInput } from './PasswordInput.svelte'; 2 | export type { PasswordInputProps } from './PasswordInput'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Popper/Popper.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Popper } from './Popper.svelte'; 5 | 6 | describe('Popper', () => { 7 | itSupportsClassName(Popper, { mounted: true }); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Popper/PopperContainer/PopperContainer.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | {#if withinPortal} 9 | 10 | 11 | 12 | {:else} 13 | 14 | {/if} 15 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Popper/PopperContainer/index.ts: -------------------------------------------------------------------------------- 1 | export { default as PopperContainer } from './PopperContainer.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Popper/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Popper } from './Popper.svelte'; 2 | export { calculateArrowPlacement } from './Popper.styles'; 3 | export type { PopperStyleParams } from './Popper.styles'; 4 | export type { PopperProps } from './Popper'; 5 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Portal/OptionalPortal.d.ts: -------------------------------------------------------------------------------- 1 | import { PortalProps } from './Portal'; 2 | 3 | export interface OptionalPortalProps extends PortalProps { 4 | withinPortal?: boolean; 5 | } 6 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Portal/OptionalPortal.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Portal } from './Portal.svelte'; 5 | 6 | describe('Portal', () => { 7 | itSupportsClassName(Portal); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Portal/Portal.d.ts: -------------------------------------------------------------------------------- 1 | import { HTMLAttributes } from 'svelte/elements'; 2 | import { DefaultProps } from '$lib/styles'; 3 | 4 | export interface PortalProps extends DefaultProps, HTMLAttributes { 5 | target?: HTMLElement | string; 6 | position?: string; 7 | zIndex?: number; 8 | } 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Portal/Portal.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Portal } from './Portal.svelte'; 5 | 6 | describe('Portal', () => { 7 | itSupportsClassName(Portal); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Portal/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Portal } from './Portal.svelte'; 2 | export type { PortalProps } from './Portal'; 3 | 4 | export { default as OptionalPortal } from './OptionalPortal.svelte'; 5 | export type { OptionalPortalProps } from './OptionalPortal'; 6 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Progress/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Progress } from './Progress.svelte'; 2 | export type { ProgressStylesParams } from './Progress.styles'; 3 | export type { ProgressProps, Sections } from './Progress'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Radio/Radio.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Radio } from './Radio.svelte'; 5 | 6 | describe('Radio', () => { 7 | itSupportsClassName(Radio); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Radio/RadioGroup/RadioGroup.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as RadioGroup } from './RadioGroup.svelte'; 5 | 6 | describe('RadioGroup', () => { 7 | itSupportsClassName(RadioGroup); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Radio/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Radio } from './Radio.svelte'; 2 | export type { RadioStyleParams } from './Radio.styles'; 3 | export type { RadioProps } from './Radio'; 4 | 5 | export { default as RadioGroup } from './RadioGroup/RadioGroup.svelte'; 6 | export type { RadioGroupProps } from './RadioGroup/RadioGroup'; 7 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/SegmentedControl/index.ts: -------------------------------------------------------------------------------- 1 | export { default as SegmentedControl } from './SegmentedControl.svelte'; 2 | export type { SegmentedControlStylesParams } from './SegmentedControl.styles'; 3 | export type { SegmentedControlProps, SegmentedControlItem } from './SegmentedControl'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Seo/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Seo } from './Seo.svelte'; 2 | export type { 3 | SeoProps, 4 | MobileAlternate, 5 | LanguageAlternate, 6 | AdditionalRobotsProps, 7 | Twitter, 8 | Facebook, 9 | OpenGraph 10 | } from './Seo'; 11 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/SimpleGrid/SimpleGrid.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as SimpleGrid } from './SimpleGrid.svelte'; 5 | 6 | describe('SimpleGrid', () => { 7 | itSupportsClassName(SimpleGrid); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/SimpleGrid/index.ts: -------------------------------------------------------------------------------- 1 | export { default as SimpleGrid } from './SimpleGrid.svelte'; 2 | export type { SimpleGridStyleParams } from './SimpleGrid.styles'; 3 | export type { SimpleGridProps, SimpleGridBreakpoint } from './SimpleGrid'; 4 | export { getSortedBreakpoints, size } from './get-sorted-breakpoints'; 5 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Skeleton/Skeleton.d.ts: -------------------------------------------------------------------------------- 1 | import { HTMLAttributes } from 'svelte/elements'; 2 | import { DefaultProps, SvelteUINumberSize } from '$lib/styles'; 3 | 4 | export interface SkeletonProps extends DefaultProps, HTMLAttributes { 5 | visible?: boolean; 6 | height?: number | string; 7 | width?: number | string; 8 | circle?: boolean; 9 | radius?: SvelteUINumberSize; 10 | animate?: boolean; 11 | } 12 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Skeleton/Skeleton.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Skeleton } from './Skeleton.svelte'; 5 | 6 | describe('Skeleton', () => { 7 | itSupportsClassName(Skeleton); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Skeleton/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Skeleton } from './Skeleton.svelte'; 2 | export type { SkeletonStyleParams } from './Skeleton.styles'; 3 | export type { SkeletonProps } from './Skeleton'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Space/Space.d.ts: -------------------------------------------------------------------------------- 1 | import { HTMLAttributes } from 'svelte/elements'; 2 | import { DefaultProps, SvelteUINumberSize } from '$lib/styles'; 3 | 4 | export interface SpaceProps extends DefaultProps, HTMLAttributes { 5 | w?: SvelteUINumberSize; 6 | h?: SvelteUINumberSize; 7 | } 8 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Space/Space.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Space } from './Space.svelte'; 5 | 6 | describe('Space', () => { 7 | itSupportsClassName(Space); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Space/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Space } from './Space.svelte'; 2 | export type { SpaceStyleParams } from './Space.styles'; 3 | export type { SpaceProps } from './Space'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Stack/Stack.d.ts: -------------------------------------------------------------------------------- 1 | import { HTMLAttributes } from 'svelte/elements'; 2 | import { CSS, DefaultProps, SvelteUINumberSize } from '$lib/styles'; 3 | 4 | export interface StackProps extends DefaultProps, HTMLAttributes { 5 | spacing?: SvelteUINumberSize; 6 | align?: CSS['alignItems']; 7 | justify?: CSS['justifyContent']; 8 | } 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Stack/Stack.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Stack } from './Stack.svelte'; 5 | 6 | describe('Stack', () => { 7 | itSupportsClassName(Stack); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Stack/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Stack } from './Stack.svelte'; 2 | export * as StackErrors from './Stack.errors'; 3 | export type { StackStyleParam } from './Stack.styles'; 4 | export type { StackProps } from './Stack'; 5 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Switch/Switch.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Switch } from './Switch.svelte'; 5 | 6 | describe('Switch', () => { 7 | itSupportsClassName(Switch); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Switch/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Switch } from './Switch.svelte'; 2 | export type { SwitchStyleParams } from './Switch.styles'; 3 | export type { SwitchProps, SwitchTimingFunction } from './Switch'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Tabs/Tabs.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Tabs } from './Tabs.svelte'; 5 | 6 | describe('Tabs', () => { 7 | itSupportsClassName(Tabs); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Tabs/combinator.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-ts-comment */ 2 | import _Tabs from './Tabs.svelte'; 3 | import Tab from './Tab/Tab.svelte'; 4 | 5 | // @ts-ignore 6 | _Tabs.Tab = Tab; 7 | const Tabs = _Tabs as typeof _Tabs & { Tab: typeof Tab }; 8 | 9 | export { Tabs }; 10 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Tabs/index.ts: -------------------------------------------------------------------------------- 1 | export { Tabs } from './combinator'; 2 | export type { TabsStyleParams } from './Tabs.styles'; 3 | export type { TabsProps } from './Tabs'; 4 | 5 | export type { TabStyleParams } from './Tab/Tab.styles'; 6 | export type { TabProps } from './Tab/Tab'; 7 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Text/Text.stories.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Text/Text.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Text } from './Text.svelte'; 5 | 6 | describe('Text', () => { 7 | itSupportsClassName(Text); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Text/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Text } from './Text.svelte'; 2 | export * as TextErrors from './Text.errors'; 3 | export type { TextStyleParams } from './Text.styles'; 4 | export type { TextProps, TextVariant, TextColors, Tracking } from './Text'; 5 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/TextInput/TextInput.d.ts: -------------------------------------------------------------------------------- 1 | import { InputProps } from '../Input/Input'; 2 | import { InputWrapperProps } from '../InputWrapper/InputWrapper'; 3 | 4 | export type TextInputProps = InputProps & InputWrapperProps; 5 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/TextInput/TextInput.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as TextInput } from './TextInput.svelte'; 5 | 6 | describe('TextInput', () => { 7 | itSupportsClassName(TextInput); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/TextInput/index.ts: -------------------------------------------------------------------------------- 1 | export { default as TextInput } from './TextInput.svelte'; 2 | export type { TextInputProps } from './TextInput'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Textarea/Textarea.d.ts: -------------------------------------------------------------------------------- 1 | import type { DefaultProps } from '$lib/styles'; 2 | import { InputProps } from '../Input/Input'; 3 | import { InputWrapperProps } from '../InputWrapper/InputWrapper'; 4 | 5 | export type TextareaProps = Omit & 6 | Omit & 7 | DefaultProps; 8 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Textarea/Textarea.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Textarea } from './Textarea.svelte'; 5 | 6 | describe('Textarea', () => { 7 | itSupportsClassName(Textarea); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Textarea/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Textarea } from './Textarea.svelte'; 2 | export type { TextareaProps } from './Textarea'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/ThemeIcon/ThemeIcon.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as ThemeIcon } from './ThemeIcon.svelte'; 5 | 6 | describe('ThemeIcon', () => { 7 | itSupportsClassName(ThemeIcon); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/ThemeIcon/index.ts: -------------------------------------------------------------------------------- 1 | export { default as ThemeIcon } from './ThemeIcon.svelte'; 2 | export type { ThemeIconStyleParams } from './ThemeIcon.styles'; 3 | export type { ThemeIconProps, ThemeIconVariant } from './ThemeIcon'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Timeline/Timeline.styles.ts: -------------------------------------------------------------------------------- 1 | import { createStyles } from '$lib/styles'; 2 | 3 | export interface TimelineStyleParams { 4 | align?: 'left' | 'right'; 5 | bulletSize?: number; 6 | lineWidth?: number; 7 | } 8 | 9 | export default createStyles((_, { align, bulletSize, lineWidth }: TimelineStyleParams) => { 10 | return { 11 | root: { 12 | paddingLeft: align === 'left' ? bulletSize / 2 + lineWidth / 2 : 0, 13 | paddingRight: align === 'left' ? 0 : bulletSize / 2 + lineWidth / 2 14 | } 15 | }; 16 | }); 17 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Timeline/Timeline.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Timeline } from './Timeline.svelte'; 5 | 6 | describe('Timeline', () => { 7 | itSupportsClassName(Timeline); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Timeline/combinator.ts: -------------------------------------------------------------------------------- 1 | import _Timeline from './Timeline.svelte'; 2 | import TimelineItem from './TimelineItem/TimelineItem.svelte'; 3 | 4 | // Combine Timeline and TimelineItem 5 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment 6 | // @ts-ignore 7 | _Timeline.Item = TimelineItem; 8 | const Timeline = _Timeline as typeof _Timeline & { Item: typeof TimelineItem }; 9 | 10 | export { Timeline }; 11 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Timeline/index.ts: -------------------------------------------------------------------------------- 1 | export { Timeline } from './combinator'; 2 | export type { TimelineStyleParams } from './Timeline.styles'; 3 | export type { TimelineProps } from './Timeline'; 4 | 5 | export type { TimelineItemStyleParams } from './TimelineItem/TimelineItem.styles'; 6 | export type { TimelineItemProps } from './TimelineItem/TimelineItem'; 7 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Title/Title.d.ts: -------------------------------------------------------------------------------- 1 | import { TextProps } from '../Text/Text'; 2 | 3 | export type TitleOrder = 1 | 2 | 3 | 4 | 5 | 6; 4 | 5 | export type HTMLHeadingElements = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; 6 | 7 | export interface TitleProps extends TextProps { 8 | order?: TitleOrder; 9 | } 10 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Title/Title.stories.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Title/Title.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Title } from './Title.svelte'; 5 | 6 | describe('Title', () => { 7 | itSupportsClassName(Title); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Title/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Title } from './Title.svelte'; 2 | export type { TitleProps, TitleOrder, HTMLHeadingElements } from './Title'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Tooltip/Tooltip.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as Tooltip } from './Tooltip.svelte'; 5 | 6 | describe('Tooltip', () => { 7 | itSupportsClassName(Tooltip); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/Tooltip/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Tooltip } from './Tooltip.svelte'; 2 | export type { TooltipStyleParams } from './Tooltip.styles'; 3 | export type { TooltipProps } from './Tooltip'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/TypographyProvider/TypographyProvider.d.ts: -------------------------------------------------------------------------------- 1 | import { HTMLAttributes } from 'svelte/elements'; 2 | import { DefaultProps, SvelteUIColor } from '$lib/styles'; 3 | 4 | export interface TypographyProviderProps extends DefaultProps, HTMLAttributes { 5 | underline?: boolean; 6 | primaryColor?: SvelteUIColor; 7 | } 8 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/TypographyProvider/TypographyProvider.test.ts: -------------------------------------------------------------------------------- 1 | import { describe } from 'vitest'; 2 | import { itSupportsClassName } from '@svelteuidev/tests'; 3 | 4 | import { default as TypographyProvider } from './TypographyProvider.svelte'; 5 | 6 | describe('TypographyProvider', () => { 7 | itSupportsClassName(TypographyProvider); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/components/TypographyProvider/index.ts: -------------------------------------------------------------------------------- 1 | export { default as TypographyProvider } from './TypographyProvider.svelte'; 2 | export type { TypographyProviderStyleParams } from './TypographyProvider.styles'; 3 | export type { TypographyProviderProps } from './TypographyProvider'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './internal/index.js'; 2 | export * from './styles/index.js'; 3 | export * from './components/index.js'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/internal/errors/Error.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | {#if observable} 11 | 12 | {@html exception(component, code)} 13 | {/if} 14 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/internal/errors/error-context.ts: -------------------------------------------------------------------------------- 1 | import type { ErrorCtx } from './types'; 2 | 3 | export const errorCtx: ErrorCtx = { 4 | error: false, 5 | message: '', 6 | solution: '' 7 | }; 8 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/internal/errors/exception.ts: -------------------------------------------------------------------------------- 1 | import { UserException } from './user-exception.js'; 2 | import type { ErrorCtx, CurrentComponents } from './types'; 3 | 4 | export function exception(component: CurrentComponents, code: ErrorCtx): string { 5 | const { message, solution } = code; 6 | 7 | if (solution) { 8 | return UserException(component, message, solution); 9 | } 10 | return UserException(component, message); 11 | } 12 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/internal/errors/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Error } from './Error.svelte'; 2 | export { UserException } from './user-exception.js'; 3 | export { errorCtx } from './error-context.js'; 4 | export { exception } from './exception.js'; 5 | 6 | /** types exporting */ 7 | import type { CurrentComponents, ErrorCtx, UserException } from './types'; 8 | export type { CurrentComponents, ErrorCtx, UserException as UserExceptionType }; 9 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/internal/errors/modules/browser.ts: -------------------------------------------------------------------------------- 1 | const isBrowser = () => typeof window !== 'undefined'; 2 | 3 | /** Determines whether the app is running in the browser or on the server. */ 4 | export const browser = isBrowser(); 5 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/internal/errors/types/error-context.d.ts: -------------------------------------------------------------------------------- 1 | export interface ErrorCtx { 2 | error: boolean; 3 | message: string; 4 | solution: string; 5 | } 6 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/internal/errors/types/index.d.ts: -------------------------------------------------------------------------------- 1 | export type { UserException } from './user-exception'; 2 | export type { CurrentComponents } from './CurrentComponents'; 3 | export type { ErrorCtx } from './error-context'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/internal/index.ts: -------------------------------------------------------------------------------- 1 | export * from './temp/index.js'; 2 | export * from './errors/index.js'; 3 | export * from './utils/index.js'; 4 | export * from './types/index.js'; 5 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/internal/temp/index.ts: -------------------------------------------------------------------------------- 1 | export { clipboard } from './actions/use-clipboard/use-clipboard.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/internal/types/Component.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponent } from 'svelte'; 2 | 3 | export type Component = typeof SvelteComponent; 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/internal/types/helpers.d.ts: -------------------------------------------------------------------------------- 1 | export type Func = (...args: any[]) => any; 2 | export type FunctionNoArgs = () => void; 3 | export type FunctionType = (args: T) => R; 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/internal/types/index.d.ts: -------------------------------------------------------------------------------- 1 | export type { Primitive } from './primitive'; 2 | export type { LiteralUnion } from './literal-union'; 3 | export type { Component } from './Component'; 4 | export type { Func, FunctionNoArgs, FunctionType } from './helpers'; 5 | export type { Transition, TransitionName, TransitionOptions, TransitionParams } from './Transition'; 6 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/internal/types/index.ts: -------------------------------------------------------------------------------- 1 | export type { Primitive } from './primitive'; 2 | export type { LiteralUnion } from './literal-union'; 3 | export type { Component } from './Component'; 4 | export type { Func, FunctionNoArgs, FunctionType } from './helpers'; 5 | export type { Transition, TransitionName, TransitionOptions, TransitionParams } from './Transition'; 6 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/internal/types/literal-union.d.ts: -------------------------------------------------------------------------------- 1 | import type { Primitive } from './primitive'; 2 | 3 | export type LiteralUnion = 4 | | LiteralType 5 | | (BaseType & Record); 6 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/internal/types/primitive.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | Matches any [primitive value](https://developer.mozilla.org/en-US/docs/Glossary/Primitive). 3 | @category Type 4 | */ 5 | export type Primitive = null | undefined | string | number | boolean | symbol | bigint; 6 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/internal/utils/forwarding/forward-transitions.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This will be the Action to forward transitions from components. 3 | */ 4 | 5 | export {}; 6 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/internal/utils/index.ts: -------------------------------------------------------------------------------- 1 | export { useActions } from './forwarding/forward-actions.js'; 2 | export { createEventForwarder } from './forwarding/forward-events.js'; 3 | export { ENVIRONMENT } from './environment.js'; 4 | export { getTransition } from './get-transition/get-transition.js'; 5 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/styles/engine/index.ts: -------------------------------------------------------------------------------- 1 | export * from './types/index.js'; 2 | 3 | export { createStyles } from './create-styles.js'; 4 | export { cssFactory } from './css.js'; 5 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/styles/engine/types/Selectors.d.ts: -------------------------------------------------------------------------------- 1 | /** Extracts class names from useStyles hook */ 2 | export type Selectors< 3 | T extends (...args: any) => { classes: Record; cx: (...cx: any) => string } 4 | > = keyof ReturnType['classes']; 5 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/styles/engine/types/index.d.ts: -------------------------------------------------------------------------------- 1 | export type { Selectors } from './Selectors'; 2 | export type { AriaRole, AriaAttributes } from './ARIA'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/styles/engine/types/index.ts: -------------------------------------------------------------------------------- 1 | export type { Selectors } from './Selectors'; 2 | export type { AriaRole, AriaAttributes } from './ARIA'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/styles/engine/utils/from-entries/from-entries.ts: -------------------------------------------------------------------------------- 1 | export function fromEntries(entries: any[]) { 2 | const o: any = {}; 3 | 4 | Object.keys(entries).forEach((key) => { 5 | const [k, v] = entries[key]; 6 | o[k] = v; 7 | }); 8 | 9 | return o; 10 | } 11 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/styles/index.ts: -------------------------------------------------------------------------------- 1 | export * from './theme/index.js'; 2 | export * from './engine/index.js'; 3 | export * from './ssr.js'; 4 | 5 | export { 6 | css, 7 | dark, 8 | reset, 9 | theme, 10 | config, 11 | globalCss, 12 | keyframes, 13 | getCssText, 14 | createTheme, 15 | NormalizeCSS, 16 | SvelteUIGlobalCSS 17 | } from './stitches.config.js'; 18 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/styles/theme/SvelteUIProvider/index.ts: -------------------------------------------------------------------------------- 1 | export { default as SvelteUIProvider } from './SvelteUIProvider.svelte'; 2 | export { useSvelteUITheme } from './default-theme'; 3 | export { colorScheme } from './svelteui.stores'; 4 | export { 5 | key, 6 | globalStyles, 7 | useSvelteUIDefaultProps, 8 | useSvelteUIThemeContext 9 | } from './svelteui.provider'; 10 | export type { 11 | ProviderStyles, 12 | SvelteUIDefaultProps, 13 | SvelteUIProviderContextType, 14 | SvelteUIProviderProps 15 | } from './svelteui.provider'; 16 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/styles/theme/SvelteUIProvider/svelteui.stores.ts: -------------------------------------------------------------------------------- 1 | import { writable } from 'svelte/store'; 2 | import type { Writable } from 'svelte/store'; 3 | import type { ColorScheme } from '../types'; 4 | 5 | export const colorScheme: Writable = writable('light'); 6 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/styles/theme/functions/attach-functions.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/styles/theme/functions/fns/cover/cover.ts: -------------------------------------------------------------------------------- 1 | import { rem } from '../../../utils/rem/rem'; 2 | 3 | export function cover(offset: number | string = 0) { 4 | return { 5 | position: 'absolute', 6 | top: rem(offset), 7 | right: rem(offset), 8 | left: rem(offset), 9 | bottom: rem(offset) 10 | }; 11 | } 12 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/styles/theme/functions/fns/index.ts: -------------------------------------------------------------------------------- 1 | import { themeColor } from './theme-color/theme-color.js'; 2 | import { cover } from './cover/cover.js'; 3 | import { size } from './size/size.js'; 4 | import { radius } from './radius/radius.js'; 5 | import { variant } from './variant/variant.js'; 6 | import { rgba } from './rgba/rgba.js'; 7 | 8 | export type { GetSize } from './size/size'; 9 | 10 | export const fns = { 11 | cover, 12 | size, 13 | radius, 14 | themeColor, 15 | variant, 16 | rgba 17 | } as const; 18 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/styles/theme/functions/fns/radius/radius.ts: -------------------------------------------------------------------------------- 1 | import { useSvelteUITheme, useSvelteUIThemeContext } from '../../../SvelteUIProvider'; 2 | import type { SvelteUINumberSize } from '../../../types'; 3 | 4 | export function radius(radii?: SvelteUINumberSize): number | string { 5 | const theme = useSvelteUIThemeContext()?.theme || useSvelteUITheme(); 6 | 7 | if (typeof radii === 'number') { 8 | return radii; 9 | } 10 | 11 | return theme.radii[radii].value; 12 | } 13 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/styles/theme/functions/fns/rgba/rgba.ts: -------------------------------------------------------------------------------- 1 | import { toRgba } from '../../../utils/to-rgba/to-rgba'; 2 | 3 | export function rgba(color: string, alpha: number = 1) { 4 | if (typeof color !== 'string' || alpha > 1 || alpha < 0) { 5 | return 'rgba(0, 0, 0, 1)'; 6 | } 7 | 8 | const { r, g, b } = toRgba(color); 9 | return `rgba(${r}, ${g}, ${b}, ${alpha})`; 10 | } 11 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/styles/theme/functions/fns/size/size.ts: -------------------------------------------------------------------------------- 1 | export interface GetSize { 2 | size: string | number; 3 | sizes: Record; 4 | } 5 | 6 | export function size(props: GetSize): number { 7 | if (typeof props.size === 'number') { 8 | return props.size; 9 | } 10 | 11 | if (typeof props.sizes[props.size] === 'number') { 12 | return props.sizes[props.size]; 13 | } 14 | 15 | return +props.sizes[props.size]?.value || +props.sizes.md?.value; 16 | } 17 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/styles/theme/functions/index.ts: -------------------------------------------------------------------------------- 1 | export * from './fns/index.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/styles/theme/types/ColorScheme.d.ts: -------------------------------------------------------------------------------- 1 | export type ColorScheme = 'light' | 'dark'; 2 | 3 | export type DefaultBackground = 'white' | '#1A1B1E'; 4 | 5 | export type DefaultColor = 'black' | '#C1C2C5'; 6 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/styles/theme/types/DeepPartial.d.ts: -------------------------------------------------------------------------------- 1 | export type DeepPartial = { 2 | [P in keyof T]?: DeepPartial; 3 | }; 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/styles/theme/types/SvelteUIColor.d.ts: -------------------------------------------------------------------------------- 1 | import type { LiteralUnion } from '$lib/internal'; 2 | 3 | export type SvelteUIColor = LiteralUnion< 4 | | 'dark' 5 | | 'gray' 6 | | 'red' 7 | | 'pink' 8 | | 'grape' 9 | | 'violet' 10 | | 'indigo' 11 | | 'blue' 12 | | 'cyan' 13 | | 'teal' 14 | | 'green' 15 | | 'lime' 16 | | 'yellow' 17 | | 'orange', 18 | string 19 | >; 20 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/styles/theme/types/SvelteUIGradient.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteUIColor } from './SvelteUIColor'; 2 | 3 | export interface SvelteUIGradient { 4 | from: SvelteUIColor; 5 | to: SvelteUIColor; 6 | deg?: number; 7 | } 8 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/styles/theme/types/SvelteUIMargin.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteUINumberSize } from './SvelteUISize'; 2 | 3 | export type SvelteUIMargin = 'm' | 'my' | 'mx' | 'mt' | 'mb' | 'ml' | 'mr'; 4 | type MarginValue = SvelteUINumberSize | (string & Record); 5 | 6 | export interface SvelteUIMargins { 7 | m?: MarginValue; 8 | my?: MarginValue; 9 | mx?: MarginValue; 10 | mt?: MarginValue; 11 | mb?: MarginValue; 12 | ml?: MarginValue; 13 | mr?: MarginValue; 14 | } 15 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/styles/theme/types/SvelteUIShadow.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | import type { SvelteUISize } from './SvelteUISize'; 3 | 4 | export type SvelteUIShadow = SvelteUISize | (string & {}); 5 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/styles/theme/types/SvelteUISize.d.ts: -------------------------------------------------------------------------------- 1 | import type { LiteralUnion } from '$lib/internal'; 2 | 3 | export type SvelteUISize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; 4 | export type SvelteUINumberSize = LiteralUnion; 5 | export type SvelteUISizes = Record; 6 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/styles/theme/types/SvelteUITypography.d.ts: -------------------------------------------------------------------------------- 1 | export type SvelteUIFontSizes = 2 | | 'thin' 3 | | 'extralight' 4 | | 'light' 5 | | 'normal' 6 | | 'medium' 7 | | 'semibold' 8 | | 'bold' 9 | | 'extrabold'; 10 | 11 | export type SvelteUINumberFontSize = SvelteUIFontSizes | number; 12 | 13 | export type SvelteUITextAlignment = 'left' | 'right' | 'center' | 'justify'; 14 | 15 | export type SvelteUITextTransform = 'none' | 'capitalize' | 'uppercase' | 'lowercase'; 16 | -------------------------------------------------------------------------------- /packages/svelteui-core/src/styles/theme/utils/random-id/random-id.ts: -------------------------------------------------------------------------------- 1 | export function randomID(prefix: string = 'svelteui'): string { 2 | return `${prefix}-${Math.random().toString(36).substring(2, 10)}`; 3 | } 4 | -------------------------------------------------------------------------------- /packages/svelteui-core/svelte.config.js: -------------------------------------------------------------------------------- 1 | import preprocess from 'svelte-preprocess'; 2 | import fs from 'fs'; 3 | export const pkg = JSON.parse(fs.readFileSync(new URL('package.json', import.meta.url), 'utf8')); 4 | 5 | /** @type {import('@sveltejs/kit').Config} */ 6 | const config = { 7 | // Consult https://github.com/sveltejs/svelte-preprocess 8 | // for more information about preprocessors 9 | preprocess: preprocess(), 10 | kit: { 11 | files: { 12 | lib: 'src' 13 | } 14 | } 15 | }; 16 | 17 | export default config; 18 | -------------------------------------------------------------------------------- /packages/svelteui-dates/.eslintignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | /dist 7 | .env 8 | .env.* 9 | !.env.example 10 | 11 | # Ignore files for PNPM, NPM and YARN 12 | pnpm-lock.yaml 13 | package-lock.json 14 | yarn.lock 15 | -------------------------------------------------------------------------------- /packages/svelteui-dates/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['../../configuration/eslint-preset-svelteui'], 3 | rules: {} 4 | }; 5 | -------------------------------------------------------------------------------- /packages/svelteui-dates/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | /dist 7 | .env 8 | .env.* 9 | !.env.example 10 | -------------------------------------------------------------------------------- /packages/svelteui-dates/.npmignore: -------------------------------------------------------------------------------- 1 | *.test.* 2 | *.stories.svelte -------------------------------------------------------------------------------- /packages/svelteui-dates/.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /packages/svelteui-dates/.prettierignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | /dist 7 | .env 8 | .env.* 9 | !.env.example 10 | 11 | 12 | # Ignore files for PNPM, NPM and YARN 13 | pnpm-lock.yaml 14 | package-lock.json 15 | yarn.lock 16 | -------------------------------------------------------------------------------- /packages/svelteui-dates/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "printWidth": 100 6 | } 7 | -------------------------------------------------------------------------------- /packages/svelteui-dates/src/components/CalendarBase/CalendarBase.svelte: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/svelteuidev/svelteui/1538d71a11a969b0c827722fc1e65afc206dc2c8/packages/svelteui-dates/src/components/CalendarBase/CalendarBase.svelte -------------------------------------------------------------------------------- /packages/svelteui-dates/src/components/Month/Day/get-day-autofocus/get-day-autofocus.ts: -------------------------------------------------------------------------------- 1 | interface GetDayAutofocus { 2 | hasValue: boolean; 3 | selected: boolean; 4 | firstInMonth: boolean; 5 | } 6 | 7 | export function getDayAutofocus({ hasValue, selected, firstInMonth }: GetDayAutofocus) { 8 | if (hasValue) { 9 | return selected ? true : undefined; 10 | } 11 | 12 | return firstInMonth ? true : undefined; 13 | } 14 | -------------------------------------------------------------------------------- /packages/svelteui-dates/src/components/Month/Day/get-day-tab-index/get-day-tab-index.ts: -------------------------------------------------------------------------------- 1 | interface GetDayTabIndex { 2 | focusable: boolean; 3 | hasValue: boolean; 4 | selected: boolean; 5 | firstInMonth: boolean; 6 | } 7 | 8 | export function getDayTabIndex({ focusable, hasValue, selected, firstInMonth }: GetDayTabIndex) { 9 | if (!focusable) { 10 | return -1; 11 | } 12 | 13 | if (hasValue) { 14 | return selected ? 0 : -1; 15 | } 16 | 17 | return firstInMonth ? 0 : -1; 18 | } 19 | -------------------------------------------------------------------------------- /packages/svelteui-dates/src/components/Month/Day/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Day } from './Day.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-dates/src/components/Month/Month.stories.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/svelteui-dates/src/components/Month/get-day-props/is-outside/is-outside.ts: -------------------------------------------------------------------------------- 1 | import { isSameMonth } from '../../../../utils'; 2 | 3 | export function isOutside(date: Date, month: Date) { 4 | return !isSameMonth(date, month); 5 | } 6 | -------------------------------------------------------------------------------- /packages/svelteui-dates/src/components/Month/get-day-props/is-weekend/is-weekend.ts: -------------------------------------------------------------------------------- 1 | export function isWeekend(date: Date) { 2 | const weekday = date.getDay(); 3 | return weekday === 6 || weekday === 0; 4 | } 5 | -------------------------------------------------------------------------------- /packages/svelteui-dates/src/components/Month/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Month } from './Month.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-dates/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './utils'; 2 | export * from './components/Month'; 3 | 4 | /** Type Exports */ 5 | import type { FirstDayOfWeek } from './types'; 6 | export type { FirstDayOfWeek }; 7 | -------------------------------------------------------------------------------- /packages/svelteui-dates/src/types.ts: -------------------------------------------------------------------------------- 1 | export type FirstDayOfWeek = 'sunday' | 'monday'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-dates/src/utils/get-end-of-week/get-end-of-week.ts: -------------------------------------------------------------------------------- 1 | import type { FirstDayOfWeek } from '../../types'; 2 | 3 | export function getEndOfWeek(date: Date, firstDayOfWeek: FirstDayOfWeek = 'monday') { 4 | const value = new Date(date); 5 | const day = value.getDay(); 6 | const isSunday = firstDayOfWeek === 'sunday'; 7 | 8 | const clampToLastDay = 7 - (isSunday ? day + 1 : day); 9 | 10 | if ((isSunday && day !== 6) || day !== 0) { 11 | value.setDate(value.getDate() + clampToLastDay); 12 | } 13 | 14 | return value; 15 | } 16 | -------------------------------------------------------------------------------- /packages/svelteui-dates/src/utils/get-months-names/get-months-names.ts: -------------------------------------------------------------------------------- 1 | import dayjs from 'dayjs'; 2 | 3 | export function getMonthsNames(locale: string, format: string = 'MMM') { 4 | const names: string[] = []; 5 | const date = new Date(2021, 0, 1); 6 | 7 | for (let i = 0; i < 12; i += 1) { 8 | names.push(dayjs(date).locale(locale).format(format)); 9 | date.setMonth(date.getMonth() + 1); 10 | } 11 | 12 | return names; 13 | } 14 | -------------------------------------------------------------------------------- /packages/svelteui-dates/src/utils/get-start-of-week/get-start-of-week.ts: -------------------------------------------------------------------------------- 1 | import type { FirstDayOfWeek } from '../../types'; 2 | 3 | export function getStartOfWeek(date: Date, firstDayOfWeek: FirstDayOfWeek = 'monday') { 4 | const value = new Date(date); 5 | const day = value.getDay() || 7; 6 | const isSunday = firstDayOfWeek === 'sunday'; 7 | 8 | const clampToFirstDay = isSunday ? day : day - 1; 9 | 10 | if ((isSunday && day !== 0) || day !== 1) { 11 | value.setHours(-24 * clampToFirstDay); 12 | } 13 | 14 | return value; 15 | } 16 | -------------------------------------------------------------------------------- /packages/svelteui-dates/src/utils/get-years-range/get-years-range.test.ts: -------------------------------------------------------------------------------- 1 | import { getYearsRange } from './get-years-range'; 2 | import { describe, test, expect } from 'vitest'; 3 | 4 | describe('@svelteuidev/dates/get-years-range', () => { 5 | test('returns correct years range', () => { 6 | expect(getYearsRange({ from: 2000, to: 2010 })).toStrictEqual([ 7 | 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010 8 | ]); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /packages/svelteui-dates/src/utils/get-years-range/get-years-range.ts: -------------------------------------------------------------------------------- 1 | export interface YearsRange { 2 | from: number; 3 | to: number; 4 | } 5 | 6 | export function getYearsRange(range: YearsRange) { 7 | const years: number[] = []; 8 | 9 | for (let year = range.from; year <= range.to; year += 1) { 10 | years.push(year); 11 | } 12 | 13 | return years; 14 | } 15 | -------------------------------------------------------------------------------- /packages/svelteui-dates/src/utils/is-same-date/is-same-date.ts: -------------------------------------------------------------------------------- 1 | import { isSameMonth } from '../is-same-month/is-same-month'; 2 | 3 | export function isSameDate(date: Date, comparison: Date) { 4 | return isSameMonth(date, comparison) && date.getDate() === comparison.getDate(); 5 | } 6 | -------------------------------------------------------------------------------- /packages/svelteui-dates/src/utils/is-same-month/is-same-month.test.ts: -------------------------------------------------------------------------------- 1 | import { isSameMonth } from './is-same-month'; 2 | import { describe, test, expect } from 'vitest'; 3 | 4 | describe('@svelteuidev/dates/is-same-month', () => { 5 | test('detects same month', () => { 6 | expect(isSameMonth(new Date(2021, 2, 1), new Date(2021, 2, 2))).toBe(true); 7 | expect(isSameMonth(new Date(2021, 3, 1), new Date(2021, 2, 2))).toBe(false); 8 | expect(isSameMonth(new Date(2022, 2, 2), new Date(2021, 2, 2))).toBe(false); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /packages/svelteui-dates/src/utils/is-same-month/is-same-month.ts: -------------------------------------------------------------------------------- 1 | export function isSameMonth(date: Date, comparison: Date) { 2 | return ( 3 | date.getFullYear() === comparison.getFullYear() && date.getMonth() === comparison.getMonth() 4 | ); 5 | } 6 | -------------------------------------------------------------------------------- /packages/svelteui-dates/vite.config.js: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | 3 | /** @type {import('vite').UserConfig} */ 4 | const config = { 5 | plugins: [sveltekit()], 6 | optimizeDeps: { 7 | exclude: ['radix-icons-svelte'] 8 | }, 9 | resolve: { 10 | alias: { 11 | $dlib: './src' 12 | } 13 | } 14 | }; 15 | 16 | export default config; 17 | -------------------------------------------------------------------------------- /packages/svelteui-demos/.eslintignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | /dist 7 | .env 8 | .env.* 9 | !.env.example 10 | 11 | # Ignore files for PNPM, NPM and YARN 12 | pnpm-lock.yaml 13 | package-lock.json 14 | yarn.lock 15 | -------------------------------------------------------------------------------- /packages/svelteui-demos/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['../../configuration/eslint-preset-svelteui'], 3 | rules: { 4 | 'no-useless-escape': 'off' 5 | } 6 | }; 7 | -------------------------------------------------------------------------------- /packages/svelteui-demos/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | /dist 7 | .env 8 | .env.* 9 | !.env.example 10 | -------------------------------------------------------------------------------- /packages/svelteui-demos/.npmignore: -------------------------------------------------------------------------------- 1 | *.test.* 2 | *.stories.svelte -------------------------------------------------------------------------------- /packages/svelteui-demos/.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/.prettierignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | /dist 7 | .env 8 | .env.* 9 | !.env.example 10 | 11 | 12 | # Ignore files for PNPM, NPM and YARN 13 | pnpm-lock.yaml 14 | package-lock.json 15 | yarn.lock 16 | -------------------------------------------------------------------------------- /packages/svelteui-demos/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "printWidth": 100 6 | } 7 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Demo } from './Demo.svelte'; 2 | export { default as CodeDemo } from './CodeDemo/CodeDemo.svelte'; 3 | export { default as Configurator } from './Configurator/Configurator.svelte'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/composables/actions/use-click-outside/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './usage.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/composables/actions/use-clipboard/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './usage.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/composables/actions/use-css-variable/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './usage.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/composables/actions/use-download/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './usage.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/composables/actions/use-focus/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './usage.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/composables/actions/use-hot-key/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './usage.svelte'; 2 | export * as target from './target.svelte'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/composables/actions/use-io/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './usage.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/composables/actions/use-lazy/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './usage.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/composables/actions/use-lock-scroll/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './usage.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/composables/actions/use-long-press/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './usage.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/composables/actions/use-move/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './usage.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/composables/actions/use-page-leave/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './usage.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/composables/actions/use-persistent-tab/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './usage.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/composables/actions/use-portal/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './usage.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/composables/actions/use-tab-leave/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './usage.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/composables/index.ts: -------------------------------------------------------------------------------- 1 | export * from './actions'; 2 | export * from './utilities'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/composables/utilities/use-browser-context/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './usage.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/composables/utilities/use-debounce/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './usage.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/composables/utilities/use-element-size/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './usage.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/composables/utilities/use-eye-dropper/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './usage.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/composables/utilities/use-focus-within/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './usage.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/composables/utilities/use-hash/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './usage.svelte'; 2 | export * as persist from './persist.svelte'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/composables/utilities/use-id/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './usage.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/composables/utilities/use-mouse-position/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './usage.svelte'; 2 | export * as document from './document.svelte'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/composables/utilities/use-os/index.ts: -------------------------------------------------------------------------------- 1 | export * as useOsDemo from './usage.svelte'; 2 | export * as usage from './usage.svelte'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/composables/utilities/use-raf-fn/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './usage.svelte'; 2 | export * as options from './options.svelte'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/composables/utilities/use-throttle/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './usage.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/composables/utilities/use-viewport-size/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './usage.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/composables/utilities/use-web-worker/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './usage.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/ActionIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * as configurator from './ActionIcon.demo.configurator.svelte'; 2 | export * as variants from './ActionIcon.demo.variants.svelte'; 3 | export * as colors from './ActionIcon.demo.colors.svelte'; 4 | export * as close from './ActionIcon.demo.close.svelte'; 5 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Affix/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './Affix.demo.usage.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Alert/index.ts: -------------------------------------------------------------------------------- 1 | export * as configurator from './Alert.demo.configurator.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Anchor/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './Anchor.demo.usage.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/AppShell/_NavContent.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | Navbar 10 | 11 | Home Page 12 | Test Page 13 | 14 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/AppShell/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './AppShell.demo.usage.svelte'; 2 | export * as responsive from './AppShell.demo.responsive.svelte'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/AspectRatio/index.ts: -------------------------------------------------------------------------------- 1 | export * as image from './AspectRatio.demo.image.svelte'; 2 | export * as usage from './AspectRatio.demo.usage.svelte'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Badge/index.ts: -------------------------------------------------------------------------------- 1 | export * as configurator from './Badge.demo.configurator.svelte'; 2 | export * as gradient from './Badge.demo.gradient.svelte'; 3 | export * as width from './Badge.demo.width.svelte'; 4 | export * as sections from './Badge.demo.sections.svelte'; 5 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Blockquote/index.ts: -------------------------------------------------------------------------------- 1 | export * as noicon from './Blockquote.demo.noicon.svelte'; 2 | export * as usage from './Blockquote.demo.usage.svelte'; 3 | export * as icon from './Blockquote.demo.icon.svelte'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Box/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './Box.demo.usage.svelte'; 2 | export * as custom from './Box.demo.custom.svelte'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Breadcrumbs/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './Breadcrumbs.demo.usage.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Burger/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './Burger.demo.usage.svelte'; 2 | export * as color from './Burger.demo.color.svelte'; 3 | export * as size from './Burger.demo.size.svelte'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Card/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './Card.demo.usage.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Center/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './Center.demo.usage.svelte'; 2 | export * as inline from './Center.demo.inline.svelte'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Checkbox/index.ts: -------------------------------------------------------------------------------- 1 | export * as configurator from './Checkbox.demo.configurator.svelte'; 2 | export * as states from './Checkbox.demo.states.svelte'; 3 | export * as icon from './Checkbox.demo.icon.svelte'; 4 | export * as sizes from './Checkbox.demo.sizes.svelte'; 5 | export * as indeterminate from './Checkbox.demo.indeterminate.svelte'; 6 | export * as groupConfigurator from './CheckboxGroup.demo.configurator.svelte'; 7 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Chip/index.ts: -------------------------------------------------------------------------------- 1 | export * as configurator from './Chip.demo.configurator.svelte'; 2 | export * as states from './Chip.demo.states.svelte'; 3 | export * as group from './ChipGroup.demo.configurator.svelte'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Code/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './Code.demo.usage.svelte'; 2 | export * as block from './Code.demo.block.svelte'; 3 | export * as color from './Code.demo.color.svelte'; 4 | export * as prism from './Code.demo.prism.svelte'; 5 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Collapse/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './Collapse.demo.usage.svelte'; 2 | export * as transition from './Collapse.demo.transition.svelte'; 3 | export * as nested from './Collapse.demo.nested.svelte'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Container/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './Container.demo.usage.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Divider/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './Divider.demo.usage.svelte'; 2 | export * as label from './Divider.demo.label.svelte'; 3 | export * as size from './Divider.demo.size.svelte'; 4 | export * as vertical from './Divider.demo.vertical.svelte'; 5 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Flex/index.ts: -------------------------------------------------------------------------------- 1 | export * as configurator from './Flex.demo.configurator.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Grid/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './Grid.demo.usage.svelte'; 2 | export * as grow from './Grid.demo.grow.svelte'; 3 | export * as offset from './Grid.demo.offset.svelte'; 4 | export * as rows from './Grid.demo.rows.svelte'; 5 | export * as justify from './Grid.demo.justify.svelte'; 6 | export * as responsive from './Grid.demo.responsive.svelte'; 7 | export * as columns from './Grid.demo.columns.svelte'; 8 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Group/index.ts: -------------------------------------------------------------------------------- 1 | export * as configurator from './Group.demo.configurator.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Image/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './Image.demo.usage.svelte'; 2 | export * as width from './Image.demo.width.svelte'; 3 | export * as placeholder from './Image.demo.placeholder.svelte'; 4 | export * as caption from './Image.demo.caption.svelte'; 5 | export * as radius from './Image.demo.radius.svelte'; 6 | export * as background from './Image.demo.background.svelte'; 7 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Input/Input.demo.sizes.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 11 | 12 | {#each ['xs', 'sm', 'md', 'lg', 'xl'] as size} 13 | 14 | {/each} 15 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Input/index.ts: -------------------------------------------------------------------------------- 1 | export * as configurator from './Input.demo.configurator.svelte'; 2 | export * as variants from './Input.demo.variants.svelte'; 3 | export * as sections from './Input.demo.sections.svelte'; 4 | export * as sizes from './Input.demo.sizes.svelte'; 5 | export * as custom from './Input.demo.custom.svelte'; 6 | export * as headless from './Input.demo.headless.svelte'; 7 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/InputWrapper/index.ts: -------------------------------------------------------------------------------- 1 | export * as configurator from './InputWrapper.demo.configurator.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/JsonInput/index.ts: -------------------------------------------------------------------------------- 1 | export * as configurator from './JsonInput.demo.configurator.svelte'; 2 | export * as validation from './JsonInput.demo.validation.svelte'; 3 | export * as disabled from './JsonInput.demo.disabled.svelte'; 4 | export * as icon from './JsonInput.demo.icon.svelte'; 5 | export * as format from './JsonInput.demo.format.svelte'; 6 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Kbd/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './Kbd.demo.usage.svelte'; 2 | export * as example from './Kbd.demo.example.svelte'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Loader/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './Loader.demo.usage.svelte'; 2 | export * as variants from './Loader.demo.variants.svelte'; 3 | export * as colors from './Loader.demo.colors.svelte'; 4 | export * as size from './Loader.demo.size.svelte'; 5 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Mark/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './Mark.demo.usage.svelte'; 2 | export * as color from './Mark.demo.color.svelte'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/MediaQuery/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './MediaQuery.demo.usage.svelte'; 2 | export * as query from './MediaQuery.demo.query.svelte'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Modal/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './Modal.demo.usage.svelte'; 2 | export * as header from './Modal.demo.header.svelte'; 3 | export * as centered from './Modal.demo.centered.svelte'; 4 | export * as sizes from './Modal.demo.sizes.svelte'; 5 | export * as overlay from './Modal.demo.overlay.svelte'; 6 | export * as overflow from './Modal.demo.overflow.svelte'; 7 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/NativeSelect/index.ts: -------------------------------------------------------------------------------- 1 | export * as configurator from './NativeSelect.demo.configurator.svelte'; 2 | export * as binding from './NativeSelect.demo.binding.svelte'; 3 | export * as error from './NativeSelect.demo.error.svelte'; 4 | export * as disabled from './NativeSelect.demo.disabled.svelte'; 5 | export * as icon from './NativeSelect.demo.icon.svelte'; 6 | export * as section from './NativeSelect.demo.section.svelte'; 7 | export * as objects from './NativeSelect.demo.objects.svelte'; 8 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Notification/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './Notification.demo.usage.svelte'; 2 | export * as configurator from './Notification.demo.configurator.svelte'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/ObserverRender/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './ObserverRender.demo.usage.svelte'; 2 | export * as slots from './ObserverRender.demo.slots.svelte'; 3 | export * as options from './ObserverRender.demo.options.svelte'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Overlay/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './Overlay.demo.usage.svelte'; 2 | export * as content from './Overlay.demo.content.svelte'; 3 | export * as gradient from './Overlay.demo.gradient.svelte'; 4 | export * as blur from './Overlay.demo.blur.svelte'; 5 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Paper/index.ts: -------------------------------------------------------------------------------- 1 | export * as configurator from './Paper.demo.configurator.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Popper/index.ts: -------------------------------------------------------------------------------- 1 | export * as configurator from './Popper.demo.configurator.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Progress/index.ts: -------------------------------------------------------------------------------- 1 | export * as configurator from './Progress.demo.configurator.svelte'; 2 | export * as sections from './Progress.demo.sections.svelte'; 3 | export * as colors from './Progress.demo.colors.svelte'; 4 | export * as label from './Progress.demo.label.svelte'; 5 | export * as tween from './Progress.demo.tween.svelte'; 6 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Radio/index.ts: -------------------------------------------------------------------------------- 1 | export * as configurator from './Radio.demo.configurator.svelte'; 2 | export * as groupConfigurator from './RadioGroup.demo.configurator.svelte'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Seo/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './Seo.demo.usage.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/SimpleGrid/index.ts: -------------------------------------------------------------------------------- 1 | export * as configurator from './SimpleGrid.demo.configurator.svelte'; 2 | export * as breakpoints from './SimpleGrid.demo.breakpoints.svelte'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Skeleton/index.ts: -------------------------------------------------------------------------------- 1 | export * as configurator from './Skeleton.demo.configurator.svelte'; 2 | export * as content from './Skeleton.demo.content.svelte'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Space/index.ts: -------------------------------------------------------------------------------- 1 | export * as configurator from './Space.demo.configurator.svelte'; 2 | export * as configuratorW from './Space.demo.configuratorW.svelte'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Stack/index.ts: -------------------------------------------------------------------------------- 1 | export * as configurator from './Stack.demo.configurator.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Switch/index.ts: -------------------------------------------------------------------------------- 1 | export * as configurator from './Switch.demo.configurator.svelte'; 2 | export * as inner from './Switch.demo.inner.svelte'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Tabs/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './Tabs.demo.configurator.svelte'; 2 | export * as icons from './Tabs.demo.icons.svelte'; 3 | export * as colors from './Tabs.demo.colors.svelte'; 4 | export * as position from './Tabs.demo.position.svelte'; 5 | export * as component from './Tabs.demo.component.svelte'; 6 | export * as override from './Tabs.demo.override.svelte'; 7 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Text/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './Text.demo.usage.svelte'; 2 | export * as dimmed from './Text.demo.dimmed.svelte'; 3 | export * as gradient from './Text.demo.gradient.svelte'; 4 | export * as clamp from './Text.demo.clamp.svelte'; 5 | export * as inherit from './Text.demo.inherit.svelte'; 6 | export * as custom from './Text.demo.custom.svelte'; 7 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/TextInput/index.ts: -------------------------------------------------------------------------------- 1 | export * as configurator from './TextInput.demo.configurator.svelte'; 2 | export * as invalid from './TextInput.demo.invalid.svelte'; 3 | export * as disabled from './TextInput.demo.disabled.svelte'; 4 | export * as icon from './TextInput.demo.icon.svelte'; 5 | export * as rightsection from './TextInput.demo.rightsection.svelte'; 6 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Textarea/index.ts: -------------------------------------------------------------------------------- 1 | export * as configurator from './Textarea.demo.configurator.svelte'; 2 | export * as invalid from './Textarea.demo.invalid.svelte'; 3 | export * as disabled from './Textarea.demo.disabled.svelte'; 4 | export * as icon from './Textarea.demo.icon.svelte'; 5 | export * as rightsection from './Textarea.demo.rightsection.svelte'; 6 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/ThemeIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * as configurator from './ThemeIcon.demo.configurator.svelte'; 2 | export * as colors from './ThemeIcon.demo.colors.svelte'; 3 | export * as gradient from './ThemeIcon.demo.gradient.svelte'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Timeline/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './Timeline.demo.usage.svelte'; 2 | export * as bullet from './Timeline.demo.bullet.svelte'; 3 | export * as component from './Timeline.demo.component.svelte'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Title/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './Title.demo.usage.svelte'; 2 | export * as shared from './Title.demo.shared.svelte'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/Tooltip/index.ts: -------------------------------------------------------------------------------- 1 | export * as configurator from './Tooltip.demo.configurator.svelte'; 2 | export * as positions from './Tooltip.demo.positions.svelte'; 3 | export * as arrow from './Tooltip.demo.arrow.svelte'; 4 | export * as controlled from './Tooltip.demo.controlled.svelte'; 5 | export * as multiline from './Tooltip.demo.multiline.svelte'; 6 | export * as delay from './Tooltip.demo.delay.svelte'; 7 | export * as pointer from './Tooltip.demo.pointer.svelte'; 8 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/TypographyProvider/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './TypographyProvider.demo.usage.svelte'; 2 | export * as all from './TypographyProvider.demo.all.svelte'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/core/UnstyledButton/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './UnstyledButton.demo.usage.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/createStyles/index.ts: -------------------------------------------------------------------------------- 1 | export * as basic from './CreateStyles.demo.basic.svelte'; 2 | export * as cx from './CreateStyles.demo.cx.svelte'; 3 | export * as params from './CreateStyles.demo.params.svelte'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/dates/Month/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './Month.demo.usage.svelte'; 2 | export * as localization from './Month.demo.localization.svelte'; 3 | export * as firstDaySunday from './Month.demo.firstDaySunday.svelte'; 4 | export * as boundaries from './Month.demo.boundaries.svelte'; 5 | export * as exclude from './Month.demo.exclude.svelte'; 6 | export * as range from './Month.demo.range.svelte'; 7 | export * as weekdays from './Month.demo.weekdays.svelte'; 8 | export * as weekendDays from './Month.demo.weekendDays.svelte'; 9 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/dates/placeholder.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/svelteuidev/svelteui/1538d71a11a969b0c827722fc1e65afc206dc2c8/packages/svelteui-demos/src/demos/dates/placeholder.txt -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/misc/contributing/index.ts: -------------------------------------------------------------------------------- 1 | export * as tree from './tree.demo.example.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/misc/index.ts: -------------------------------------------------------------------------------- 1 | export * as contributing from './contributing'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/motion/flipboard/index.ts: -------------------------------------------------------------------------------- 1 | export * as flipboardDemo from './usage.configurator.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/motion/index.ts: -------------------------------------------------------------------------------- 1 | export * from './typewriter'; 2 | export * from './flipboard'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/motion/typewriter/index.ts: -------------------------------------------------------------------------------- 1 | export * as typewriterDemo from './usage.configurator.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/preprocessors/placeholder.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/svelteuidev/svelteui/1538d71a11a969b0c827722fc1e65afc206dc2c8/packages/svelteui-demos/src/demos/preprocessors/placeholder.txt -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/preprocessors/view-source/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './usage.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/preprocessors/view-source/usage.svelte: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/svelteuidev/svelteui/1538d71a11a969b0c827722fc1e65afc206dc2c8/packages/svelteui-demos/src/demos/preprocessors/view-source/usage.svelte -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/prism/index.ts: -------------------------------------------------------------------------------- 1 | export * as usage from './Prism.demo.usage.svelte'; 2 | export * as lineNumbers from './Prism.demo.lineNumbers.svelte'; 3 | export * as lineHighlight from './Prism.demo.lineHighlight.svelte'; 4 | export * as copy from './Prism.demo.copy.svelte'; 5 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/demos/theme/index.ts: -------------------------------------------------------------------------------- 1 | export * as defaultTheme from './DefaultTheme.demo.basic.svelte'; 2 | export * as darkTheme from './DarkTheme.demo.basic.svelte'; 3 | export * as override from './Override.demo.basic.svelte'; 4 | export * as utilities from './ThemeUtilities.demo.basic.svelte'; 5 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/utils/index.ts: -------------------------------------------------------------------------------- 1 | export * from './upper-first'; 2 | export * from './props-to-string'; 3 | export * from './is-enabled'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-demos/src/utils/upper-first.ts: -------------------------------------------------------------------------------- 1 | export function upperFirst(value: string): string { 2 | return typeof value !== 'string' ? '' : value.charAt(0).toUpperCase() + value.slice(1); 3 | } 4 | -------------------------------------------------------------------------------- /packages/svelteui-demos/vite.config.js: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | 3 | /** @type {import('vite').UserConfig} */ 4 | const config = { 5 | plugins: [sveltekit()], 6 | optimizeDeps: { 7 | exclude: ['radix-icons-svelte'] 8 | } 9 | }; 10 | 11 | export default config; 12 | -------------------------------------------------------------------------------- /packages/svelteui-motion/.eslintignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | /dist 7 | .env 8 | .env.* 9 | !.env.example 10 | 11 | # Ignore files for PNPM, NPM and YARN 12 | pnpm-lock.yaml 13 | package-lock.json 14 | yarn.lock 15 | -------------------------------------------------------------------------------- /packages/svelteui-motion/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['../../configuration/eslint-preset-svelteui'], 3 | rules: {} 4 | }; 5 | -------------------------------------------------------------------------------- /packages/svelteui-motion/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | /dist 7 | .env 8 | .env.* 9 | !.env.example 10 | -------------------------------------------------------------------------------- /packages/svelteui-motion/.npmignore: -------------------------------------------------------------------------------- 1 | *.test.* 2 | *.stories.svelte -------------------------------------------------------------------------------- /packages/svelteui-motion/.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /packages/svelteui-motion/.prettierignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | /dist 7 | .env 8 | .env.* 9 | !.env.example 10 | 11 | 12 | # Ignore files for PNPM, NPM and YARN 13 | pnpm-lock.yaml 14 | package-lock.json 15 | yarn.lock 16 | -------------------------------------------------------------------------------- /packages/svelteui-motion/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "printWidth": 100 6 | } 7 | -------------------------------------------------------------------------------- /packages/svelteui-motion/src/animations/Animation/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Animation } from './Animation.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-motion/src/animations/Motion/index.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | -------------------------------------------------------------------------------- /packages/svelteui-motion/src/animations/TextAnimation/index.ts: -------------------------------------------------------------------------------- 1 | export { default as TextAnimation } from './TextAnimation.svelte'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-motion/src/animations/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Animation/index.js'; 2 | export * from './TextAnimation/index.js'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-motion/src/animations/types/index.ts: -------------------------------------------------------------------------------- 1 | export type { Animations, EasingOptions, TextAnimations, Iterations, Gradient } from './Animations'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-motion/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './animations/index.js'; 2 | export * from './transitions/index.js'; 3 | 4 | import type {} from './animations/types'; 5 | import type { DefaultParams } from './transitions/types'; 6 | export type { DefaultParams }; 7 | -------------------------------------------------------------------------------- /packages/svelteui-motion/src/transitions/flipboard/flipboard.config.ts: -------------------------------------------------------------------------------- 1 | import type { EasingFunction } from 'svelte/types/runtime/transition'; 2 | 3 | export interface FlipboardParams { 4 | delay?: number; 5 | duration?: number; 6 | easing?: EasingFunction; 7 | css?: (t: number, u: number) => string; 8 | tick?: (t: number, u: number) => void; 9 | } 10 | -------------------------------------------------------------------------------- /packages/svelteui-motion/src/transitions/flipboard/index.ts: -------------------------------------------------------------------------------- 1 | export { flipboard } from './flipboard.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-motion/src/transitions/index.ts: -------------------------------------------------------------------------------- 1 | export * from './flipboard/index.js'; 2 | export * from './typewriter/index.js'; 3 | -------------------------------------------------------------------------------- /packages/svelteui-motion/src/transitions/types/DefaultParams.ts: -------------------------------------------------------------------------------- 1 | export interface DefaultParams { 2 | temp: never; 3 | } 4 | -------------------------------------------------------------------------------- /packages/svelteui-motion/src/transitions/types/index.ts: -------------------------------------------------------------------------------- 1 | import type { DefaultParams } from './DefaultParams'; 2 | export type { DefaultParams }; 3 | -------------------------------------------------------------------------------- /packages/svelteui-motion/src/transitions/typewriter/index.ts: -------------------------------------------------------------------------------- 1 | export { typewriter } from './typewriter.js'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-motion/src/transitions/typewriter/typewriter.config.ts: -------------------------------------------------------------------------------- 1 | import type { EasingFunction } from 'svelte/types/runtime/transition'; 2 | 3 | export interface TypewriterParams { 4 | speed?: number; 5 | easing?: EasingFunction; 6 | } 7 | -------------------------------------------------------------------------------- /packages/svelteui-motion/svelte.config.js: -------------------------------------------------------------------------------- 1 | import preprocess from 'svelte-preprocess'; 2 | 3 | /** @type {import('@sveltejs/kit').Config} */ 4 | const config = { 5 | // Consult https://github.com/sveltejs/svelte-preprocess 6 | // for more information about preprocessors 7 | preprocess: preprocess(), 8 | kit: { 9 | files: { 10 | lib: 'src' 11 | } 12 | } 13 | }; 14 | 15 | export default config; 16 | -------------------------------------------------------------------------------- /packages/svelteui-motion/vite.config.js: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | 3 | /** @type {import('vite').UserConfig} */ 4 | const config = { 5 | plugins: [sveltekit()] 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /packages/svelteui-preprocessors/.eslintignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | /dist 7 | .env 8 | .env.* 9 | !.env.example 10 | 11 | # Ignore files for PNPM, NPM and YARN 12 | pnpm-lock.yaml 13 | package-lock.json 14 | yarn.lock 15 | -------------------------------------------------------------------------------- /packages/svelteui-preprocessors/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['../../configuration/eslint-preset-svelteui'], 3 | rules: {} 4 | }; 5 | -------------------------------------------------------------------------------- /packages/svelteui-preprocessors/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | /dist 7 | .env 8 | .env.* 9 | !.env.example 10 | -------------------------------------------------------------------------------- /packages/svelteui-preprocessors/.npmignore: -------------------------------------------------------------------------------- 1 | *.test.* 2 | *.stories.svelte -------------------------------------------------------------------------------- /packages/svelteui-preprocessors/.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /packages/svelteui-preprocessors/.prettierignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | /dist 7 | .env 8 | .env.* 9 | !.env.example 10 | 11 | 12 | # Ignore files for PNPM, NPM and YARN 13 | pnpm-lock.yaml 14 | package-lock.json 15 | yarn.lock 16 | -------------------------------------------------------------------------------- /packages/svelteui-preprocessors/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "printWidth": 100 6 | } 7 | -------------------------------------------------------------------------------- /packages/svelteui-preprocessors/src/SourceCode/DisplaySourceCode.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 
{source}
 11 | -------------------------------------------------------------------------------- /packages/svelteui-preprocessors/src/SourceCode/SourceCode.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /packages/svelteui-preprocessors/src/SourceCode/index.ts: -------------------------------------------------------------------------------- 1 | export { default as DisplaySourceCode } from './DisplaySourceCode.svelte'; 2 | export { default as SourceCode } from './SourceCode.svelte'; 3 | export { default as viewSource } from './preprocess'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-preprocessors/src/SourceCode/types.ts: -------------------------------------------------------------------------------- 1 | export interface PreprocessOptions { 2 | sourceTagName?: string; 3 | displayTagName?: string; 4 | } 5 | 6 | export interface ParsedPair { 7 | foundSource: boolean; 8 | foundDisplay: boolean; 9 | displayNodesStart: Array; // allow multiple displays of the same source 10 | content: string; 11 | } 12 | 13 | export interface ParsedPairs extends Record { 14 | never?: never; 15 | } 16 | -------------------------------------------------------------------------------- /packages/svelteui-preprocessors/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './preprocessors/SourceCode'; 2 | export * from './utils'; 3 | 4 | /** Type Exports */ 5 | export type { Node, Ast } from './types'; 6 | -------------------------------------------------------------------------------- /packages/svelteui-preprocessors/src/types.ts: -------------------------------------------------------------------------------- 1 | import type { Ast } from 'svelte/types/compiler/interfaces'; 2 | 3 | interface Node { 4 | start: number; 5 | end: number; 6 | type: string; 7 | name: string; 8 | raw?: string; 9 | data?: string; 10 | attributes?: Array>; 11 | children?: any; 12 | // children?: Node[]; 13 | } 14 | 15 | export type { Node, Ast }; 16 | -------------------------------------------------------------------------------- /packages/svelteui-preprocessors/src/utils/index.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | -------------------------------------------------------------------------------- /packages/svelteui-preprocessors/vite.config.js: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | 3 | /** @type {import('vite').UserConfig} */ 4 | const config = { 5 | plugins: [sveltekit()] 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /packages/svelteui-prism/.eslintignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | /dist 7 | .env 8 | .env.* 9 | !.env.example 10 | 11 | # Ignore files for PNPM, NPM and YARN 12 | pnpm-lock.yaml 13 | package-lock.json 14 | yarn.lock 15 | -------------------------------------------------------------------------------- /packages/svelteui-prism/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['../../configuration/eslint-preset-svelteui'], 3 | rules: {} 4 | }; 5 | -------------------------------------------------------------------------------- /packages/svelteui-prism/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | /dist 7 | .env 8 | .env.* 9 | !.env.example 10 | -------------------------------------------------------------------------------- /packages/svelteui-prism/.npmignore: -------------------------------------------------------------------------------- 1 | *.test.* 2 | *.stories.svelte -------------------------------------------------------------------------------- /packages/svelteui-prism/.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /packages/svelteui-prism/.prettierignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | /dist 7 | .env 8 | .env.* 9 | !.env.example 10 | 11 | 12 | # Ignore files for PNPM, NPM and YARN 13 | pnpm-lock.yaml 14 | package-lock.json 15 | yarn.lock 16 | -------------------------------------------------------------------------------- /packages/svelteui-prism/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "printWidth": 100 6 | } 7 | -------------------------------------------------------------------------------- /packages/svelteui-prism/src/Prism/Prism.config.ts: -------------------------------------------------------------------------------- 1 | import type { WhiteSpaceConfig } from './Prism.styles'; 2 | 3 | const config: WhiteSpaceConfig = { 4 | 'remove-trailing': true, 5 | 'remove-indent': true, 6 | 'left-trim': true, 7 | 'right-trim': true, 8 | 'break-lines': 80, 9 | 'remove-initial-line-feed': false, 10 | 'tabs-to-spaces': 4, 11 | 'spaces-to-tabs': 4 12 | }; 13 | 14 | export { config }; 15 | -------------------------------------------------------------------------------- /packages/svelteui-prism/src/Prism/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Prism } from './Prism.svelte'; 2 | export { PrismErrors } from './Prism.errors'; 3 | export * as PrismStyles from './Prism.styles'; 4 | -------------------------------------------------------------------------------- /packages/svelteui-prism/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Prism'; 2 | 3 | /** Type exports */ 4 | import type { PrismTheme } from './types'; 5 | export type { PrismTheme }; 6 | -------------------------------------------------------------------------------- /packages/svelteui-prism/src/types/PrismTheme.ts: -------------------------------------------------------------------------------- 1 | export type PrismTheme = 2 | | 'light' 3 | | 'dark' 4 | | 'funky' 5 | | 'okaidia' 6 | | 'twilight' 7 | | 'coy' 8 | | 'solarized' 9 | | 'tomorrow'; 10 | -------------------------------------------------------------------------------- /packages/svelteui-prism/src/types/index.d.ts: -------------------------------------------------------------------------------- 1 | export type { PrismTheme } from './PrismTheme'; 2 | 3 | declare global { 4 | interface Window { 5 | Prism; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/svelteui-prism/svelte.config.js: -------------------------------------------------------------------------------- 1 | import preprocess from 'svelte-preprocess'; 2 | import fs from 'fs'; 3 | export const pkg = JSON.parse(fs.readFileSync(new URL('package.json', import.meta.url), 'utf8')); 4 | 5 | /** @type {import('@sveltejs/kit').Config} */ 6 | const config = { 7 | preprocess: preprocess(), 8 | kit: { 9 | files: { 10 | lib: 'src' 11 | } 12 | } 13 | }; 14 | 15 | export default config; 16 | -------------------------------------------------------------------------------- /packages/svelteui-prism/vite.config.js: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | 3 | /** @type {import('vite').UserConfig} */ 4 | const config = { 5 | plugins: [sveltekit()], 6 | optimizeDeps: { 7 | exclude: ['radix-icons-svelte'] 8 | } 9 | }; 10 | 11 | export default config; 12 | -------------------------------------------------------------------------------- /packages/svelteui-tests/.eslintignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | 10 | # Ignore files for PNPM, NPM and YARN 11 | pnpm-lock.yaml 12 | package-lock.json 13 | yarn.lock 14 | -------------------------------------------------------------------------------- /packages/svelteui-tests/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['../../configuration/eslint-preset-svelteui'], 3 | rules: {} 4 | }; 5 | -------------------------------------------------------------------------------- /packages/svelteui-tests/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | /dist 7 | .env 8 | .env.* 9 | !.env.example 10 | -------------------------------------------------------------------------------- /packages/svelteui-tests/.npmignore: -------------------------------------------------------------------------------- 1 | *.test.* 2 | *.stories.svelte -------------------------------------------------------------------------------- /packages/svelteui-tests/.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /packages/svelteui-tests/.prettierignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | /dist 7 | .env 8 | .env.* 9 | !.env.example 10 | 11 | # Ignore files for PNPM, NPM and YARN 12 | pnpm-lock.yaml 13 | package-lock.json 14 | yarn.lock 15 | -------------------------------------------------------------------------------- /packages/svelteui-tests/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "printWidth": 100 6 | } 7 | -------------------------------------------------------------------------------- /packages/svelteui-tests/src/index.ts: -------------------------------------------------------------------------------- 1 | export { itSupportsClassName } from './it-supports-classname'; 2 | -------------------------------------------------------------------------------- /packages/svelteui-tests/vite.config.js: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | 3 | /** @type {import('vite').UserConfig} */ 4 | const config = { 5 | plugins: [sveltekit()] 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /scripts/README.md: -------------------------------------------------------------------------------- 1 | # Scripts for use throughout the repo 2 | 3 | Will need scripts for a better workflow as time goes on. 4 | 5 | > Scripts will be written with Deno as the runtime rather than Node. 6 | 7 | ## TO DO: 8 | 9 | - Release - this script will create a better workflow for future releases 10 | 11 | - Docs Generate - this script will generate the specified apis automatically using [vite-plugin-svled](https://github.com/mattjennings/vite-plugin-sveld) 12 | -------------------------------------------------------------------------------- /scripts/git/discard.sh: -------------------------------------------------------------------------------- 1 | git clean -fd 2 | git checkout -- . -------------------------------------------------------------------------------- /scripts/git/rebase-branches.sh: -------------------------------------------------------------------------------- 1 | git checkout main 2 | git pull 3 | 4 | git checkout next-minor 5 | git rebase main 6 | git push 7 | 8 | git checkout experimental 9 | git rebase main 10 | git push -------------------------------------------------------------------------------- /scripts/git/sync-branches.sh: -------------------------------------------------------------------------------- 1 | git checkout main 2 | git pull 3 | 4 | git checkout next-minor 5 | git pull 6 | git merge main 7 | git push 8 | 9 | git checkout experimental 10 | git pull 11 | git merge next-minor 12 | git push -------------------------------------------------------------------------------- /scripts/git/update-branches.sh: -------------------------------------------------------------------------------- 1 | git checkout main 2 | git pull 3 | git checkout next-minor 4 | git pull 5 | git checkout experimental 6 | git pull 7 | git checkout main -------------------------------------------------------------------------------- /scripts/test-script.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-unused-vars */ 2 | import * as _fsPro from 'https://deno.land/x/fs_pro@3.10.0/mod.ts'; 3 | const _link = 'https://alibasiccoder.github.io/fs-pro/classes/_dir_.dir.html#path'; 4 | -------------------------------------------------------------------------------- /scripts/types/index.ts: -------------------------------------------------------------------------------- 1 | export type Packages = 'core' | 'actions' | 'motion' | 'utilities' | 'prism' | 'demos'; 2 | --------------------------------------------------------------------------------