├── .changeset ├── config.json └── icy-insects-throw.md ├── .editorconfig ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug_report.yml │ ├── config.yml │ ├── docs_issue.yml │ └── feature_request.yml ├── pull_request_template.md └── workflows │ ├── build-publish.yml │ └── code-quality.yml ├── .gitignore ├── .npmrc ├── .prettierignore ├── .vscode ├── extensions.json └── settings.json ├── CODE_OF_CONDUCT.md ├── LICENSE ├── README.md ├── eslint.config.js ├── package.json ├── packages ├── cli │ ├── CHANGELOG.md │ ├── README.md │ ├── build.config.ts │ ├── package.json │ ├── src │ │ ├── commands │ │ │ └── migrate │ │ │ │ ├── index.ts │ │ │ │ └── migrations │ │ │ │ └── skeleton-3 │ │ │ │ ├── index.ts │ │ │ │ ├── transformers │ │ │ │ ├── transform-app.css.ts │ │ │ │ ├── transform-app.html.ts │ │ │ │ ├── transform-classes.ts │ │ │ │ ├── transform-module.ts │ │ │ │ ├── transform-package.json.ts │ │ │ │ ├── transform-stylesheet.ts │ │ │ │ └── transform-svelte.ts │ │ │ │ └── utility │ │ │ │ ├── constants.ts │ │ │ │ ├── export-mappings.ts │ │ │ │ ├── theme-mappings.ts │ │ │ │ └── types.ts │ │ ├── index.ts │ │ └── utility │ │ │ ├── get-our-package-json.ts │ │ │ ├── install-dependencies.ts │ │ │ ├── sort-properties-alphabetically.ts │ │ │ └── ts-morph │ │ │ ├── add-named-import.ts │ │ │ ├── get-default-export-object.ts │ │ │ └── parse-source-file.ts │ ├── test │ │ └── migrate │ │ │ └── skeleton-3 │ │ │ ├── classes.test.ts │ │ │ ├── samples.test.ts │ │ │ └── samples │ │ │ ├── app.css │ │ │ ├── add-import │ │ │ │ ├── input │ │ │ │ └── output │ │ │ └── classes-in-at-apply │ │ │ │ ├── input │ │ │ │ └── output │ │ │ ├── app.html │ │ │ ├── custom-data-theme │ │ │ │ ├── input │ │ │ │ └── output │ │ │ └── skeleton-data-theme │ │ │ │ ├── input │ │ │ │ └── output │ │ │ ├── module │ │ │ ├── classes-in-identifiers │ │ │ │ ├── input │ │ │ │ └── output │ │ │ ├── keep-non-skeleton-identifiers │ │ │ │ ├── input │ │ │ │ └── output │ │ │ ├── keep-non-skeleton-imports │ │ │ │ ├── input │ │ │ │ └── output │ │ │ ├── remove-import-keep-default │ │ │ │ ├── input │ │ │ │ └── output │ │ │ ├── remove-import-keep-named-imports │ │ │ │ ├── input │ │ │ │ └── output │ │ │ ├── remove-import │ │ │ │ ├── input │ │ │ │ └── output │ │ │ ├── rename-import │ │ │ │ ├── input │ │ │ │ └── output │ │ │ └── special-characters │ │ │ │ ├── input │ │ │ │ └── output │ │ │ ├── package.json │ │ │ ├── update-skeleton-and-tw-plugin │ │ │ │ ├── input │ │ │ │ └── output │ │ │ ├── update-skeleton │ │ │ │ ├── input │ │ │ │ └── output │ │ │ └── update-tw-plugin │ │ │ │ ├── input │ │ │ │ └── output │ │ │ ├── stylesheet │ │ │ └── classes-in-at-apply │ │ │ │ ├── input │ │ │ │ └── output │ │ │ └── svelte │ │ │ ├── classes-in-at-apply │ │ │ ├── input │ │ │ └── output │ │ │ ├── classes-in-attribute │ │ │ ├── input │ │ │ └── output │ │ │ ├── classes-in-class-directive-with-identifier │ │ │ ├── input │ │ │ └── output │ │ │ ├── classes-in-class-directive-with-literal │ │ │ ├── input │ │ │ └── output │ │ │ ├── classes-in-class-directive │ │ │ ├── input │ │ │ └── output │ │ │ ├── classes-in-expression-attribute │ │ │ ├── input │ │ │ └── output │ │ │ ├── classes-in-literal │ │ │ ├── input │ │ │ └── output │ │ │ ├── empty-strings │ │ │ ├── input │ │ │ └── output │ │ │ ├── keep-non-skeleton-components │ │ │ ├── input │ │ │ └── output │ │ │ └── rename-components │ │ │ ├── input │ │ │ └── output │ └── tsconfig.json ├── necroparser │ ├── build.config.ts │ ├── package.json │ ├── src │ │ └── index.ts │ ├── test │ │ ├── samples.test.ts │ │ └── samples │ │ │ ├── basic │ │ │ ├── input.ts │ │ │ └── output.json │ │ │ ├── extends-external │ │ │ ├── external.ts │ │ │ ├── input.ts │ │ │ └── output.json │ │ │ ├── extends-internal │ │ │ ├── input.ts │ │ │ └── output.json │ │ │ ├── jsdoc │ │ │ ├── input.ts │ │ │ └── output.json │ │ │ ├── multiple │ │ │ ├── input.ts │ │ │ └── output.json │ │ │ ├── optional │ │ │ ├── input.ts │ │ │ └── output.json │ │ │ └── type-kind │ │ │ ├── input.ts │ │ │ └── output.json │ └── tsconfig.json ├── skeleton-common │ ├── package.json │ ├── src │ │ └── index.ts │ └── tsconfig.json ├── skeleton-react │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── components │ │ │ ├── Accordion │ │ │ │ ├── Accordion.test.tsx │ │ │ │ ├── Accordion.tsx │ │ │ │ ├── context.ts │ │ │ │ └── types.ts │ │ │ ├── AppBar │ │ │ │ ├── AppBar.test.tsx │ │ │ │ ├── AppBar.tsx │ │ │ │ └── types.ts │ │ │ ├── Avatar │ │ │ │ ├── Avatar.test.tsx │ │ │ │ ├── Avatar.tsx │ │ │ │ └── types.ts │ │ │ ├── FileUpload │ │ │ │ ├── FileUpload.test.tsx │ │ │ │ ├── FileUpload.tsx │ │ │ │ └── types.ts │ │ │ ├── Navigation │ │ │ │ ├── Navigation.test.tsx │ │ │ │ ├── Navigation.tsx │ │ │ │ ├── context.ts │ │ │ │ └── types.ts │ │ │ ├── Pagination │ │ │ │ ├── Pagination.test.tsx │ │ │ │ ├── Pagination.tsx │ │ │ │ └── types.ts │ │ │ ├── Progress │ │ │ │ ├── Progress.test.tsx │ │ │ │ ├── Progress.tsx │ │ │ │ └── types.ts │ │ │ ├── ProgressRing │ │ │ │ ├── ProgressRing.test.tsx │ │ │ │ ├── ProgressRing.tsx │ │ │ │ └── types.ts │ │ │ ├── Rating │ │ │ │ ├── Rating.test.tsx │ │ │ │ ├── Rating.tsx │ │ │ │ └── types.ts │ │ │ ├── Segment │ │ │ │ ├── Segment.test.tsx │ │ │ │ ├── Segment.tsx │ │ │ │ ├── context.ts │ │ │ │ └── types.ts │ │ │ ├── Slider │ │ │ │ ├── Slider.test.tsx │ │ │ │ ├── Slider.tsx │ │ │ │ └── types.ts │ │ │ ├── Switch │ │ │ │ ├── Switch.test.tsx │ │ │ │ ├── Switch.tsx │ │ │ │ └── types.ts │ │ │ ├── Tabs │ │ │ │ ├── Tabs.test.tsx │ │ │ │ ├── Tabs.tsx │ │ │ │ ├── context.ts │ │ │ │ └── types.ts │ │ │ ├── TagsInput │ │ │ │ ├── TagsInput.test.tsx │ │ │ │ ├── TagsInput.tsx │ │ │ │ └── types.ts │ │ │ └── Toast │ │ │ │ ├── Toast.test.tsx │ │ │ │ ├── Toast.tsx │ │ │ │ ├── Toaster.tsx │ │ │ │ ├── create-toaster.ts │ │ │ │ └── types.ts │ │ └── index.ts │ ├── tsconfig.json │ ├── vite.config.ts │ └── vitest.setup.js ├── skeleton-svelte │ ├── .npmrc │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── components │ │ │ ├── Accordion │ │ │ │ ├── Accordion.svelte │ │ │ │ ├── Accordion.test.svelte │ │ │ │ ├── Accordion.test.ts │ │ │ │ ├── AccordionItem.svelte │ │ │ │ ├── context.ts │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ ├── AppBar │ │ │ │ ├── AppBar.svelte │ │ │ │ ├── AppBar.test.ts │ │ │ │ └── types.ts │ │ │ ├── Avatar │ │ │ │ ├── Avatar.svelte │ │ │ │ ├── Avatar.test.ts │ │ │ │ └── types.ts │ │ │ ├── Combobox │ │ │ │ ├── Combobox.svelte │ │ │ │ ├── Combobox.test.ts │ │ │ │ └── types.ts │ │ │ ├── FileUpload │ │ │ │ ├── FIleUpload.test.ts │ │ │ │ ├── FileUpload.svelte │ │ │ │ └── types.ts │ │ │ ├── Modal │ │ │ │ ├── Modal.svelte │ │ │ │ ├── Modal.test.ts │ │ │ │ └── types.ts │ │ │ ├── Navigation │ │ │ │ ├── NavBar.svelte │ │ │ │ ├── NavBar.test.svelte │ │ │ │ ├── NavRail.svelte │ │ │ │ ├── NavRail.test.svelte │ │ │ │ ├── NavTile.svelte │ │ │ │ ├── Navigation.test.ts │ │ │ │ ├── context.ts │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ ├── Pagination │ │ │ │ ├── Pagination.svelte │ │ │ │ ├── Pagination.test.ts │ │ │ │ └── types.ts │ │ │ ├── Popover │ │ │ │ ├── Popover.svelte │ │ │ │ ├── Popover.test.ts │ │ │ │ └── types.ts │ │ │ ├── Progress │ │ │ │ ├── Progress.svelte │ │ │ │ ├── Progress.test.ts │ │ │ │ └── types.ts │ │ │ ├── ProgressRing │ │ │ │ ├── ProgressRing.svelte │ │ │ │ ├── ProgressRing.test.ts │ │ │ │ └── types.ts │ │ │ ├── Rating │ │ │ │ ├── Rating.svelte │ │ │ │ ├── Rating.test.ts │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ ├── Segment │ │ │ │ ├── Segment.svelte │ │ │ │ ├── Segment.test.svelte │ │ │ │ ├── Segment.test.ts │ │ │ │ ├── SegmentItem.svelte │ │ │ │ ├── context.ts │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ ├── Slider │ │ │ │ ├── Slider.svelte │ │ │ │ ├── Slider.test.ts │ │ │ │ └── types.ts │ │ │ ├── Switch │ │ │ │ ├── Switch.svelte │ │ │ │ ├── Switch.test.ts │ │ │ │ └── types.ts │ │ │ ├── Tabs │ │ │ │ ├── Tabs.svelte │ │ │ │ ├── Tabs.test.svelte │ │ │ │ ├── Tabs.test.ts │ │ │ │ ├── TabsControl.svelte │ │ │ │ ├── TabsPanel.svelte │ │ │ │ ├── context.ts │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ ├── TagsInput │ │ │ │ ├── TagsInput.svelte │ │ │ │ ├── TagsInput.test.ts │ │ │ │ └── types.ts │ │ │ ├── Toast │ │ │ │ ├── Toast.svelte │ │ │ │ ├── Toast.test.ts │ │ │ │ ├── Toaster.svelte │ │ │ │ ├── create-toaster.ts │ │ │ │ └── types.ts │ │ │ └── Tooltip │ │ │ │ ├── Tooltip.svelte │ │ │ │ ├── Tooltip.test.ts │ │ │ │ └── types.ts │ │ ├── index.ts │ │ └── internal │ │ │ ├── create-context.ts │ │ │ └── test-utils.ts │ ├── svelte.config.js │ ├── tsconfig.json │ ├── vite.config.ts │ └── vitest.setup.js └── skeleton │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ ├── base │ │ ├── globals.css │ │ ├── index.css │ │ └── theme.scss │ ├── constants.scss │ ├── index.css │ ├── keyframes │ │ ├── index.css │ │ ├── progress-indeterminate.css │ │ └── ring-indeterminate.css │ ├── optional │ │ └── presets.scss │ ├── themes │ │ ├── catppuccin.css │ │ ├── cerberus.css │ │ ├── concord.css │ │ ├── crimson.css │ │ ├── fennec.css │ │ ├── hamlindigo.css │ │ ├── legacy.css │ │ ├── mint.css │ │ ├── modern.css │ │ ├── mona.css │ │ ├── nosh.css │ │ ├── nouveau.css │ │ ├── pine.css │ │ ├── reign.css │ │ ├── rocket.css │ │ ├── rose.css │ │ ├── sahara.css │ │ ├── seafoam.css │ │ ├── terminus.css │ │ ├── vintage.css │ │ ├── vox.css │ │ └── wintry.css │ ├── utilities │ │ ├── badges.css │ │ ├── buttons.css │ │ ├── cards.css │ │ ├── chips.css │ │ ├── core.scss │ │ ├── dividers.css │ │ ├── form-core.css │ │ ├── form-groups.css │ │ ├── form-inputs.css │ │ ├── form-progress.css │ │ ├── form-radios-checks.css │ │ ├── form-selects.css │ │ ├── form-textareas.css │ │ ├── index.css │ │ ├── placeholders.css │ │ ├── tables.css │ │ └── typography.css │ └── variants │ │ ├── index.css │ │ └── themes.scss │ └── vite.config.ts ├── playgrounds ├── skeleton-core │ ├── .gitignore │ ├── astro.config.mjs │ ├── package.json │ ├── public │ │ └── favicon.svg │ ├── src │ │ ├── assets │ │ │ ├── astro.svg │ │ │ └── background.svg │ │ ├── components │ │ │ └── Lightswitch.astro │ │ ├── layouts │ │ │ └── Layout.astro │ │ ├── pages │ │ │ ├── base │ │ │ │ └── globals.astro │ │ │ ├── components │ │ │ │ ├── badges.astro │ │ │ │ ├── buttons.astro │ │ │ │ ├── cards.astro │ │ │ │ ├── chips.astro │ │ │ │ ├── dividers.astro │ │ │ │ ├── forms.astro │ │ │ │ ├── placeholders.astro │ │ │ │ └── tables.astro │ │ │ ├── design │ │ │ │ ├── colors.astro │ │ │ │ ├── presets.astro │ │ │ │ ├── spacing.astro │ │ │ │ └── typography.astro │ │ │ └── index.astro │ │ └── styles │ │ │ └── global.css │ └── tsconfig.json ├── skeleton-react │ ├── README.md │ ├── next.config.ts │ ├── package.json │ ├── postcss.config.mjs │ ├── public │ │ ├── file.svg │ │ ├── globe.svg │ │ ├── next.svg │ │ ├── vercel.svg │ │ └── window.svg │ ├── src │ │ └── app │ │ │ ├── components │ │ │ ├── accordion │ │ │ │ └── page.tsx │ │ │ ├── app-bar │ │ │ │ └── page.tsx │ │ │ ├── avatar │ │ │ │ └── page.tsx │ │ │ ├── file-upload │ │ │ │ └── page.tsx │ │ │ ├── navigation │ │ │ │ └── page.tsx │ │ │ ├── pagination │ │ │ │ └── page.tsx │ │ │ ├── progress-ring │ │ │ │ └── page.tsx │ │ │ ├── progress │ │ │ │ └── page.tsx │ │ │ ├── rating │ │ │ │ └── page.tsx │ │ │ ├── segment │ │ │ │ └── page.tsx │ │ │ ├── slider │ │ │ │ └── page.tsx │ │ │ ├── switch │ │ │ │ └── page.tsx │ │ │ ├── tabs │ │ │ │ └── page.tsx │ │ │ ├── tags-input │ │ │ │ └── page.tsx │ │ │ └── toast │ │ │ │ └── page.tsx │ │ │ ├── favicon.ico │ │ │ ├── globals.css │ │ │ ├── layout.tsx │ │ │ ├── light-switch.tsx │ │ │ └── page.tsx │ └── tsconfig.json └── skeleton-svelte │ ├── .npmrc │ ├── package.json │ ├── src │ ├── app.css │ ├── app.d.ts │ ├── app.html │ └── routes │ │ ├── +layout.svelte │ │ ├── +page.svelte │ │ ├── components │ │ ├── accordions │ │ │ └── +page.svelte │ │ ├── app-bars │ │ │ └── +page.svelte │ │ ├── avatars │ │ │ └── +page.svelte │ │ ├── combobox │ │ │ └── +page.svelte │ │ ├── file-upload │ │ │ └── +page.svelte │ │ ├── modal │ │ │ └── +page.svelte │ │ ├── navigation │ │ │ └── +page.svelte │ │ ├── pagination │ │ │ └── +page.svelte │ │ ├── popover │ │ │ └── +page.svelte │ │ ├── progress-rings │ │ │ └── +page.svelte │ │ ├── progress │ │ │ └── +page.svelte │ │ ├── ratings │ │ │ └── +page.svelte │ │ ├── segment-control │ │ │ └── +page.svelte │ │ ├── slider │ │ │ └── +page.svelte │ │ ├── switch │ │ │ └── +page.svelte │ │ ├── tabs │ │ │ └── +page.svelte │ │ ├── tags-input │ │ │ └── +page.svelte │ │ ├── toast │ │ │ └── +page.svelte │ │ └── tooltip │ │ │ └── +page.svelte │ │ └── light-switch.svelte │ ├── static │ └── favicon.png │ ├── svelte.config.js │ ├── tsconfig.json │ └── vite.config.ts ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── prettier.config.js ├── sites ├── skeleton.dev │ ├── .prettierignore │ ├── README.md │ ├── astro.config.js │ ├── package.json │ ├── public │ │ ├── favicon.png │ │ └── llms.txt │ ├── scripts │ │ └── generate-schemas.ts │ ├── src │ │ ├── components │ │ │ ├── docs │ │ │ │ ├── Anatomy.astro │ │ │ │ ├── ApiTable.astro │ │ │ │ ├── BlueskyFeed.svelte │ │ │ │ ├── Breadcrumbs.astro │ │ │ │ ├── ChipsBar.astro │ │ │ │ ├── Drawer.astro │ │ │ │ ├── FigmaBuyNow.astro │ │ │ │ ├── Footer.astro │ │ │ │ ├── FrameworkPicker.astro │ │ │ │ ├── FrameworkTabs.tsx │ │ │ │ ├── Header.astro │ │ │ │ ├── HeaderSponsors.tsx │ │ │ │ ├── HeaderThemes.tsx │ │ │ │ ├── HeaderVersion.tsx │ │ │ │ ├── HideHeader.astro │ │ │ │ ├── Lightswitch.astro │ │ │ │ ├── NavGrid.astro │ │ │ │ ├── Navigation.astro │ │ │ │ ├── Popover.tsx │ │ │ │ ├── Preview.tsx │ │ │ │ ├── Process.astro │ │ │ │ ├── ProcessStep.astro │ │ │ │ ├── Search.svelte │ │ │ │ ├── TableCookbook.astro │ │ │ │ ├── TableOfContents.astro │ │ │ │ └── ThemeList.astro │ │ │ ├── homepage │ │ │ │ ├── HomeBottomCta.astro │ │ │ │ ├── HomeCompGrid.svelte │ │ │ │ ├── HomeDesignSystem.svelte │ │ │ │ ├── HomeEvenMore.astro │ │ │ │ ├── HomeFrameworkComps.svelte │ │ │ │ ├── HomeHero.astro │ │ │ │ ├── HomeMetrics.astro │ │ │ │ ├── HomeOpenSource.astro │ │ │ │ ├── HomePlayground.astro │ │ │ │ └── HomeSponsors.astro │ │ │ └── mdx │ │ │ │ ├── Anchor.astro │ │ │ │ ├── Blockquote.astro │ │ │ │ ├── Code.astro │ │ │ │ ├── Heading1.astro │ │ │ │ ├── Heading2.astro │ │ │ │ ├── Heading3.astro │ │ │ │ ├── Heading4.astro │ │ │ │ ├── Heading5.astro │ │ │ │ ├── Heading6.astro │ │ │ │ ├── HorzRule.astro │ │ │ │ ├── ListOrdered.astro │ │ │ │ ├── ListUnordered.astro │ │ │ │ ├── Table.astro │ │ │ │ └── index.ts │ │ ├── content.config.ts │ │ ├── content │ │ │ └── docs │ │ │ │ ├── components │ │ │ │ ├── accordion │ │ │ │ │ ├── meta.mdx │ │ │ │ │ ├── react.mdx │ │ │ │ │ └── svelte.mdx │ │ │ │ ├── app-bar │ │ │ │ │ ├── meta.mdx │ │ │ │ │ ├── react.mdx │ │ │ │ │ └── svelte.mdx │ │ │ │ ├── avatar │ │ │ │ │ ├── meta.mdx │ │ │ │ │ ├── react.mdx │ │ │ │ │ └── svelte.mdx │ │ │ │ ├── file-upload │ │ │ │ │ ├── meta.mdx │ │ │ │ │ ├── react.mdx │ │ │ │ │ └── svelte.mdx │ │ │ │ ├── navigation │ │ │ │ │ ├── meta.mdx │ │ │ │ │ ├── react.mdx │ │ │ │ │ └── svelte.mdx │ │ │ │ ├── pagination │ │ │ │ │ ├── meta.mdx │ │ │ │ │ ├── react.mdx │ │ │ │ │ └── svelte.mdx │ │ │ │ ├── progress-ring │ │ │ │ │ ├── meta.mdx │ │ │ │ │ ├── react.mdx │ │ │ │ │ └── svelte.mdx │ │ │ │ ├── progress │ │ │ │ │ ├── meta.mdx │ │ │ │ │ ├── react.mdx │ │ │ │ │ └── svelte.mdx │ │ │ │ ├── rating │ │ │ │ │ ├── meta.mdx │ │ │ │ │ ├── react.mdx │ │ │ │ │ └── svelte.mdx │ │ │ │ ├── segment │ │ │ │ │ ├── meta.mdx │ │ │ │ │ ├── react.mdx │ │ │ │ │ └── svelte.mdx │ │ │ │ ├── slider │ │ │ │ │ ├── meta.mdx │ │ │ │ │ ├── react.mdx │ │ │ │ │ └── svelte.mdx │ │ │ │ ├── switch │ │ │ │ │ ├── meta.mdx │ │ │ │ │ ├── react.mdx │ │ │ │ │ └── svelte.mdx │ │ │ │ ├── tabs │ │ │ │ │ ├── meta.mdx │ │ │ │ │ ├── react.mdx │ │ │ │ │ └── svelte.mdx │ │ │ │ ├── tags-input │ │ │ │ │ ├── meta.mdx │ │ │ │ │ ├── react.mdx │ │ │ │ │ └── svelte.mdx │ │ │ │ └── toast │ │ │ │ │ ├── meta.mdx │ │ │ │ │ ├── react.mdx │ │ │ │ │ └── svelte.mdx │ │ │ │ ├── design │ │ │ │ ├── colors.mdx │ │ │ │ ├── presets.mdx │ │ │ │ ├── spacing.mdx │ │ │ │ ├── themes.mdx │ │ │ │ └── typography.mdx │ │ │ │ ├── get-started │ │ │ │ ├── core-api.mdx │ │ │ │ ├── fundamentals.mdx │ │ │ │ ├── installation.mdx │ │ │ │ ├── installation │ │ │ │ │ ├── astro.mdx │ │ │ │ │ ├── nextjs.mdx │ │ │ │ │ ├── other.mdx │ │ │ │ │ ├── sveltekit.mdx │ │ │ │ │ ├── vite-react.mdx │ │ │ │ │ └── vite-svelte.mdx │ │ │ │ ├── introduction.mdx │ │ │ │ └── migrate-from-v2.mdx │ │ │ │ ├── guides │ │ │ │ ├── cookbook.mdx │ │ │ │ ├── cookbook │ │ │ │ │ ├── alerts.mdx │ │ │ │ │ ├── breadcrumbs.mdx │ │ │ │ │ ├── chat.mdx │ │ │ │ │ ├── clipboard.mdx │ │ │ │ │ ├── dialog.mdx │ │ │ │ │ ├── dynamic-theming.mdx │ │ │ │ │ ├── image-layouts.mdx │ │ │ │ │ ├── light-switch.mdx │ │ │ │ │ ├── logo-clouds.mdx │ │ │ │ │ ├── scroll-containers.mdx │ │ │ │ │ ├── stepper.mdx │ │ │ │ │ ├── svg-filters.mdx │ │ │ │ │ └── table-of-contents.mdx │ │ │ │ ├── figma.mdx │ │ │ │ ├── figma │ │ │ │ │ ├── chapter-1.mdx │ │ │ │ │ ├── chapter-2.mdx │ │ │ │ │ └── chapter-3.mdx │ │ │ │ ├── layouts.mdx │ │ │ │ └── mode.mdx │ │ │ │ ├── headless │ │ │ │ ├── bits-ui.mdx │ │ │ │ ├── melt-ui.mdx │ │ │ │ └── radix-ui.mdx │ │ │ │ ├── integrations │ │ │ │ ├── code-block │ │ │ │ │ ├── meta.mdx │ │ │ │ │ ├── react.mdx │ │ │ │ │ └── svelte.mdx │ │ │ │ ├── iconography │ │ │ │ │ ├── meta.mdx │ │ │ │ │ ├── react.mdx │ │ │ │ │ └── svelte.mdx │ │ │ │ └── popover │ │ │ │ │ ├── meta.mdx │ │ │ │ │ ├── react.mdx │ │ │ │ │ └── svelte.mdx │ │ │ │ ├── resources │ │ │ │ ├── _markdown.mdx │ │ │ │ ├── contribute.mdx │ │ │ │ ├── contribute │ │ │ │ │ ├── components.mdx │ │ │ │ │ ├── documentation.mdx │ │ │ │ │ └── get-started.mdx │ │ │ │ └── llms.mdx │ │ │ │ └── tailwind │ │ │ │ ├── badges.mdx │ │ │ │ ├── buttons.mdx │ │ │ │ ├── cards.mdx │ │ │ │ ├── chips.mdx │ │ │ │ ├── dividers.mdx │ │ │ │ ├── forms.mdx │ │ │ │ ├── placeholders.mdx │ │ │ │ └── tables.mdx │ │ ├── env.d.ts │ │ ├── examples │ │ │ ├── components │ │ │ │ ├── accordions │ │ │ │ │ ├── Example.svelte │ │ │ │ │ ├── Example.tsx │ │ │ │ │ ├── ExampleCollapsible.svelte │ │ │ │ │ ├── ExampleCollapsible.tsx │ │ │ │ │ ├── ExampleMultiple.svelte │ │ │ │ │ └── ExampleMultiple.tsx │ │ │ │ ├── app-bars │ │ │ │ │ ├── Example.svelte │ │ │ │ │ ├── Example.tsx │ │ │ │ │ ├── ExampleResponsive.svelte │ │ │ │ │ ├── ExampleResponsive.tsx │ │ │ │ │ ├── ExampleToolbar.svelte │ │ │ │ │ └── ExampleToolbar.tsx │ │ │ │ ├── avatars │ │ │ │ │ ├── Example.svelte │ │ │ │ │ ├── Example.tsx │ │ │ │ │ ├── ExampleFallback.svelte │ │ │ │ │ ├── ExampleFallback.tsx │ │ │ │ │ ├── ExampleFilter.svelte │ │ │ │ │ ├── ExampleFilter.tsx │ │ │ │ │ ├── ExampleStyle.svelte │ │ │ │ │ └── ExampleStyle.tsx │ │ │ │ ├── file-upload │ │ │ │ │ ├── Example.svelte │ │ │ │ │ ├── Example.tsx │ │ │ │ │ ├── ExampleApiBind.svelte │ │ │ │ │ ├── ExampleApiBind.tsx │ │ │ │ │ ├── ExampleButton.svelte │ │ │ │ │ ├── ExampleButton.tsx │ │ │ │ │ ├── ExampleDisabled.svelte │ │ │ │ │ ├── ExampleDisabled.tsx │ │ │ │ │ ├── ExampleFull.svelte │ │ │ │ │ ├── ExampleFull.tsx │ │ │ │ │ ├── ExampleRtl.svelte │ │ │ │ │ └── ExampleRtl.tsx │ │ │ │ ├── navigation │ │ │ │ │ ├── ExampleBar.svelte │ │ │ │ │ ├── ExampleBar.tsx │ │ │ │ │ ├── ExampleBarRouting.svelte │ │ │ │ │ ├── ExampleBarRouting.tsx │ │ │ │ │ ├── ExampleRail.svelte │ │ │ │ │ ├── ExampleRail.tsx │ │ │ │ │ ├── ExampleRailExpanded.svelte │ │ │ │ │ ├── ExampleRailExpanded.tsx │ │ │ │ │ ├── ExampleRailRouting.svelte │ │ │ │ │ ├── ExampleRailRouting.tsx │ │ │ │ │ ├── ExampleTiles.svelte │ │ │ │ │ ├── ExampleTiles.tsx │ │ │ │ │ ├── ExampleTilesSelectionReact.txt │ │ │ │ │ └── ExampleTilesSelectionSvelte.txt │ │ │ │ ├── pagination │ │ │ │ │ ├── Example.svelte │ │ │ │ │ ├── Example.tsx │ │ │ │ │ ├── ExampleAlt.svelte │ │ │ │ │ └── ExampleAlt.tsx │ │ │ │ ├── popover │ │ │ │ │ ├── ExampleCombobox.svelte │ │ │ │ │ ├── ExampleCombobox.tsx │ │ │ │ │ ├── ExampleModal.svelte │ │ │ │ │ ├── ExampleModal.tsx │ │ │ │ │ ├── ExampleModalDrawer.svelte │ │ │ │ │ ├── ExamplePopover.svelte │ │ │ │ │ ├── ExamplePopover.tsx │ │ │ │ │ ├── ExampleTooltip.svelte │ │ │ │ │ ├── ExampleTooltip.tsx │ │ │ │ │ └── PositioningOptions.txt │ │ │ │ ├── progress-rings │ │ │ │ │ ├── Example.svelte │ │ │ │ │ ├── Example.tsx │ │ │ │ │ ├── ExampleIcons.svelte │ │ │ │ │ ├── ExampleIcons.tsx │ │ │ │ │ ├── ExampleIndeterminate.svelte │ │ │ │ │ ├── ExampleIndeterminate.tsx │ │ │ │ │ ├── ExampleLabel.svelte │ │ │ │ │ └── ExampleLabel.tsx │ │ │ │ ├── progress │ │ │ │ │ ├── Example.svelte │ │ │ │ │ ├── Example.tsx │ │ │ │ │ ├── ExampleColors.svelte │ │ │ │ │ ├── ExampleColors.tsx │ │ │ │ │ ├── ExampleCustomAnimation.svelte │ │ │ │ │ ├── ExampleCustomAnimation.tsx │ │ │ │ │ ├── ExampleHeight.svelte │ │ │ │ │ ├── ExampleHeight.tsx │ │ │ │ │ ├── ExampleIndeterminate.svelte │ │ │ │ │ ├── ExampleIndeterminate.tsx │ │ │ │ │ └── ExampleNative.astro │ │ │ │ ├── rating │ │ │ │ │ ├── Example.svelte │ │ │ │ │ ├── Example.tsx │ │ │ │ │ ├── ExampleAllowHalf.svelte │ │ │ │ │ ├── ExampleAllowHalf.tsx │ │ │ │ │ ├── ExampleCount.svelte │ │ │ │ │ ├── ExampleCount.tsx │ │ │ │ │ ├── ExampleCustomIcon.svelte │ │ │ │ │ ├── ExampleCustomIcon.tsx │ │ │ │ │ ├── ExampleDisabled.svelte │ │ │ │ │ ├── ExampleDisabled.tsx │ │ │ │ │ ├── ExampleRTL.svelte │ │ │ │ │ ├── ExampleRTL.tsx │ │ │ │ │ ├── ExampleReadOnly.svelte │ │ │ │ │ └── ExampleReadOnly.tsx │ │ │ │ ├── segment-control │ │ │ │ │ ├── Example.svelte │ │ │ │ │ ├── Example.tsx │ │ │ │ │ ├── ExampleDisableItem.svelte │ │ │ │ │ ├── ExampleDisableItem.tsx │ │ │ │ │ ├── ExampleDisabled.svelte │ │ │ │ │ ├── ExampleDisabled.tsx │ │ │ │ │ ├── ExampleReadOnly.svelte │ │ │ │ │ ├── ExampleReadOnly.tsx │ │ │ │ │ ├── ExampleVertical.svelte │ │ │ │ │ └── ExampleVertical.tsx │ │ │ │ ├── slider │ │ │ │ │ ├── Example.svelte │ │ │ │ │ ├── Example.tsx │ │ │ │ │ ├── ExampleColors.svelte │ │ │ │ │ ├── ExampleColors.tsx │ │ │ │ │ ├── ExampleHeight.svelte │ │ │ │ │ ├── ExampleHeight.tsx │ │ │ │ │ ├── ExampleMarkers.svelte │ │ │ │ │ ├── ExampleMarkers.tsx │ │ │ │ │ ├── ExampleMulti.svelte │ │ │ │ │ ├── ExampleMulti.tsx │ │ │ │ │ ├── ExampleRtl.svelte │ │ │ │ │ ├── ExampleRtl.tsx │ │ │ │ │ ├── ExampleState.svelte │ │ │ │ │ └── ExampleState.tsx │ │ │ │ ├── switch │ │ │ │ │ ├── Example.svelte │ │ │ │ │ ├── Example.tsx │ │ │ │ │ ├── ExampleCompact.svelte │ │ │ │ │ ├── ExampleCompact.tsx │ │ │ │ │ ├── ExampleIcons.svelte │ │ │ │ │ ├── ExampleIcons.tsx │ │ │ │ │ ├── ExampleLightswitch.svelte │ │ │ │ │ ├── ExampleLightswitch.tsx │ │ │ │ │ ├── ExampleList.svelte │ │ │ │ │ └── ExampleList.tsx │ │ │ │ ├── tabs │ │ │ │ │ ├── Example.svelte │ │ │ │ │ ├── Example.tsx │ │ │ │ │ ├── ExampleFluid.svelte │ │ │ │ │ ├── ExampleFluid.tsx │ │ │ │ │ ├── ExampleIcons.svelte │ │ │ │ │ ├── ExampleIcons.tsx │ │ │ │ │ ├── ExampleIconsLabel.svelte │ │ │ │ │ ├── ExampleIconsLabel.tsx │ │ │ │ │ ├── ExampleJustify.svelte │ │ │ │ │ ├── ExampleJustify.tsx │ │ │ │ │ ├── ExampleRTL.svelte │ │ │ │ │ └── ExampleRTL.tsx │ │ │ │ ├── tags-input │ │ │ │ │ ├── Example.svelte │ │ │ │ │ ├── Example.tsx │ │ │ │ │ ├── ExampleColors.svelte │ │ │ │ │ ├── ExampleColors.tsx │ │ │ │ │ ├── ExampleDisabled.svelte │ │ │ │ │ ├── ExampleDisabled.tsx │ │ │ │ │ ├── ExampleIcons.svelte │ │ │ │ │ ├── ExampleIcons.tsx │ │ │ │ │ ├── ExampleMisc.svelte │ │ │ │ │ └── ExampleMisc.tsx │ │ │ │ └── toast │ │ │ │ │ ├── Example.svelte │ │ │ │ │ ├── Example.tsx │ │ │ │ │ ├── ExampleClosable.svelte │ │ │ │ │ ├── ExampleClosable.tsx │ │ │ │ │ ├── ExamplePlacement.svelte │ │ │ │ │ ├── ExamplePlacement.tsx │ │ │ │ │ ├── ExamplePromise.svelte │ │ │ │ │ ├── ExamplePromise.tsx │ │ │ │ │ ├── ExampleReuseLayout.svelte │ │ │ │ │ ├── ExampleReuseLayout.tsx │ │ │ │ │ ├── ExampleReusePage.svelte │ │ │ │ │ ├── ExampleReusePage.tsx │ │ │ │ │ ├── ExampleType.svelte │ │ │ │ │ ├── ExampleType.tsx │ │ │ │ │ ├── toaster-react.ts │ │ │ │ │ └── toaster-svelte.ts │ │ │ ├── design │ │ │ │ ├── colors │ │ │ │ │ ├── ExampleColors.svelte │ │ │ │ │ ├── ExampleContrast.astro │ │ │ │ │ ├── ExamplePairings.astro │ │ │ │ │ ├── ExamplePairingsDynamic.astro │ │ │ │ │ └── ExamplePairingsStack.astro │ │ │ │ ├── presets │ │ │ │ │ ├── Example.svelte │ │ │ │ │ ├── ExampleCustom.astro │ │ │ │ │ ├── ExampleFilled.astro │ │ │ │ │ ├── ExampleGlass.astro │ │ │ │ │ ├── ExampleGradient.astro │ │ │ │ │ ├── ExampleOutlined.astro │ │ │ │ │ └── ExampleTonal.astro │ │ │ │ ├── spacing │ │ │ │ │ └── Example.svelte │ │ │ │ └── typography │ │ │ │ │ ├── Anchors.astro │ │ │ │ │ ├── Blockquotes.astro │ │ │ │ │ ├── CodeTag.astro │ │ │ │ │ ├── ExampleSemantic.svelte │ │ │ │ │ ├── ExampleTypescale.svelte │ │ │ │ │ ├── Headings.astro │ │ │ │ │ ├── InsDel.astro │ │ │ │ │ ├── Keyboard.astro │ │ │ │ │ ├── ListBasic.astro │ │ │ │ │ ├── ListDesc.astro │ │ │ │ │ ├── ListNav.astro │ │ │ │ │ ├── ListOrdered.astro │ │ │ │ │ ├── ListUnordered.astro │ │ │ │ │ ├── Mark.astro │ │ │ │ │ ├── Paragraphs.astro │ │ │ │ │ └── Pre.astro │ │ │ ├── guides │ │ │ │ └── cookbook │ │ │ │ │ ├── alerts │ │ │ │ │ ├── Example.astro │ │ │ │ │ └── ExampleColors.astro │ │ │ │ │ ├── breadcrumbs │ │ │ │ │ ├── Example.astro │ │ │ │ │ └── ExampleIcons.astro │ │ │ │ │ ├── chat │ │ │ │ │ ├── Example.svelte │ │ │ │ │ ├── ExampleBubbles.astro │ │ │ │ │ ├── ExampleColumns.astro │ │ │ │ │ ├── ExampleFeed.astro │ │ │ │ │ └── ExampleRows.astro │ │ │ │ │ ├── clipboard │ │ │ │ │ ├── Example.astro │ │ │ │ │ └── ExampleInput.astro │ │ │ │ │ ├── dialog │ │ │ │ │ └── Example.astro │ │ │ │ │ ├── image-layouts │ │ │ │ │ ├── ExampleFeatured.astro │ │ │ │ │ ├── ExampleGrid.astro │ │ │ │ │ ├── ExampleMasonry.astro │ │ │ │ │ └── ExampleQuad.astro │ │ │ │ │ ├── layouts │ │ │ │ │ ├── ExampleColOne.astro │ │ │ │ │ ├── ExampleColThree.astro │ │ │ │ │ ├── ExampleColTwo.astro │ │ │ │ │ └── ExampleStickyHeader.astro │ │ │ │ │ ├── light-switch │ │ │ │ │ ├── Example.svelte │ │ │ │ │ └── Example.tsx │ │ │ │ │ ├── logo-clouds │ │ │ │ │ ├── Example.astro │ │ │ │ │ └── ExampleRows.astro │ │ │ │ │ ├── scroll-containers │ │ │ │ │ ├── Example.astro │ │ │ │ │ ├── ExampleCarousel.astro │ │ │ │ │ └── ExampleMultiColumn.astro │ │ │ │ │ ├── stepper │ │ │ │ │ ├── Example.svelte │ │ │ │ │ ├── ExampleComponent.svelte │ │ │ │ │ └── ExampleStepOne.svelte │ │ │ │ │ ├── svg-filters │ │ │ │ │ ├── Example.astro │ │ │ │ │ └── filters │ │ │ │ │ │ ├── Apollo.astro │ │ │ │ │ │ ├── BlueNight.astro │ │ │ │ │ │ ├── Emerald.astro │ │ │ │ │ │ ├── GreenFall.astro │ │ │ │ │ │ ├── Noir.astro │ │ │ │ │ │ ├── NoirLight.astro │ │ │ │ │ │ ├── Rustic.astro │ │ │ │ │ │ ├── Summer.astro │ │ │ │ │ │ ├── XPro.astro │ │ │ │ │ │ └── index.ts │ │ │ │ │ └── table-of-contents │ │ │ │ │ └── Example.astro │ │ │ ├── integrations │ │ │ │ └── code-block │ │ │ │ │ ├── Example.astro │ │ │ │ │ ├── ReactComponent.txt │ │ │ │ │ ├── ReactPage.txt │ │ │ │ │ ├── ReactType.txt │ │ │ │ │ ├── SvelteComponent.txt │ │ │ │ │ ├── SveltePage.txt │ │ │ │ │ └── Types.txt │ │ │ └── tailwind │ │ │ │ ├── badges │ │ │ │ ├── Example.astro │ │ │ │ ├── ExampleOverlap.astro │ │ │ │ └── ExamplePresets.astro │ │ │ │ ├── buttons │ │ │ │ ├── Example.astro │ │ │ │ ├── ExampleDisabled.astro │ │ │ │ ├── ExampleGroup.astro │ │ │ │ ├── ExamplePresets.astro │ │ │ │ └── ExampleSizes.astro │ │ │ │ ├── cards │ │ │ │ ├── Example.astro │ │ │ │ ├── ExampleDetailed.astro │ │ │ │ └── ExamplePresets.astro │ │ │ │ ├── chips │ │ │ │ ├── Example.astro │ │ │ │ ├── ExampleDisabled.astro │ │ │ │ ├── ExamplePresets.astro │ │ │ │ ├── ExampleSelect.svelte │ │ │ │ └── ExampleSelect.tsx │ │ │ │ ├── dividers │ │ │ │ ├── Example.astro │ │ │ │ ├── ExampleColors.astro │ │ │ │ ├── ExampleSize.astro │ │ │ │ ├── ExampleStyle.astro │ │ │ │ └── ExampleVert.astro │ │ │ │ ├── forms │ │ │ │ ├── Example.astro │ │ │ │ ├── ExampleCheckboxes.astro │ │ │ │ ├── ExampleGroups.astro │ │ │ │ ├── ExampleInput.astro │ │ │ │ ├── ExampleInputs.astro │ │ │ │ ├── ExampleRadio.astro │ │ │ │ ├── ExampleSelect.astro │ │ │ │ ├── ExampleSelection.astro │ │ │ │ ├── ExampleSpecial.astro │ │ │ │ └── ExampleTextarea.astro │ │ │ │ ├── gradients │ │ │ │ ├── Example.astro │ │ │ │ ├── ExampleConic.astro │ │ │ │ ├── ExampleSpinner.astro │ │ │ │ └── ExampleText.astro │ │ │ │ ├── placeholders │ │ │ │ └── Example.astro │ │ │ │ └── tables │ │ │ │ ├── Example.astro │ │ │ │ ├── ExampleFull.astro │ │ │ │ └── ExampleNav.astro │ │ ├── icons │ │ │ ├── astro.svg │ │ │ ├── bluesky.svg │ │ │ ├── discord.svg │ │ │ ├── github.svg │ │ │ ├── react.svg │ │ │ ├── skeleton-full.svg │ │ │ ├── skeleton.svg │ │ │ ├── solid.svg │ │ │ ├── svelte.svg │ │ │ ├── tailwind.svg │ │ │ ├── vue.svg │ │ │ └── youtube.svg │ │ ├── images │ │ │ ├── get-started │ │ │ │ └── figma │ │ │ │ │ ├── components.png │ │ │ │ │ ├── components.webp │ │ │ │ │ ├── hero-dark.webp │ │ │ │ │ ├── hero-light.webp │ │ │ │ │ ├── hero.webp │ │ │ │ │ ├── plugin.png │ │ │ │ │ ├── plugin.webp │ │ │ │ │ ├── tutorials.png │ │ │ │ │ ├── tutorials.webp │ │ │ │ │ └── ui-kit.webp │ │ │ ├── headless │ │ │ │ ├── bits-ui │ │ │ │ │ ├── bits-banner.png │ │ │ │ │ └── bits-component.gif │ │ │ │ ├── melt-ui │ │ │ │ │ ├── melt-banner.png │ │ │ │ │ └── melt-component.gif │ │ │ │ └── radix-ui │ │ │ │ │ ├── radix-banner.png │ │ │ │ │ └── radix-component.gif │ │ │ ├── meta │ │ │ │ └── opengraph.png │ │ │ └── tutorials │ │ │ │ └── figma │ │ │ │ ├── chapter-1 │ │ │ │ ├── 01_createNewProject.webp │ │ │ │ ├── 02_importProject.webp │ │ │ │ ├── 03_publish.webp │ │ │ │ ├── 04_createNewFile.webp │ │ │ │ ├── 05_selectLibrary.webp │ │ │ │ └── 06_useLibrary.webp │ │ │ │ ├── chapter-2 │ │ │ │ ├── 01_openProject.webp │ │ │ │ ├── 01_openSkeleton.webp │ │ │ │ ├── 02_openThemePlugin.webp │ │ │ │ ├── 02_setStage.webp │ │ │ │ ├── 03_addNewTheme.webp │ │ │ │ ├── 03_switchTheme.webp │ │ │ │ ├── 03_switchThemeResult.webp │ │ │ │ ├── 04_selectTheme.webp │ │ │ │ ├── 04_switchColorScheme.webp │ │ │ │ ├── 04_switchColorSchemeResult.webp │ │ │ │ ├── 05_copyTheme.webp │ │ │ │ ├── 06_pasteTheme.webp │ │ │ │ ├── 07_publish.webp │ │ │ │ └── 07_publishUpdates.webp │ │ │ │ ├── chapter-3 │ │ │ │ ├── 02_import.webp │ │ │ │ ├── 03_publishLibrary.webp │ │ │ │ ├── 04_openFile.webp │ │ │ │ ├── 04_selectNewSkeleton.webp │ │ │ │ ├── 04_selectSkeleton.webp │ │ │ │ └── removeOld.webp │ │ │ │ └── skeletonFileIcon.svg │ │ ├── layouts │ │ │ ├── LayoutDoc.astro │ │ │ └── LayoutRoot.astro │ │ ├── lib │ │ │ ├── bluesky.ts │ │ │ └── generate-llm.ts │ │ ├── pages │ │ │ ├── 404.astro │ │ │ ├── docs │ │ │ │ └── [...slug] │ │ │ │ │ └── index.astro │ │ │ ├── figma │ │ │ │ └── index.astro │ │ │ ├── index.astro │ │ │ ├── llms-react.txt.ts │ │ │ ├── llms-svelte.txt.ts │ │ │ └── news │ │ │ │ └── index.astro │ │ ├── stores │ │ │ ├── doc-search-settings.ts │ │ │ ├── preferred-framework.ts │ │ │ └── social-links.ts │ │ └── styles │ │ │ └── app.css │ ├── svelte.config.js │ └── tsconfig.json └── themes.skeleton.dev │ ├── README.md │ ├── package.json │ ├── src │ ├── app.css │ ├── app.d.ts │ ├── app.html │ ├── lib │ │ ├── components │ │ │ ├── common │ │ │ │ ├── AppFooter │ │ │ │ │ └── AppFooter.svelte │ │ │ │ ├── AppHeader │ │ │ │ │ └── AppHeader.svelte │ │ │ │ ├── CodeBlock │ │ │ │ │ ├── CodeBlock.svelte │ │ │ │ │ └── types.ts │ │ │ │ ├── Lightswitch │ │ │ │ │ └── Lightswitch.svelte │ │ │ │ └── Logo │ │ │ │ │ └── Logo.svelte │ │ │ └── generator │ │ │ │ ├── Controls │ │ │ │ ├── Controls.svelte │ │ │ │ ├── ControlsBackgrounds.svelte │ │ │ │ ├── ControlsColors.svelte │ │ │ │ ├── ControlsCore.svelte │ │ │ │ ├── ControlsEdges.svelte │ │ │ │ ├── ControlsSpacing.svelte │ │ │ │ └── ControlsTypography.svelte │ │ │ │ ├── Edges │ │ │ │ ├── EdgeOption.svelte │ │ │ │ └── Edges.svelte │ │ │ │ ├── ExampleChart │ │ │ │ └── ExampleChart.svelte │ │ │ │ └── Preview │ │ │ │ ├── Preview.svelte │ │ │ │ ├── PreviewComponents.svelte │ │ │ │ ├── PreviewPalette.svelte │ │ │ │ └── PreviewTypography.svelte │ │ ├── constants │ │ │ └── generator.ts │ │ ├── state │ │ │ ├── generator.svelte.ts │ │ │ └── types.ts │ │ └── utils │ │ │ ├── generator │ │ │ ├── colors.ts │ │ │ ├── format-output.ts │ │ │ ├── generate-css.ts │ │ │ └── generate-theme.ts │ │ │ └── importer │ │ │ ├── import-theme-v2.ts │ │ │ ├── import-theme-v3-rc1.ts │ │ │ └── import-theme-v3.ts │ └── routes │ │ ├── (app) │ │ ├── +layout.svelte │ │ ├── +page.server.ts │ │ ├── +page.svelte │ │ └── themes │ │ │ └── import │ │ │ └── +page.svelte │ │ ├── (generator) │ │ └── themes │ │ │ └── create │ │ │ ├── +layout.svelte │ │ │ └── +page.svelte │ │ └── +layout.svelte │ ├── static │ ├── favicon.png │ └── images │ │ ├── female.png │ │ └── male.png │ ├── svelte.config.js │ ├── tsconfig.json │ └── vite.config.ts └── tsconfig.json /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@3.1.0/schema.json", 3 | "changelog": ["@svitejs/changesets-changelog-github-compact", { "repo": "skeletonlabs/skeleton" }], 4 | "commit": false, 5 | "fixed": [], 6 | "prettier": false, 7 | "linked": [], 8 | "access": "public", 9 | "baseBranch": "main", 10 | "updateInternalDependencies": "patch", 11 | "privatePackages": { 12 | "tag": false, 13 | "version": false 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /.changeset/icy-insects-throw.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@skeletonlabs/skeleton-svelte": patch 3 | --- 4 | 5 | Bugfix: z-index of tooltip was not working when an arrow element was present. 6 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | indent_style = tab 7 | insert_final_newline = true 8 | trim_trailing_whitespace = true 9 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: true 2 | contact_links: 3 | - name: Having problems with the Skeleton CLI? 4 | url: https://github.com/skeletonlabs/skeleton/issues/new?template=bug_report.yml 5 | about: Please report issues using the bug report template. 6 | - name: Get support on Discord 7 | url: https://discord.com/channels/1003691521280856084/1151213014721241128 8 | about: Get help from the maintainers on Discord. 9 | - name: Ask a question, give feedback, share your project 10 | url: https://github.com/skeletonlabs/skeleton/discussions 11 | about: Connect with other community members with GitHub discussions. 12 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/docs_issue.yml: -------------------------------------------------------------------------------- 1 | name: 📗 Report Docs Issue 2 | description: Use this to report a typo or incorrect information. 3 | labels: [documentation] 4 | type: Task 5 | body: 6 | - type: input 7 | id: link 8 | attributes: 9 | label: Link to the Page 10 | - type: textarea 11 | id: quote 12 | attributes: 13 | label: Describe the Issue (screenshots encouraged!) 14 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.yml: -------------------------------------------------------------------------------- 1 | name: 🛠️ Request New Feature 2 | description: Let us know what you would like to see added. 3 | labels: ['feature request'] 4 | type: Feature 5 | body: 6 | - type: textarea 7 | id: description 8 | attributes: 9 | label: Describe the feature in detail (code, mocks, or screenshots encouraged) 10 | - type: dropdown 11 | id: category 12 | attributes: 13 | label: What type of pull request would this be? 14 | options: 15 | - 'New Feature' 16 | - 'Enhancement' 17 | - 'Guide' 18 | - 'Docs' 19 | - 'Other' 20 | - type: textarea 21 | id: references 22 | attributes: 23 | label: Provide relevant links or additional information. 24 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | 3 | # registry=http://localhost:4873 4 | # https://verdaccio.org/docs/installation/ only uncomment for GH Action testing 5 | 6 | package-manager-strict=false 7 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .changeset 2 | .svelte-kit 3 | .astro 4 | .next 5 | build 6 | dist 7 | pagefind 8 | CHANGELOG.md 9 | pnpm-lock.yaml -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | /** 4 | * Astro 5 | */ 6 | "astro-build.astro-vscode", 7 | /** 8 | * MDX 9 | */ 10 | "unifiedjs.vscode-mdx", 11 | /** 12 | * Tailwind 13 | */ 14 | "bradlc.vscode-tailwindcss", 15 | /** 16 | * Svelte 17 | */ 18 | "svelte.svelte-vscode", 19 | /** 20 | * Prettier 21 | */ 22 | "esbenp.prettier-vscode", 23 | /** 24 | * ESLint 25 | */ 26 | "dbaeumer.vscode-eslint" 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.defaultFormatter": "esbenp.prettier-vscode", 3 | "prettier.enable": true, 4 | "editor.formatOnSave": true, 5 | "eslint.enable": true, 6 | "editor.codeActionsOnSave": { 7 | "source.fixAll": "explicit" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | This repository is governed by the Skeleton Code of Conduct. 2 | 3 | https://github.com/skeletonlabs/community/blob/main/CODE_OF_CONDUCT.md 4 | -------------------------------------------------------------------------------- /packages/cli/README.md: -------------------------------------------------------------------------------- 1 | # Skeleton CLI 2 | 3 | The CLI for Skeleton related tooling. 4 | 5 | ## Usage 6 | 7 | ```bash 8 | npx skeleton [command] [args] 9 | ``` 10 | 11 | ## Commands 12 | 13 | ### Migrate 14 | 15 | #### `skeleton-3` 16 | 17 | The `skeleton-3` migration will migrate your project from V2 to V3, this includes: 18 | 19 | - Tailwind classes 20 | - Import statements 21 | - Component names 22 | - Your `package.json` 23 | - Your `tailwind.config` 24 | -------------------------------------------------------------------------------- /packages/cli/build.config.ts: -------------------------------------------------------------------------------- 1 | import { defineBuildConfig } from 'unbuild'; 2 | 3 | export default defineBuildConfig({ 4 | entries: ['./src/index.ts'], 5 | declaration: true, 6 | clean: true 7 | }); 8 | -------------------------------------------------------------------------------- /packages/cli/src/commands/migrate/index.ts: -------------------------------------------------------------------------------- 1 | import skeleton3 from './migrations/skeleton-3'; 2 | import { Argument, Command, Option } from 'commander'; 3 | 4 | interface MigrateOptions { 5 | cwd?: string; 6 | } 7 | const MIGRATIONS = { 8 | 'skeleton-3': skeleton3 9 | } as const; 10 | 11 | const migrate = new Command('migrate') 12 | .description('Run a migration') 13 | .addArgument(new Argument('', 'The migration to run').choices(Object.keys(MIGRATIONS))) 14 | .addOption(new Option('--cwd ', 'The directory to run the migration in')) 15 | .action((migration: keyof typeof MIGRATIONS, options: MigrateOptions) => MIGRATIONS[migration](options)); 16 | 17 | export type { MigrateOptions }; 18 | export { migrate }; 19 | -------------------------------------------------------------------------------- /packages/cli/src/commands/migrate/migrations/skeleton-3/transformers/transform-stylesheet.ts: -------------------------------------------------------------------------------- 1 | import { parse } from 'postcss'; 2 | import { transformClasses } from './transform-classes'; 3 | 4 | function transformStyleSheet(code: string) { 5 | const parsed = parse(code); 6 | parsed.walkAtRules('apply', (atRule) => { 7 | atRule.params = transformClasses(atRule.params).code; 8 | }); 9 | 10 | return { 11 | code: parsed.toString() 12 | }; 13 | } 14 | 15 | export { transformStyleSheet }; 16 | -------------------------------------------------------------------------------- /packages/cli/src/commands/migrate/migrations/skeleton-3/utility/constants.ts: -------------------------------------------------------------------------------- 1 | import type { Theme } from './types'; 2 | 3 | const FALLBACK_THEME: Theme = { 4 | type: 'preset', 5 | value: 'cerberus' 6 | }; 7 | 8 | export { FALLBACK_THEME }; 9 | -------------------------------------------------------------------------------- /packages/cli/src/commands/migrate/migrations/skeleton-3/utility/theme-mappings.ts: -------------------------------------------------------------------------------- 1 | import type { Theme } from './types'; 2 | 3 | const THEME_MAPPINGS: Record = { 4 | skeleton: { type: 'preset', value: 'legacy' }, 5 | 'gold-nouveau': { type: 'preset', value: 'nouveau' }, 6 | wintry: { type: 'preset', value: 'wintry' }, 7 | modern: { type: 'preset', value: 'modern' }, 8 | rocket: { type: 'preset', value: 'rocket' }, 9 | seafoam: { type: 'preset', value: 'seafoam' }, 10 | vintage: { type: 'preset', value: 'vintage' }, 11 | sahara: { type: 'preset', value: 'sahara' }, 12 | hamlindigo: { type: 'preset', value: 'hamlindigo' }, 13 | crimson: { type: 'preset', value: 'crimson' } 14 | }; 15 | 16 | export { THEME_MAPPINGS }; 17 | -------------------------------------------------------------------------------- /packages/cli/src/commands/migrate/migrations/skeleton-3/utility/types.ts: -------------------------------------------------------------------------------- 1 | interface Theme { 2 | type: 'preset' | 'custom'; 3 | value: string; 4 | } 5 | 6 | export type { Theme }; 7 | -------------------------------------------------------------------------------- /packages/cli/src/utility/get-our-package-json.ts: -------------------------------------------------------------------------------- 1 | import { fileURLToPath } from 'node:url'; 2 | import { dirname, join } from 'node:path'; 3 | import type { PackageJson } from 'type-fest'; 4 | import { readFile } from 'node:fs/promises'; 5 | 6 | async function getOurPackageJson(): Promise> { 7 | const packageJsonPath = join(dirname(fileURLToPath(import.meta.url)), '../package.json'); 8 | const content = await readFile(packageJsonPath, 'utf-8'); 9 | return JSON.parse(content); 10 | } 11 | 12 | export { getOurPackageJson }; 13 | -------------------------------------------------------------------------------- /packages/cli/src/utility/install-dependencies.ts: -------------------------------------------------------------------------------- 1 | import { detect, resolveCommand } from 'package-manager-detector'; 2 | import child_process from 'node:child_process'; 3 | import { promisify } from 'node:util'; 4 | 5 | const exec = promisify(child_process.exec); 6 | 7 | async function installDependencies(cwd = process.cwd()) { 8 | const pm = await detect({ 9 | cwd: cwd 10 | }); 11 | const resolvedCommand = resolveCommand(pm?.agent ?? 'npm', 'install', []); 12 | if (!resolvedCommand) { 13 | throw new Error('Could not resolve package manager command.'); 14 | } 15 | return exec(`${resolvedCommand.command} ${resolvedCommand.args.join(' ')}`, { 16 | cwd: cwd 17 | }); 18 | } 19 | 20 | export { installDependencies }; 21 | -------------------------------------------------------------------------------- /packages/cli/src/utility/sort-properties-alphabetically.ts: -------------------------------------------------------------------------------- 1 | function sortPropertiesAlphabetically(object: Record) { 2 | const orderedObject: Record = {}; 3 | const sortedEntries = Object.entries(object).sort(([a], [b]) => a.localeCompare(b)); 4 | for (const [key, value] of sortedEntries) { 5 | orderedObject[key] = value; 6 | } 7 | return orderedObject; 8 | } 9 | 10 | export { sortPropertiesAlphabetically }; 11 | -------------------------------------------------------------------------------- /packages/cli/src/utility/ts-morph/add-named-import.ts: -------------------------------------------------------------------------------- 1 | import { SourceFile } from 'ts-morph'; 2 | 3 | function addNamedImport(file: SourceFile, specifier: string, name: string) { 4 | const existingImportDeclaration = file.getImportDeclaration((importDeclaration) => { 5 | const moduleSpecifier = importDeclaration.getModuleSpecifier().getLiteralText(); 6 | return moduleSpecifier === specifier; 7 | }); 8 | if (existingImportDeclaration) { 9 | if (!existingImportDeclaration.getNamedImports().some((namedImport) => namedImport.getName() === name)) { 10 | existingImportDeclaration.addNamedImport(name); 11 | } 12 | } else { 13 | file.addImportDeclaration({ 14 | moduleSpecifier: specifier, 15 | namedImports: [name] 16 | }); 17 | } 18 | } 19 | 20 | export { addNamedImport }; 21 | -------------------------------------------------------------------------------- /packages/cli/src/utility/ts-morph/parse-source-file.ts: -------------------------------------------------------------------------------- 1 | import { Project } from 'ts-morph'; 2 | import { nanoid } from 'nanoid'; 3 | 4 | const project = new Project({ 5 | useInMemoryFileSystem: true, 6 | skipAddingFilesFromTsConfig: true, 7 | skipFileDependencyResolution: true, 8 | skipLoadingLibFiles: true 9 | }); 10 | 11 | function parseSourceFile(code: string) { 12 | return project.createSourceFile(`${nanoid()}.ts`, code); 13 | } 14 | 15 | export { parseSourceFile }; 16 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/app.css/add-import/input: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/app.css/add-import/output: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | @import "@skeletonlabs/skeleton"; 3 | @import "@skeletonlabs/skeleton/optional/presets"; 4 | @import "@skeletonlabs/skeleton/themes/cerberus"; 5 | @source "../node_modules/@skeletonlabs/skeleton-svelte/dist"; -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/app.css/classes-in-at-apply/input: -------------------------------------------------------------------------------- 1 | .foo { 2 | @apply rounded-token; 3 | } -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/app.css/classes-in-at-apply/output: -------------------------------------------------------------------------------- 1 | @import "@skeletonlabs/skeleton"; 2 | @import "@skeletonlabs/skeleton/optional/presets"; 3 | @import "@skeletonlabs/skeleton/themes/cerberus"; 4 | @source "../node_modules/@skeletonlabs/skeleton-svelte/dist"; 5 | .foo { 6 | @apply rounded-base; 7 | } -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/app.html/custom-data-theme/input: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/app.html/custom-data-theme/output: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/app.html/skeleton-data-theme/input: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/app.html/skeleton-data-theme/output: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/module/classes-in-identifiers/input: -------------------------------------------------------------------------------- 1 | const foo = 'rounded-token'; 2 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/module/classes-in-identifiers/output: -------------------------------------------------------------------------------- 1 | const foo = 'rounded-base'; 2 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/module/keep-non-skeleton-identifiers/input: -------------------------------------------------------------------------------- 1 | import { AccordionItem } from '@skeletonlabs/not-skeleton'; 2 | 3 | AccordionItem; 4 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/module/keep-non-skeleton-identifiers/output: -------------------------------------------------------------------------------- 1 | import { AccordionItem } from '@skeletonlabs/not-skeleton'; 2 | 3 | AccordionItem; 4 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/module/keep-non-skeleton-imports/input: -------------------------------------------------------------------------------- 1 | import { AppShell } from '@skeletonlabs/not-skeleton'; 2 | 3 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/module/keep-non-skeleton-imports/output: -------------------------------------------------------------------------------- 1 | import { AppShell } from '@skeletonlabs/not-skeleton'; 2 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/module/remove-import-keep-default/input: -------------------------------------------------------------------------------- 1 | import Foo, { Apollo } from "@skeletonlabs/skeleton"; -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/module/remove-import-keep-default/output: -------------------------------------------------------------------------------- 1 | import Foo from "@skeletonlabs/skeleton-svelte"; -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/module/remove-import-keep-named-imports/input: -------------------------------------------------------------------------------- 1 | import { Foo, Apollo } from "@skeletonlabs/skeleton"; -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/module/remove-import-keep-named-imports/output: -------------------------------------------------------------------------------- 1 | import { Foo } from "@skeletonlabs/skeleton-svelte"; -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/module/remove-import/output: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/packages/cli/test/migrate/skeleton-3/samples/module/remove-import/output -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/module/rename-import/input: -------------------------------------------------------------------------------- 1 | import { Accordion, AccordionItem, AppRail, FileButton, FileDropzone, InputChip, Paginator, ProgressBar, ProgressRadial, RadioGroup, RangeSlider, SlideToggle, TabGroup } from "@skeletonlabs/skeleton"; 2 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/module/rename-import/output: -------------------------------------------------------------------------------- 1 | import { Accordion, Navigation, FileUpload, TagsInput, Pagination, Progress, ProgressRing, Segment, Slider, Switch, Tabs } from "@skeletonlabs/skeleton-svelte"; 2 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/module/special-characters/input: -------------------------------------------------------------------------------- 1 | let str1 = "\n"; 2 | let str2 = "\r"; 3 | let str3 = "\t"; 4 | let str4 = "\b"; 5 | let str5 = "\f"; 6 | let str6 = "\v"; 7 | let str7 = "\'"; 8 | let str8 = "\""; 9 | let str9 = "\\"; 10 | let str10 = "\0"; 11 | let str11 = "\ufeff"; 12 | let str12 = "\u2028"; 13 | let str13 = "\u2029"; 14 | let str14 = "Hello\nWorld\t!"; 15 | let str15 = "Path\\to\\file"; 16 | let str16 = "Quote\"s\'here"; 17 | let str17 = "\x1b[31m"; 18 | let str18 = `Template 19 | literal`; 20 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/module/special-characters/output: -------------------------------------------------------------------------------- 1 | let str1 = "\n"; 2 | let str2 = "\r"; 3 | let str3 = "\t"; 4 | let str4 = "\b"; 5 | let str5 = "\f"; 6 | let str6 = "\v"; 7 | let str7 = "\'"; 8 | let str8 = "\""; 9 | let str9 = "\\"; 10 | let str10 = "\0"; 11 | let str11 = "\ufeff"; 12 | let str12 = "\u2028"; 13 | let str13 = "\u2029"; 14 | let str14 = "Hello\nWorld\t!"; 15 | let str15 = "Path\\to\\file"; 16 | let str16 = "Quote\"s\'here"; 17 | let str17 = "\x1b[31m"; 18 | let str18 = `Template 19 | literal`; 20 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/package.json/update-skeleton-and-tw-plugin/input: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "@skeletonlabs/tw-plugin": "^1.0.0", 4 | "@skeletonlabs/skeleton": "^2.0.0" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/package.json/update-skeleton-and-tw-plugin/output: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "@skeletonlabs/skeleton": "^3.0.0", 4 | "@skeletonlabs/skeleton-svelte": "^1.0.0" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/package.json/update-skeleton/input: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "@skeletonlabs/skeleton": "^2.0.0" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/package.json/update-skeleton/output: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "@skeletonlabs/skeleton-svelte": "^1.0.0" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/package.json/update-tw-plugin/input: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "@skeletonlabs/tw-plugin": "^1.0.0" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/package.json/update-tw-plugin/output: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "@skeletonlabs/skeleton": "^3.0.0" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/stylesheet/classes-in-at-apply/input: -------------------------------------------------------------------------------- 1 | .foo { 2 | @apply rounded-token; 3 | } 4 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/stylesheet/classes-in-at-apply/output: -------------------------------------------------------------------------------- 1 | .foo { 2 | @apply rounded-base; 3 | } 4 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/svelte/classes-in-at-apply/input: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/svelte/classes-in-at-apply/output: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/svelte/classes-in-attribute/input: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/svelte/classes-in-attribute/output: -------------------------------------------------------------------------------- 1 |
2 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/svelte/classes-in-class-directive-with-identifier/input: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/svelte/classes-in-class-directive-with-identifier/output: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/svelte/classes-in-class-directive-with-literal/input: -------------------------------------------------------------------------------- 1 |
2 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/svelte/classes-in-class-directive-with-literal/output: -------------------------------------------------------------------------------- 1 |
2 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/svelte/classes-in-class-directive/input: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/svelte/classes-in-class-directive/output: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/svelte/classes-in-expression-attribute/input: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/svelte/classes-in-expression-attribute/output: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/svelte/classes-in-literal/input: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/svelte/classes-in-literal/output: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/svelte/empty-strings/input: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 |
7 |
8 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/svelte/empty-strings/output: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 |
7 |
8 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/svelte/keep-non-skeleton-components/input: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /packages/cli/test/migrate/skeleton-3/samples/svelte/keep-non-skeleton-components/output: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /packages/cli/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "lib": ["DOM", "ESNext"], 5 | "moduleDetection": "force", 6 | "module": "ESNext", 7 | "moduleResolution": "Bundler", 8 | "types": ["node"], 9 | "strict": true, 10 | "noEmit": true, 11 | "esModuleInterop": true, 12 | "isolatedModules": true, 13 | "verbatimModuleSyntax": true, 14 | "skipDefaultLibCheck": true, 15 | "skipLibCheck": true 16 | }, 17 | "include": ["src/*.ts"] 18 | } 19 | -------------------------------------------------------------------------------- /packages/necroparser/build.config.ts: -------------------------------------------------------------------------------- 1 | import { defineBuildConfig } from 'unbuild'; 2 | 3 | export default defineBuildConfig({ 4 | entries: ['./src/index.ts'], 5 | declaration: true, 6 | clean: true, 7 | rollup: { 8 | emitCJS: true 9 | } 10 | }); 11 | -------------------------------------------------------------------------------- /packages/necroparser/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@skeletonlabs/necroparser", 3 | "version": "0.0.1", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "build": "unbuild", 8 | "dev": "unbuild --watch", 9 | "test": "vitest run", 10 | "test:watch": "vitest watch" 11 | }, 12 | "exports": { 13 | ".": { 14 | "import": "./dist/index.mjs", 15 | "require": "./dist/index.cjs" 16 | } 17 | }, 18 | "main": "./dist/index.cjs", 19 | "types": "./dist/index.d.ts", 20 | "files": [ 21 | "dist" 22 | ], 23 | "devDependencies": { 24 | "tinyglobby": "^0.2.12", 25 | "unbuild": "^3.5.0", 26 | "vite": "^6.2.5", 27 | "vitest": "^3.1.1" 28 | }, 29 | "dependencies": { 30 | "typescript": "catalog:" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /packages/necroparser/test/samples.test.ts: -------------------------------------------------------------------------------- 1 | import { glob } from 'tinyglobby'; 2 | import { describe, expect, test } from 'vitest'; 3 | import { Project } from '../src/index.js'; 4 | 5 | const samples = await glob('./samples/**/input.ts', { 6 | absolute: true, 7 | cwd: import.meta.dirname 8 | }); 9 | 10 | describe('fixtures', () => { 11 | for (const path of samples) { 12 | const parts = path.split('/'); 13 | const name = parts.at(-2); 14 | if (!name) { 15 | continue; 16 | } 17 | test(name, async () => { 18 | const project = new Project([path]); 19 | const actual = project.getInterfaces(path); 20 | const expected = await import(path.replace('input.ts', 'output.json')).then((module) => module.default); 21 | expect(actual).toStrictEqual(expected); 22 | }); 23 | } 24 | }); 25 | -------------------------------------------------------------------------------- /packages/necroparser/test/samples/basic/input.ts: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 2 | interface Interface { 3 | property: string; 4 | } 5 | -------------------------------------------------------------------------------- /packages/necroparser/test/samples/basic/output.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "Interface", 4 | "properties": [ 5 | { 6 | "documentation": { 7 | "tags": [], 8 | "text": null 9 | }, 10 | "name": "property", 11 | "required": true, 12 | "type": "string", 13 | "typeKind": "primitive" 14 | } 15 | ] 16 | } 17 | ] 18 | -------------------------------------------------------------------------------- /packages/necroparser/test/samples/extends-external/external.ts: -------------------------------------------------------------------------------- 1 | interface External { 2 | propertyOne: string; 3 | } 4 | 5 | export type { External }; 6 | -------------------------------------------------------------------------------- /packages/necroparser/test/samples/extends-external/input.ts: -------------------------------------------------------------------------------- 1 | import { External } from './external.js'; 2 | 3 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 4 | interface Interface extends External { 5 | propertyTwo: string; 6 | } 7 | -------------------------------------------------------------------------------- /packages/necroparser/test/samples/extends-external/output.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "Interface", 4 | "properties": [ 5 | { 6 | "documentation": { 7 | "tags": [], 8 | "text": null 9 | }, 10 | "name": "propertyTwo", 11 | "required": true, 12 | "type": "string", 13 | "typeKind": "primitive" 14 | }, 15 | { 16 | "documentation": { 17 | "tags": [], 18 | "text": null 19 | }, 20 | "name": "propertyOne", 21 | "required": true, 22 | "type": "string", 23 | "typeKind": "primitive" 24 | } 25 | ] 26 | } 27 | ] 28 | -------------------------------------------------------------------------------- /packages/necroparser/test/samples/extends-internal/input.ts: -------------------------------------------------------------------------------- 1 | interface InterfaceOne { 2 | propertyOne: string; 3 | } 4 | 5 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 6 | interface InterfaceTwo extends InterfaceOne { 7 | propertyTwo: string; 8 | } 9 | -------------------------------------------------------------------------------- /packages/necroparser/test/samples/jsdoc/input.ts: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 2 | interface Interface { 3 | /** 4 | * Property 5 | * @default 'foo' 6 | * @readonly 7 | */ 8 | readonly property: string; 9 | } 10 | -------------------------------------------------------------------------------- /packages/necroparser/test/samples/jsdoc/output.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "Interface", 4 | "properties": [ 5 | { 6 | "documentation": { 7 | "tags": [ 8 | { 9 | "name": "default", 10 | "value": "'foo'" 11 | }, 12 | { 13 | "name": "readonly", 14 | "value": null 15 | } 16 | ], 17 | "text": "Property" 18 | }, 19 | "name": "property", 20 | "required": true, 21 | "type": "string", 22 | "typeKind": "primitive" 23 | } 24 | ] 25 | } 26 | ] 27 | -------------------------------------------------------------------------------- /packages/necroparser/test/samples/multiple/input.ts: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 2 | interface InterfaceOne { 3 | property: string; 4 | } 5 | 6 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 7 | interface InterfaceTwo { 8 | property: string; 9 | } 10 | -------------------------------------------------------------------------------- /packages/necroparser/test/samples/multiple/output.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "InterfaceOne", 4 | "properties": [ 5 | { 6 | "documentation": { 7 | "tags": [], 8 | "text": null 9 | }, 10 | "name": "property", 11 | "required": true, 12 | "type": "string", 13 | "typeKind": "primitive" 14 | } 15 | ] 16 | }, 17 | { 18 | "name": "InterfaceTwo", 19 | "properties": [ 20 | { 21 | "documentation": { 22 | "tags": [], 23 | "text": null 24 | }, 25 | "name": "property", 26 | "required": true, 27 | "type": "string", 28 | "typeKind": "primitive" 29 | } 30 | ] 31 | } 32 | ] 33 | -------------------------------------------------------------------------------- /packages/necroparser/test/samples/optional/input.ts: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 2 | interface Interface { 3 | property?: string; 4 | } 5 | -------------------------------------------------------------------------------- /packages/necroparser/test/samples/optional/output.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "Interface", 4 | "properties": [ 5 | { 6 | "documentation": { 7 | "tags": [], 8 | "text": null 9 | }, 10 | "name": "property", 11 | "required": false, 12 | "type": "string", 13 | "typeKind": "primitive" 14 | } 15 | ] 16 | } 17 | ] 18 | -------------------------------------------------------------------------------- /packages/necroparser/test/samples/type-kind/input.ts: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 2 | interface Interface { 3 | primitive: string; 4 | array: string[]; 5 | object: { 6 | [key: string]: unknown; 7 | }; 8 | function: () => void; 9 | } 10 | -------------------------------------------------------------------------------- /packages/necroparser/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "lib": ["ESNext"], 5 | "moduleDetection": "force", 6 | "module": "ESNext", 7 | "moduleResolution": "Bundler", 8 | "types": ["node"], 9 | "strict": true, 10 | "noEmit": true, 11 | "esModuleInterop": true, 12 | "isolatedModules": true, 13 | "skipDefaultLibCheck": true, 14 | "skipLibCheck": true 15 | }, 16 | "include": ["src/*.ts"] 17 | } 18 | -------------------------------------------------------------------------------- /packages/skeleton-common/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@skeletonlabs/skeleton-common", 3 | "version": "0.0.1", 4 | "private": true, 5 | "types": "./src/index.ts", 6 | "exports": { 7 | ".": "./src/index.ts" 8 | }, 9 | "devDependencies": { 10 | "@skeletonlabs/skeleton": "workspace:*", 11 | "typescript": "catalog:" 12 | }, 13 | "type": "module" 14 | } 15 | -------------------------------------------------------------------------------- /packages/skeleton-common/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "lib": ["ESNext"], 5 | "moduleDetection": "force", 6 | "module": "ESNext", 7 | "moduleResolution": "Bundler", 8 | "types": ["node"], 9 | "strict": true, 10 | "noEmit": true, 11 | "esModuleInterop": true, 12 | "isolatedModules": true, 13 | "skipDefaultLibCheck": true, 14 | "skipLibCheck": true 15 | }, 16 | "include": ["src/*.ts"] 17 | } 18 | -------------------------------------------------------------------------------- /packages/skeleton-react/README.md: -------------------------------------------------------------------------------- 1 | # Skeleton-React 2 | 3 | Provides all React features for [Skeleton](https://skeleton.dev/). 4 | 5 | ## Project 6 | 7 | This project has been created using a [Vite/React](https://vitejs.dev/). 8 | 9 | ## Exports 10 | 11 | Library exports are contained within `/src/lib/migrate.ts` 12 | 13 | ## Routing 14 | 15 | Routing is provided by [vite-remix-router](https://vite-remix-router.vercel.app/) and Remix's [React Router](https://reactrouter.com/en/main). 16 | 17 | ## Dev 18 | 19 | To run locally, follow the following instructions: 20 | 21 | ``` 22 | pnpm i 23 | pnpm dev 24 | ``` 25 | 26 | Then point your browser at http://localhost:5173/ 27 | -------------------------------------------------------------------------------- /packages/skeleton-react/src/components/Accordion/context.ts: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react'; 2 | import type { AccordionContextState } from './types.js'; 3 | import type * as accordion from '@zag-js/accordion'; 4 | 5 | export const AccordionContext = createContext({ 6 | iconOpen: '-', 7 | iconClosed: '+', 8 | api: {} as ReturnType 9 | }); 10 | export const AccordionItemContext = createContext({ 11 | value: '', 12 | disabled: false 13 | }); 14 | -------------------------------------------------------------------------------- /packages/skeleton-react/src/components/Navigation/context.ts: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react'; 2 | import type { NavContextState } from './types.js'; 3 | 4 | export const NavContext = createContext({ 5 | parent: 'none', 6 | value: '', 7 | expanded: false, 8 | onValueChange: () => {} 9 | }); 10 | -------------------------------------------------------------------------------- /packages/skeleton-react/src/components/Segment/context.ts: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react'; 2 | import type { SegmentContextState } from './types.js'; 3 | import type * as radioGroup from '@zag-js/radio-group'; 4 | 5 | export const SegmentContext = createContext({ 6 | api: {} as ReturnType, 7 | indicatorText: '' 8 | }); 9 | -------------------------------------------------------------------------------- /packages/skeleton-react/src/components/Tabs/context.ts: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react'; 2 | import type { TabsContextState } from './types.js'; 3 | import type * as tabs from '@zag-js/tabs'; 4 | 5 | export const TabsContext = createContext({ 6 | fluid: false, 7 | api: {} as ReturnType 8 | }); 9 | -------------------------------------------------------------------------------- /packages/skeleton-react/src/components/Toast/create-toaster.ts: -------------------------------------------------------------------------------- 1 | import * as toast from '@zag-js/toast'; 2 | 3 | export function createToaster(options: toast.StoreProps = {}) { 4 | return toast.createStore(options); 5 | } 6 | -------------------------------------------------------------------------------- /packages/skeleton-react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "esModuleInterop": true, 4 | "skipLibCheck": true, 5 | "target": "es2022", 6 | "allowJs": true, 7 | "resolveJsonModule": true, 8 | "moduleDetection": "force", 9 | "isolatedModules": true, 10 | "verbatimModuleSyntax": true, 11 | "strict": true, 12 | "noUncheckedIndexedAccess": true, 13 | "noImplicitOverride": true, 14 | "module": "NodeNext", 15 | "outDir": "dist", 16 | "sourceMap": true, 17 | "declaration": true, 18 | "declarationMap": true, 19 | "lib": ["es2022", "dom", "dom.iterable"], 20 | "jsx": "react-jsx", 21 | "types": ["@testing-library/jest-dom"] 22 | }, 23 | "include": ["src/**/*.tsx", "src/**/*.ts"] 24 | } 25 | -------------------------------------------------------------------------------- /packages/skeleton-react/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import react from '@vitejs/plugin-react'; 3 | 4 | export default defineConfig({ 5 | plugins: [react()], 6 | test: { 7 | environment: 'jsdom', 8 | globals: true, 9 | setupFiles: './vitest.setup.js', 10 | include: ['./src/**/*.test.{ts,tsx}'] 11 | } 12 | }); 13 | -------------------------------------------------------------------------------- /packages/skeleton-react/vitest.setup.js: -------------------------------------------------------------------------------- 1 | import { afterEach } from 'vitest'; 2 | import { cleanup } from '@testing-library/react'; 3 | import '@testing-library/jest-dom/vitest'; 4 | import '@testing-library/user-event'; 5 | 6 | afterEach(() => { 7 | cleanup(); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/skeleton-svelte/.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /packages/skeleton-svelte/README.md: -------------------------------------------------------------------------------- 1 | # Skeleton-Svelte 2 | 3 | Provides all Svelte features for [Skeleton](https://skeleton.dev/). 4 | 5 | ## Project 6 | 7 | This project has been created using a [SvelteKit](https://kit.svelte.dev/) project library. 8 | 9 | ## Exports 10 | 11 | Library exports are contained within `/src/lib/migrate.ts` 12 | 13 | ## Dev 14 | 15 | To run locally, follow the following instructions: 16 | 17 | ``` 18 | pnpm i 19 | pnpm dev 20 | ``` 21 | 22 | Then point your browser at http://localhost:5173/ 23 | -------------------------------------------------------------------------------- /packages/skeleton-svelte/src/components/Accordion/Accordion.test.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | 11 | 12 | 13 | {#snippet lead()}FooLead{/snippet} 14 | {#snippet control()}FooControl{/snippet} 15 | {#snippet panel()}FooPanel{/snippet} 16 | 17 | 18 | {#snippet lead()}BarLead{/snippet} 19 | {#snippet control()}BarControl{/snippet} 20 | {#snippet panel()}BarPanel{/snippet} 21 | 22 | 23 | -------------------------------------------------------------------------------- /packages/skeleton-svelte/src/components/Accordion/context.ts: -------------------------------------------------------------------------------- 1 | import { createContext } from '../../internal/create-context.js'; 2 | import type { AccordionContext } from './types.js'; 3 | 4 | // @ts-expect-error - Defaults for context don't make sense, `createContext` should just throw TBH 5 | export const [setAccordionContext, getAccordionContext, key] = createContext(); 6 | -------------------------------------------------------------------------------- /packages/skeleton-svelte/src/components/Accordion/index.ts: -------------------------------------------------------------------------------- 1 | import Accordion from './Accordion.svelte'; 2 | import Item from './AccordionItem.svelte'; 3 | 4 | export default /* @__PURE__ */ Object.assign(Accordion, { Item }); 5 | -------------------------------------------------------------------------------- /packages/skeleton-svelte/src/components/Combobox/Combobox.test.ts: -------------------------------------------------------------------------------- 1 | import { describe, expect, it } from 'vitest'; 2 | import { render, screen } from '@testing-library/svelte'; 3 | 4 | import { Combobox } from '../../index.js'; 5 | 6 | describe('Combobox', () => { 7 | const testIds = { 8 | root: 'combobox' 9 | }; 10 | 11 | // NOTE: bare minimum test as this feature is considered temporary 12 | 13 | it('Renders the component', () => { 14 | render(Combobox, {}); 15 | const component = screen.getByTestId(testIds.root); 16 | expect(component).toBeInTheDocument(); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /packages/skeleton-svelte/src/components/Modal/Modal.test.ts: -------------------------------------------------------------------------------- 1 | import { describe, expect, it } from 'vitest'; 2 | import { render, screen } from '@testing-library/svelte'; 3 | 4 | import { Modal } from '../../index.js'; 5 | 6 | describe('Modal', () => { 7 | const testIds = { 8 | root: 'modal' 9 | }; 10 | 11 | // NOTE: bare minimum test as this feature is considered temporary 12 | 13 | it('Renders the component', () => { 14 | render(Modal, {}); 15 | const component = screen.getByTestId(testIds.root); 16 | expect(component).toBeInTheDocument(); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /packages/skeleton-svelte/src/components/Navigation/NavBar.test.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | 11 | 12 | TileOne 13 | TileTwo 14 | 15 | -------------------------------------------------------------------------------- /packages/skeleton-svelte/src/components/Navigation/context.ts: -------------------------------------------------------------------------------- 1 | import { createContext } from '../../internal/create-context.js'; 2 | import type { NavContext } from './types.js'; 3 | 4 | export const [setNavigationContext, getNavigationContext, key] = createContext({ 5 | parent: 'none', 6 | value: '', 7 | expanded: false 8 | }); 9 | -------------------------------------------------------------------------------- /packages/skeleton-svelte/src/components/Navigation/index.ts: -------------------------------------------------------------------------------- 1 | import Bar from './NavBar.svelte'; 2 | import Rail from './NavRail.svelte'; 3 | import Tile from './NavTile.svelte'; 4 | 5 | export default /* @__PURE__ */ Object.assign(Rail, { Rail, Bar, Tile }); 6 | -------------------------------------------------------------------------------- /packages/skeleton-svelte/src/components/Popover/Popover.test.ts: -------------------------------------------------------------------------------- 1 | import { describe, expect, it } from 'vitest'; 2 | import { render, screen } from '@testing-library/svelte'; 3 | 4 | import { Popover } from '../../index.js'; 5 | 6 | describe('Popover', () => { 7 | const testIds = { 8 | root: 'popover' 9 | }; 10 | 11 | // NOTE: bare minimum test as this feature is considered temporary 12 | 13 | it('Renders the component', () => { 14 | render(Popover, {}); 15 | const component = screen.getByTestId(testIds.root); 16 | expect(component).toBeInTheDocument(); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /packages/skeleton-svelte/src/components/Rating/index.ts: -------------------------------------------------------------------------------- 1 | import Rating from './Rating.svelte'; 2 | 3 | export default Rating; 4 | -------------------------------------------------------------------------------- /packages/skeleton-svelte/src/components/Segment/Segment.test.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | left 11 | center 12 | right 13 | justify 14 | 15 | -------------------------------------------------------------------------------- /packages/skeleton-svelte/src/components/Segment/context.ts: -------------------------------------------------------------------------------- 1 | import * as radio from '@zag-js/radio-group'; 2 | import { createContext } from '../../internal/create-context.js'; 3 | import type { SegmentContext } from './types.js'; 4 | 5 | export const [setSegmentContext, getSegmentContext, key] = createContext({ 6 | api: {} as ReturnType, 7 | indicatorText: '' 8 | }); 9 | -------------------------------------------------------------------------------- /packages/skeleton-svelte/src/components/Segment/index.ts: -------------------------------------------------------------------------------- 1 | import Segment from './Segment.svelte'; 2 | import Item from './SegmentItem.svelte'; 3 | 4 | export default /* @__PURE__ */ Object.assign(Segment, { Item }); 5 | -------------------------------------------------------------------------------- /packages/skeleton-svelte/src/components/Tabs/TabsPanel.svelte: -------------------------------------------------------------------------------- 1 | 18 | 19 | 20 | 21 |
22 | {@render children?.()} 23 |
24 | -------------------------------------------------------------------------------- /packages/skeleton-svelte/src/components/Tabs/context.ts: -------------------------------------------------------------------------------- 1 | import * as tabs from '@zag-js/tabs'; 2 | import { createContext } from '../../internal/create-context.js'; 3 | import type { TabsContextState } from './types.js'; 4 | 5 | export const [setTabContext, getTabContext, key] = createContext({ 6 | fluid: false, 7 | api: {} as ReturnType 8 | }); 9 | -------------------------------------------------------------------------------- /packages/skeleton-svelte/src/components/Tabs/index.ts: -------------------------------------------------------------------------------- 1 | import Tabs from './Tabs.svelte'; 2 | import Control from './TabsControl.svelte'; 3 | import Panel from './TabsPanel.svelte'; 4 | 5 | export default /* @__PURE__ */ Object.assign(Tabs, { Control, Panel }); 6 | -------------------------------------------------------------------------------- /packages/skeleton-svelte/src/components/Toast/create-toaster.ts: -------------------------------------------------------------------------------- 1 | import * as toast from '@zag-js/toast'; 2 | 3 | export function createToaster(options: toast.StoreProps = {}) { 4 | return toast.createStore(options); 5 | } 6 | -------------------------------------------------------------------------------- /packages/skeleton-svelte/src/components/Tooltip/Tooltip.test.ts: -------------------------------------------------------------------------------- 1 | import { describe, expect, it } from 'vitest'; 2 | import { render, screen } from '@testing-library/svelte'; 3 | 4 | import { Tooltip } from '../../index.js'; 5 | 6 | describe('Tooltip', () => { 7 | const testIds = { 8 | root: 'tooltip' 9 | }; 10 | 11 | // NOTE: bare minimum test as this feature is considered temporary 12 | 13 | it('Renders the component', () => { 14 | render(Tooltip, {}); 15 | const component = screen.getByTestId(testIds.root); 16 | expect(component).toBeInTheDocument(); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /packages/skeleton-svelte/src/internal/create-context.ts: -------------------------------------------------------------------------------- 1 | import { getContext, setContext } from 'svelte'; 2 | 3 | /** 4 | * Create a context with a default value 5 | * @param defaultValue The default value that will be returned if the context is not set 6 | * @returns [set, get, key] The setter, getter and key for the context, the getter returns the default value if the context is not set 7 | */ 8 | export function createContext(defaultValue: T) { 9 | const key: symbol = Symbol(); 10 | const set = (value: T) => setContext(key, value); 11 | const get = () => getContext(key) ?? defaultValue; 12 | return [set, get, key] as const; 13 | } 14 | -------------------------------------------------------------------------------- /packages/skeleton-svelte/src/internal/test-utils.ts: -------------------------------------------------------------------------------- 1 | import { createRawSnippet } from 'svelte'; 2 | import type { Snippet } from 'svelte'; 3 | 4 | /** Use `mockSnippet(value)` to create `{value}` snippet content. */ 5 | export function mockSnippet(key: string): Snippet<[]> { 6 | return createRawSnippet(() => { 7 | return { 8 | render: () => `${key}` 9 | }; 10 | }); 11 | } 12 | -------------------------------------------------------------------------------- /packages/skeleton-svelte/svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from '@sveltejs/adapter-auto'; 2 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; 3 | 4 | /** @type {import('@sveltejs/kit').Config} */ 5 | const config = { 6 | preprocess: [vitePreprocess()], 7 | kit: { 8 | adapter: adapter() 9 | } 10 | }; 11 | export default config; 12 | -------------------------------------------------------------------------------- /packages/skeleton-svelte/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "checkJs": true, 5 | "esModuleInterop": true, 6 | "forceConsistentCasingInFileNames": true, 7 | "verbatimModuleSyntax": true, 8 | "lib": ["esnext", "DOM", "DOM.Iterable"], 9 | "resolveJsonModule": true, 10 | "skipLibCheck": true, 11 | "sourceMap": true, 12 | "strict": true, 13 | "module": "NodeNext", 14 | "moduleResolution": "NodeNext", 15 | "types": ["vitest/globals", "@testing-library/jest-dom"] 16 | }, 17 | "include": ["src/**/*.ts", "src/**/*.svelte"] 18 | } 19 | -------------------------------------------------------------------------------- /packages/skeleton-svelte/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vitest/config'; 2 | import { svelte } from '@sveltejs/vite-plugin-svelte'; 3 | import { svelteTesting } from '@testing-library/svelte/vite'; 4 | import tailwindcss from '@tailwindcss/vite'; 5 | 6 | export default defineConfig({ 7 | plugins: [tailwindcss(), svelte(), svelteTesting()], 8 | test: { 9 | environment: 'jsdom', 10 | setupFiles: ['./vitest.setup.js'], 11 | exclude: ['node_modules/**', '.svelte-kit/**', 'dist/**'] 12 | } 13 | }); 14 | -------------------------------------------------------------------------------- /packages/skeleton-svelte/vitest.setup.js: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/vitest'; 2 | import { vitest } from 'vitest'; 3 | 4 | // NOTE: Used for the component 5 | // https://stackoverflow.com/questions/64558062/how-to-mock-resizeobserver-to-work-in-unit-tests-using-react-testing-library 6 | /* eslint-disable no-undef */ 7 | global.ResizeObserver = vitest.fn().mockImplementation(() => ({ 8 | observe: vitest.fn(), 9 | unobserve: vitest.fn(), 10 | disconnect: vitest.fn() 11 | })); 12 | -------------------------------------------------------------------------------- /packages/skeleton/src/base/index.css: -------------------------------------------------------------------------------- 1 | /* Note that the order of import matters. */ 2 | /* Do not change this unless prompted to. */ 3 | 4 | @import './globals.css'; 5 | @import './theme.scss'; 6 | -------------------------------------------------------------------------------- /packages/skeleton/src/index.css: -------------------------------------------------------------------------------- 1 | /* Note that the order of import matters. */ 2 | /* Do not change this unless prompted to. */ 3 | 4 | @import './base/index.css'; 5 | @import './utilities/index.css'; 6 | @import './variants/index.css'; 7 | @import './keyframes/index.css'; 8 | -------------------------------------------------------------------------------- /packages/skeleton/src/keyframes/index.css: -------------------------------------------------------------------------------- 1 | @import './progress-indeterminate.css'; 2 | @import './ring-indeterminate.css'; 3 | -------------------------------------------------------------------------------- /packages/skeleton/src/keyframes/progress-indeterminate.css: -------------------------------------------------------------------------------- 1 | /* Components: Keyframe - Progress Indeterminate */ 2 | /* NOTE: only for use in the progress bar functional component. */ 3 | 4 | @keyframes anim-progress-indeterminate { 5 | from { 6 | transform: translateX(-200%); 7 | } 8 | to { 9 | transform: translateX(200%); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/skeleton/src/keyframes/ring-indeterminate.css: -------------------------------------------------------------------------------- 1 | /* Components: Keyframe - Ring Indeterminate */ 2 | /* NOTE: only for use in the progress ring functional component. */ 3 | 4 | @keyframes anim-ring-indeterminate { 5 | from { 6 | stroke-dasharray: 1, 400; 7 | stroke-dashoffset: 0; 8 | } 9 | to { 10 | stroke-dasharray: 400, 400; 11 | stroke-dashoffset: -140; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/skeleton/src/utilities/dividers.css: -------------------------------------------------------------------------------- 1 | /* Components: Dividers */ 2 | 3 | /* Horizontal Rule */ 4 | @utility hr { 5 | border-color: var(--color-surface-200-800); 6 | border-top-width: 1px; 7 | display: block; 8 | width: 100%; 9 | } 10 | 11 | /* Vertical Rule */ 12 | @utility vr { 13 | border-color: var(--color-surface-200-800); 14 | border-left-width: 1px; 15 | display: inline-block; 16 | height: 100%; 17 | } 18 | -------------------------------------------------------------------------------- /packages/skeleton/src/utilities/form-core.css: -------------------------------------------------------------------------------- 1 | /* Components: Forms (Core) */ 2 | 3 | @utility fieldset { 4 | display: block; 5 | width: 100%; 6 | } 7 | 8 | @utility legend { 9 | display: block; 10 | width: 100%; 11 | } 12 | 13 | @utility label { 14 | display: block; 15 | width: 100%; 16 | & > * + * { 17 | margin-top: --spacing(1); 18 | } 19 | } 20 | 21 | @utility label-text { 22 | display: block; 23 | font-size: var(--text-xs); 24 | line-height: var(--text-xs--line-height); 25 | font-weight: var(--font-weight-medium); 26 | text-decoration-line: none; 27 | } 28 | -------------------------------------------------------------------------------- /packages/skeleton/src/utilities/index.css: -------------------------------------------------------------------------------- 1 | @import './core.scss'; 2 | 3 | @import './badges.css'; 4 | @import './buttons.css'; 5 | @import './cards.css'; 6 | @import './chips.css'; 7 | @import './dividers.css'; 8 | @import './placeholders.css'; 9 | @import './tables.css'; 10 | @import './typography.css'; 11 | 12 | /* Forms */ 13 | @import './form-core.css'; 14 | @import './form-groups.css'; 15 | @import './form-inputs.css'; 16 | @import './form-progress.css'; 17 | @import './form-radios-checks.css'; 18 | @import './form-selects.css'; 19 | @import './form-textareas.css'; 20 | -------------------------------------------------------------------------------- /packages/skeleton/src/utilities/placeholders.css: -------------------------------------------------------------------------------- 1 | /* Components: Placeholders */ 2 | 3 | @utility placeholder { 4 | background-color: var(--color-surface-200-800); 5 | border-radius: var(--radius-base); 6 | min-height: --spacing(4); 7 | } 8 | 9 | @utility placeholder-circle { 10 | aspect-ratio: 1 / 1; 11 | background-color: var(--color-surface-200-800); 12 | border-radius: 100%; 13 | min-height: --spacing(5); 14 | } 15 | -------------------------------------------------------------------------------- /packages/skeleton/src/variants/index.css: -------------------------------------------------------------------------------- 1 | @import './themes.scss'; 2 | -------------------------------------------------------------------------------- /packages/skeleton/src/variants/themes.scss: -------------------------------------------------------------------------------- 1 | @use '../constants.scss'; 2 | 3 | @each $theme in constants.$themes { 4 | @custom-variant theme-#{$theme} (&:where([data-theme="#{$theme}"] *)); 5 | } 6 | -------------------------------------------------------------------------------- /packages/skeleton/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import { basename, dirname, join } from 'node:path'; 3 | import { glob } from 'tinyglobby'; 4 | 5 | export default defineConfig({ 6 | build: { 7 | cssCodeSplit: true, 8 | cssMinify: false, 9 | emptyOutDir: false, 10 | lib: { 11 | entry: { 12 | ['index']: 'src/index.css', 13 | ...Object.fromEntries( 14 | (await glob('./src/{themes,optional}/*.{css,scss}')).map((path) => { 15 | const directory = basename(dirname(path)); 16 | const filename = basename(path); 17 | return [join(directory, filename), path]; 18 | }) 19 | ) 20 | } 21 | } 22 | } 23 | }); 24 | -------------------------------------------------------------------------------- /playgrounds/skeleton-core/.gitignore: -------------------------------------------------------------------------------- 1 | # build output 2 | dist/ 3 | 4 | # generated types 5 | .astro/ 6 | 7 | # dependencies 8 | node_modules/ 9 | 10 | # logs 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # environment variables 17 | .env 18 | .env.production 19 | 20 | # macOS-specific files 21 | .DS_Store 22 | 23 | # jetbrains setting folder 24 | .idea/ 25 | -------------------------------------------------------------------------------- /playgrounds/skeleton-core/astro.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { defineConfig } from 'astro/config'; 3 | 4 | import tailwindcss from '@tailwindcss/vite'; 5 | 6 | // https://astro.build/config 7 | export default defineConfig({ 8 | vite: { 9 | plugins: [tailwindcss()] 10 | } 11 | }); 12 | -------------------------------------------------------------------------------- /playgrounds/skeleton-core/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@skeletonlabs/playground-skeleton-core", 3 | "version": "0.0.1", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "build": "astro build", 8 | "dev": "astro dev" 9 | }, 10 | "dependencies": { 11 | "@skeletonlabs/skeleton": "workspace:*", 12 | "@tailwindcss/forms": "^0.5.10", 13 | "@tailwindcss/vite": "^4.0.17", 14 | "astro": "^5.5.5", 15 | "tailwindcss": "catalog:" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /playgrounds/skeleton-core/src/pages/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | // import Welcome from '@components/Welcome.astro'; 3 | import Layout from '@layouts/Layout.astro'; 4 | --- 5 | 6 | 7 |
8 |
9 |

Hello Maintainers!

10 |

11 | This is a playground for @skeletonlabs/skeleton. Select a feature from the 12 | navigation list on the left to preview. 13 |

14 |
15 |
16 | 17 | -------------------------------------------------------------------------------- /playgrounds/skeleton-core/src/styles/global.css: -------------------------------------------------------------------------------- 1 | @import 'tailwindcss'; 2 | @import '@skeletonlabs/skeleton'; 3 | @import '@skeletonlabs/skeleton/themes/cerberus'; 4 | @import '@skeletonlabs/skeleton/optional/presets'; 5 | 6 | @plugin "@tailwindcss/forms"; 7 | 8 | @custom-variant dark (&:where(.dark, .dark *)); 9 | -------------------------------------------------------------------------------- /playgrounds/skeleton-core/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "astro/tsconfigs/strict", 3 | "include": [".astro/types.d.ts", "**/*"], 4 | "exclude": ["dist"], 5 | "compilerOptions": { 6 | "baseUrl": ".", 7 | "paths": { 8 | "@layouts/*": ["src/layouts/*"], 9 | "@components/*": ["src/components/*"] 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /playgrounds/skeleton-react/next.config.ts: -------------------------------------------------------------------------------- 1 | import type { NextConfig } from 'next'; 2 | 3 | const nextConfig: NextConfig = { 4 | /* config options here */ 5 | }; 6 | 7 | export default nextConfig; 8 | -------------------------------------------------------------------------------- /playgrounds/skeleton-react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@skeletonlabs/playground-skeleton-react", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev --turbopack", 7 | "build": "next build" 8 | }, 9 | "dependencies": { 10 | "@skeletonlabs/skeleton": "workspace:*", 11 | "@skeletonlabs/skeleton-react": "workspace:*", 12 | "@tailwindcss/forms": "^0.5.10", 13 | "@tailwindcss/postcss": "^4.0.17", 14 | "lucide-react": "^0.485.0", 15 | "next": "15.2.4", 16 | "postcss": "^8.5.3", 17 | "react": "^19.1.0", 18 | "react-dom": "^19.1.0" 19 | }, 20 | "devDependencies": { 21 | "@types/node": "^22.13.14", 22 | "@types/react": "^19.0.12", 23 | "@types/react-dom": "^19.0.4", 24 | "tailwindcss": "catalog:", 25 | "typescript": "catalog:" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /playgrounds/skeleton-react/postcss.config.mjs: -------------------------------------------------------------------------------- 1 | const config = { 2 | plugins: { 3 | '@tailwindcss/postcss': {} 4 | } 5 | }; 6 | 7 | export default config; 8 | -------------------------------------------------------------------------------- /playgrounds/skeleton-react/public/file.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playgrounds/skeleton-react/public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playgrounds/skeleton-react/public/window.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playgrounds/skeleton-react/src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/playgrounds/skeleton-react/src/app/favicon.ico -------------------------------------------------------------------------------- /playgrounds/skeleton-react/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @import 'tailwindcss'; 2 | @import '@skeletonlabs/skeleton'; 3 | @import '@skeletonlabs/skeleton/themes/cerberus'; 4 | @import '@skeletonlabs/skeleton/optional/presets'; 5 | 6 | @source '../../node_modules/@skeletonlabs/skeleton-react/dist'; 7 | 8 | @plugin '@tailwindcss/forms'; 9 | 10 | @custom-variant dark (&:where([data-mode="dark"], [data-mode="dark"] *)); 11 | 12 | html, 13 | body { 14 | @apply h-full overflow-hidden; 15 | } 16 | -------------------------------------------------------------------------------- /playgrounds/skeleton-react/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | export default function Page() { 2 | return ( 3 |
4 |
5 |

6 | This is a sandbox for @skeletonlabs/skeleton-react. Select a feature from the list to preview. 7 |

8 |
9 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /playgrounds/skeleton-react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2017", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./src/*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/app/components/progress-ring"], 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /playgrounds/skeleton-svelte/.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /playgrounds/skeleton-svelte/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@skeletonlabs/playground-skeleton-svelte", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "dev": "vite dev", 7 | "build": "vite build" 8 | }, 9 | "devDependencies": { 10 | "@lucide/svelte": "^0.485.0", 11 | "@skeletonlabs/skeleton": "workspace:*", 12 | "@skeletonlabs/skeleton-svelte": "workspace:*", 13 | "@sveltejs/adapter-auto": "^5.0.0", 14 | "@sveltejs/kit": "^2.20.2", 15 | "@sveltejs/vite-plugin-svelte": "^5.0.3", 16 | "@tailwindcss/forms": "^0.5.10", 17 | "@tailwindcss/vite": "^4.0.17", 18 | "svelte": "catalog:", 19 | "svelte-check": "^4.1.5", 20 | "tailwindcss": "catalog:", 21 | "typescript": "catalog:", 22 | "vite": "^6.2.5" 23 | }, 24 | "type": "module" 25 | } 26 | -------------------------------------------------------------------------------- /playgrounds/skeleton-svelte/src/app.css: -------------------------------------------------------------------------------- 1 | @import 'tailwindcss'; 2 | @import '@skeletonlabs/skeleton'; 3 | @import '@skeletonlabs/skeleton/themes/cerberus'; 4 | @import '@skeletonlabs/skeleton/optional/presets'; 5 | 6 | @source '../node_modules/@skeletonlabs/skeleton-svelte/dist'; 7 | 8 | @plugin "@tailwindcss/forms"; 9 | 10 | @custom-variant dark (&:where([data-mode="dark"], [data-mode="dark"] *)); 11 | 12 | html, 13 | body { 14 | @apply h-full overflow-hidden; 15 | } 16 | -------------------------------------------------------------------------------- /playgrounds/skeleton-svelte/src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://kit.svelte.dev/docs/types#app 2 | // for information about these interfaces 3 | declare global { 4 | namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | // interface PageData {} 8 | // interface PageState {} 9 | // interface Platform {} 10 | } 11 | } 12 | 13 | export {}; 14 | -------------------------------------------------------------------------------- /playgrounds/skeleton-svelte/src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | skeleton-svelte 6 | 7 | 8 | %sveltekit.head% 9 | 10 | 11 | 12 |
%sveltekit.body%
13 | 14 | 15 | -------------------------------------------------------------------------------- /playgrounds/skeleton-svelte/src/routes/+page.svelte: -------------------------------------------------------------------------------- 1 |
2 |
3 |

4 | This is a sandbox for @skeletonlabs/skeleton-svelte. Select a feature from the list to preview. 5 |

6 |
7 |
8 | -------------------------------------------------------------------------------- /playgrounds/skeleton-svelte/static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/playgrounds/skeleton-svelte/static/favicon.png -------------------------------------------------------------------------------- /playgrounds/skeleton-svelte/svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from '@sveltejs/adapter-auto'; 2 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; 3 | 4 | /** @type {import('@sveltejs/kit').Config} */ 5 | const config = { 6 | preprocess: [vitePreprocess()], 7 | kit: { 8 | adapter: adapter() 9 | } 10 | }; 11 | export default config; 12 | -------------------------------------------------------------------------------- /playgrounds/skeleton-svelte/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true, 12 | "module": "NodeNext", 13 | "moduleResolution": "NodeNext" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /playgrounds/skeleton-svelte/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import { sveltekit } from '@sveltejs/kit/vite'; 3 | import tailwindcss from '@tailwindcss/vite'; 4 | 5 | export default defineConfig({ 6 | plugins: [tailwindcss(), sveltekit()] 7 | }); 8 | -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @see https://prettier.io/docs/options 3 | * @type {import('prettier').Config} 4 | */ 5 | export default { 6 | plugins: ['prettier-plugin-astro', 'prettier-plugin-svelte'], 7 | overrides: [ 8 | { 9 | files: '*.astro', 10 | options: { 11 | parser: 'astro' 12 | } 13 | }, 14 | { 15 | files: '*.svelte', 16 | options: { 17 | parser: 'svelte' 18 | } 19 | } 20 | ], 21 | printWidth: 140, 22 | singleQuote: true, 23 | useTabs: true, 24 | trailingComma: 'none' 25 | }; 26 | -------------------------------------------------------------------------------- /sites/skeleton.dev/.prettierignore: -------------------------------------------------------------------------------- 1 | **/**/*.mdx 2 | -------------------------------------------------------------------------------- /sites/skeleton.dev/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/public/favicon.png -------------------------------------------------------------------------------- /sites/skeleton.dev/src/components/docs/Breadcrumbs.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const breadcrumbs = Astro.url.pathname.split('/').filter((crumb) => Boolean(crumb) && crumb !== 'docs'); 3 | --- 4 | 5 |
    6 | { 7 | breadcrumbs.map((crumb, i) => ( 8 | <> 9 |
  1. 10 | {i > 0 && i !== breadcrumbs.length - 1 && breadcrumbs[0] !== 'components' ? ( 11 | 12 | {crumb.replace('-', ' ')} 13 | 14 | ) : ( 15 | crumb.replace('-', ' ') 16 | )} 17 |
    2. 18 | {i !== breadcrumbs.length - 1 &&
  2. ›
    3. } 19 | 20 | )) 21 | } 22 |
23 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/components/docs/HideHeader.astro: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/components/docs/Process.astro: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/components/docs/ProcessStep.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { Check } from 'lucide-react'; 3 | const { step } = Astro.props; 4 | --- 5 | 6 |
7 |
8 | {step !== 'check' ? step : } 9 |
10 |
11 | 12 |
13 |
14 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/components/homepage/HomeBottomCta.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { ChevronRight as IconChevron } from 'lucide-react'; 3 | --- 4 | 5 |
6 |
7 |

Start building with Skeleton today.

8 |
9 | 10 | Get Started 11 | 12 | 13 |
14 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/components/mdx/Anchor.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const props = Astro.props; 3 | --- 4 | 5 | 6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/components/mdx/Blockquote.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const props = Astro.props; 3 | --- 4 | 5 |
6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/components/mdx/Code.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const props = Astro.props; 3 | --- 4 | 5 | 6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/components/mdx/Heading1.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const props = Astro.props; 3 | --- 4 | 5 |

6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/components/mdx/Heading2.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const props = Astro.props; 3 | --- 4 | 5 |

6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/components/mdx/Heading3.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const props = Astro.props; 3 | --- 4 | 5 |

6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/components/mdx/Heading4.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const props = Astro.props; 3 | --- 4 | 5 |

6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/components/mdx/Heading5.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const props = Astro.props; 3 | --- 4 | 5 |
6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/components/mdx/Heading6.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const props = Astro.props; 3 | --- 4 | 5 |
6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/components/mdx/HorzRule.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const props = Astro.props; 3 | --- 4 | 5 |
6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/components/mdx/ListOrdered.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const props = Astro.props; 3 | --- 4 | 5 |
    6 | 7 |
8 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/components/mdx/ListUnordered.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const props = Astro.props; 3 | --- 4 | 5 |
    6 | 7 |
8 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/components/mdx/Table.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const props = Astro.props; 3 | --- 4 | 5 |
6 | 7 | 8 |
9 |
10 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/content/docs/components/accordion/meta.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Accordion 3 | description: Divide content into collapsible sections. 4 | srcSvelte: '/src/components/Accordion' 5 | srcReact: '/src/components/Accordion' 6 | srcAlly: 'https://www.w3.org/WAI/ARIA/apg/patterns/accordion/' 7 | srcZag: 'https://zagjs.com/components/react/accordion' 8 | showDocsUrl: true 9 | --- 10 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/content/docs/components/app-bar/meta.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: App Bar 3 | description: A header element for the top of your page layout. 4 | srcReact: '/src/components/AppBar' 5 | srcSvelte: '/src/components/AppBar' 6 | showDocsUrl: true 7 | --- 8 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/content/docs/components/avatar/meta.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Avatar 3 | description: An image with a fallback for representing the user. 4 | srcSvelte: '/src/components/Avatar' 5 | srcReact: '/src/components/Avatar' 6 | srcZag: 'https://zagjs.com/components/react/avatar' 7 | showDocsUrl: true 8 | --- 9 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/content/docs/components/file-upload/meta.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: File Upload 3 | description: Allow upload of files with buttons or drag and drop. 4 | srcSvelte: '/src/components/FileUpload' 5 | srcReact: '/src/components/FileUpload' 6 | srcZag: 'https://zagjs.com/components/react/file-upload' 7 | showDocsUrl: true 8 | --- 9 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/content/docs/components/navigation/meta.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Navigation 3 | description: Provides navigation interfaces for large, medium, and small screens. 4 | srcSvelte: '/src/components/Navigation' 5 | srcReact: '/src/components/Navigation' 6 | showDocsUrl: true 7 | --- 8 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/content/docs/components/pagination/meta.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Pagination 3 | description: Navigate between multiple pages of content. 4 | srcSvelte: '/src/components/Pagination' 5 | srcReact: '/src/components/Pagination' 6 | srcZag: 'https://zagjs.com/components/react/pagination' 7 | showDocsUrl: true 8 | --- 9 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/content/docs/components/progress-ring/meta.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Progress Ring 3 | description: A radial indicator showing progress or completion of a task. 4 | srcSvelte: '/src/components/ProgressRing' 5 | srcReact: '/src/components/ProgressRing' 6 | srcAlly: 'https://www.w3.org/WAI/ARIA/apg/patterns/meter/' 7 | srcZag: 'https://zagjs.com/components/react/circular-progress' 8 | showDocsUrl: true 9 | --- 10 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/content/docs/components/progress/meta.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Progress 3 | description: An indicator showing the progress or completion of a task. 4 | srcSvelte: '/src/components/Progress' 5 | srcReact: '/src/components/Progress' 6 | srcAlly: 'https://www.w3.org/WAI/ARIA/apg/patterns/meter/' 7 | srcZag: 'https://zagjs.com/components/react/linear-progress' 8 | showDocsUrl: true 9 | --- 10 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/content/docs/components/rating/meta.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Rating 3 | description: Create an visual representation of a numeric range. 4 | srcSvelte: '/src/components/Rating' 5 | srcReact: '/src/components/Rating' 6 | srcAlly: 'https://www.w3.org/WAI/ARIA/apg/patterns/rating-group/' 7 | srcZag: 'https://zagjs.com/components/react/ratings' 8 | showDocsUrl: true 9 | --- 10 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/content/docs/components/segment/meta.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Segment Control 3 | description: Capture input for a limited set of options. 4 | srcSvelte: '/src/components/Segment' 5 | srcReact: '/src/components/Segment' 6 | srcZag: 'https://zagjs.com/components/react/segmented-control' 7 | showDocsUrl: true 8 | --- 9 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/content/docs/components/slider/meta.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Slider 3 | description: Capture input from a range of values. 4 | srcSvelte: '/src/components/Slider' 5 | srcReact: '/src/components/Slider' 6 | srcAlly: 'https://www.w3.org/WAI/ARIA/apg/patterns/slider/' 7 | srcZag: 'https://zagjs.com/components/react/slider' 8 | showDocsUrl: true 9 | --- 10 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/content/docs/components/switch/meta.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Switch 3 | description: A control for toggling between checked states. 4 | srcSvelte: '/src/components/Switch' 5 | srcReact: '/src/components/Switch' 6 | srcAlly: 'https://www.w3.org/WAI/ARIA/apg/patterns/switch/' 7 | srcZag: 'https://zagjs.com/components/react/switch' 8 | showDocsUrl: true 9 | --- 10 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/content/docs/components/tabs/meta.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Tabs 3 | description: Use tabs to quickly switch between different views and pages. 4 | srcSvelte: '/src/components/Tabs' 5 | srcReact: '/src/components/Tabs' 6 | srcAlly: 'https://www.w3.org/WAI/ARIA/apg/patterns/tabs' 7 | srcZag: 'https://zagjs.com/components/react/tabs' 8 | showDocsUrl: true 9 | --- 10 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/content/docs/components/tags-input/meta.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Tags Input 3 | description: Allows input of multiple values. 4 | srcSvelte: '/src/components/TagsInput' 5 | srcReact: '/src/components/TagsInput' 6 | srcZag: 'https://zagjs.com/components/react/tags-input' 7 | showDocsUrl: true 8 | --- 9 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/content/docs/components/toast/meta.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Toast 3 | description: Build a toast notification system. 4 | srcSvelte: '/src/components/Toast' 5 | srcReact: '/src/components/Toast' 6 | srcZag: 'https://zagjs.com/components/react/toast' 7 | showDocsUrl: true 8 | --- 9 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/content/docs/guides/cookbook.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | layout: '@layouts/LayoutDoc.astro' 3 | title: Cookbook 4 | description: A collection of recipes for crafting interface features that utilize Skeleton primitives. 5 | order: 99999 6 | --- 7 | 8 | export const components = componentSet; 9 | 10 | import TableCookbook from '@components/docs/TableCookbook.astro'; 11 | 12 | {/* --- */} 13 | 14 | ## What's This? 15 | 16 | Learn how [recipes](https://bigmedium.com/ideas/the-art-of-design-system-recipes.html) can help you augment and expand the Skeleton design system. 17 | 18 | ## Browse 19 | 20 | 21 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/content/docs/integrations/code-block/meta.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Code Block 3 | description: Learn how to integrate Shiki, a beautiful yet powerful syntax highlighter. 4 | showDocsUrl: true 5 | --- 6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/content/docs/integrations/iconography/meta.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Iconography 3 | description: Learn how to integrate Lucide for iconography in Skeleton. 4 | showDocsUrl: true 5 | --- 6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/content/docs/integrations/popover/meta.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Popover 3 | description: Learn how to integrate dynamic and interactive popover interfaces. 4 | showDocsUrl: true 5 | srcSvelte: '/src/components/' 6 | --- 7 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/content/docs/resources/contribute.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | layout: '@layouts/LayoutDoc.astro' 3 | title: Contribute 4 | description: Learn how to contribute to Skeleton. 5 | --- 6 | 7 | export const components = componentSet; 8 | 9 | import NavGrid from '@components/docs/NavGrid.astro'; 10 | 11 | {/* --- */} 12 | 13 | 14 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/content/docs/tailwind/placeholders.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | layout: '@layouts/LayoutDoc.astro' 3 | title: Placeholders 4 | description: Provides "skeleton" placeholders that can display while content loads. 5 | srcCore: '/utilities/placeholders.css' 6 | showDocsUrl: true 7 | --- 8 | 9 | export const components = componentSet; 10 | 11 | import Example from '@examples/tailwind/placeholders/Example.astro'; 12 | import ExampleRaw from '@examples/tailwind/placeholders/Example.astro?raw'; 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | ## Animated 24 | 25 | ```html 26 |
...
27 | ``` 28 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/env.d.ts: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line @typescript-eslint/triple-slash-reference 2 | /// 3 | /// 4 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/app-bars/Example.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | {#snippet lead()} 11 | 12 | {/snippet} 13 | {#snippet trail()} 14 | 15 | 16 | 17 | {/snippet} 18 | {#snippet headline()} 19 |

Headline

20 | {/snippet} 21 | 22 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/app-bars/Example.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AppBar } from '@skeletonlabs/skeleton-react'; 3 | import { ArrowLeft, Paperclip, Calendar, CircleUser } from 'lucide-react'; 4 | 5 | export const Page: React.FC = () => { 6 | return ( 7 | 8 | 9 | 10 | 11 | 12 | {/* (optional) */} 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |

Headline

21 | 22 | 23 | ); 24 | }; 25 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/app-bars/ExampleToolbar.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | {#snippet lead()} 11 | 12 | {/snippet} 13 | {#snippet trail()} 14 | 15 | 16 | 17 | {/snippet} 18 | Title 19 | 20 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/app-bars/ExampleToolbar.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AppBar } from '@skeletonlabs/skeleton-react'; 3 | import { ArrowLeft, Paperclip, Calendar, CircleUser } from 'lucide-react'; 4 | 5 | export const Page: React.FC = () => { 6 | return ( 7 | 8 | 9 | 10 | 11 | 12 | Title 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | ); 21 | }; 22 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/avatars/Example.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/avatars/Example.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Avatar } from '@skeletonlabs/skeleton-react'; 3 | 4 | export const Page: React.FC = () => { 5 | return ; 6 | }; 7 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/avatars/ExampleFallback.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
7 | 8 | 9 | 10 | 11 |
12 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/avatars/ExampleFallback.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Avatar } from '@skeletonlabs/skeleton-react'; 3 | import { Skull } from 'lucide-react'; 4 | 5 | export const Page: React.FC = () => { 6 | return ( 7 |
8 | 9 | 10 | 11 | 12 |
13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/avatars/ExampleFilter.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | 9 | 21 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/avatars/ExampleStyle.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/avatars/ExampleStyle.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Avatar } from '@skeletonlabs/skeleton-react'; 3 | 4 | export const Page: React.FC = () => { 5 | return ; 6 | }; 7 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/file-upload/Example.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/file-upload/Example.tsx: -------------------------------------------------------------------------------- 1 | import { FileUpload } from '@skeletonlabs/skeleton-react'; 2 | 3 | export const Page: React.FC = () => { 4 | return ( 5 | 6 | ); 7 | }; 8 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/file-upload/ExampleApiBind.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
8 | (api = _api)} /> 9 | 10 |
11 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/file-upload/ExampleApiBind.tsx: -------------------------------------------------------------------------------- 1 | import { FileUpload, type FileUploadApi } from '@skeletonlabs/skeleton-react'; 2 | import { useState } from 'react'; 3 | 4 | export const Page: React.FC = () => { 5 | const [api, setApi] = useState(); 6 | 7 | return ( 8 |
9 | 10 | 13 |
14 | ); 15 | }; 16 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/file-upload/ExampleButton.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 12 | 13 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/file-upload/ExampleButton.tsx: -------------------------------------------------------------------------------- 1 | import { FileUpload } from '@skeletonlabs/skeleton-react'; 2 | import { Upload as IconUpload } from 'lucide-react'; 3 | 4 | export const Page: React.FC = () => { 5 | return ( 6 | 7 | 11 | 12 | ); 13 | }; 14 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/file-upload/ExampleDisabled.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/file-upload/ExampleDisabled.tsx: -------------------------------------------------------------------------------- 1 | import { FileUpload } from '@skeletonlabs/skeleton-react'; 2 | 3 | export const Page: React.FC = () => { 4 | return ; 5 | }; 6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/file-upload/ExampleFull.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 18 | {#snippet iconInterface()}{/snippet} 19 | {#snippet iconFile()}{/snippet} 20 | {#snippet iconFileRemove()}{/snippet} 21 | 22 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/file-upload/ExampleFull.tsx: -------------------------------------------------------------------------------- 1 | import { FileUpload } from '@skeletonlabs/skeleton-react'; 2 | import { ImagePlus as IconDropzone, Paperclip as IconFile, XCircle as IconRemove } from 'lucide-react'; 3 | 4 | export const Page: React.FC = () => { 5 | return ( 6 | } 12 | iconFile={} 13 | iconFileRemove={} 14 | onFileChange={console.log} 15 | onFileReject={console.error} 16 | classes="w-full" 17 | /> 18 | ); 19 | }; 20 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/file-upload/ExampleRtl.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/file-upload/ExampleRtl.tsx: -------------------------------------------------------------------------------- 1 | import { FileUpload } from '@skeletonlabs/skeleton-react'; 2 | 3 | export const Page: React.FC = () => { 4 | return ( 5 | 14 | ); 15 | }; 16 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/navigation/ExampleTiles.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/navigation/ExampleTilesSelectionSvelte.txt: -------------------------------------------------------------------------------- 1 | 11 | 12 | 13 | {#each links as {label, href}} 14 | 19 | {icon} 20 | 21 | {/each} 22 | 23 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/pagination/ExampleAlt.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/pagination/ExampleAlt.tsx: -------------------------------------------------------------------------------- 1 | import { Pagination } from '@skeletonlabs/skeleton-react'; 2 | 3 | export const Page: React.FC = () => { 4 | const sourceData = [{ id: 0 }, { id: 1 }, { id: 3 }, { id: 4 }]; 5 | 6 | return ; 7 | }; 8 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/popover/ExampleTooltip.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | (openState = e.open)} 9 | positioning={{ placement: 'top' }} 10 | triggerBase="underline" 11 | contentBase="card preset-filled p-4" 12 | openDelay={200} 13 | arrow 14 | > 15 | {#snippet trigger()}Hover Me{/snippet} 16 | {#snippet content()}This is a tooltip.{/snippet} 17 | 18 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/progress-rings/Example.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 | (value = e.value)} {max} /> 10 | 11 |
12 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/progress-rings/Example.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { ProgressRing } from '@skeletonlabs/skeleton-react'; 3 | 4 | export const Page = () => { 5 | const [value, setValue] = useState(25); 6 | const [max] = useState(100); 7 | 8 | return ( 9 |
10 | {/* Progress */} 11 | 12 | {/* Range Input */} 13 | setValue(e.currentTarget.valueAsNumber)} max={max} /> 14 |
15 | ); 16 | }; 17 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/progress-rings/ExampleIcons.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/progress-rings/ExampleIcons.tsx: -------------------------------------------------------------------------------- 1 | import { ProgressRing } from '@skeletonlabs/skeleton-react'; 2 | import { ThermometerSun as IconThermometer } from 'lucide-react'; 3 | 4 | export const Page = () => { 5 | return ( 6 | 7 | 8 | 9 | ); 10 | }; 11 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/progress-rings/ExampleIndeterminate.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/progress-rings/ExampleIndeterminate.tsx: -------------------------------------------------------------------------------- 1 | import { ProgressRing } from '@skeletonlabs/skeleton-react'; 2 | 3 | export const Page = () => { 4 | return ; 5 | }; 6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/progress-rings/ExampleLabel.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 | 7 |
8 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/progress-rings/ExampleLabel.tsx: -------------------------------------------------------------------------------- 1 | import { ProgressRing } from '@skeletonlabs/skeleton-react'; 2 | 3 | export const Page = () => { 4 | return ( 5 |
6 | 7 |
8 | ); 9 | }; 10 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/progress/Example.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 50% 6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/progress/Example.tsx: -------------------------------------------------------------------------------- 1 | import { Progress } from '@skeletonlabs/skeleton-react'; 2 | 3 | export const Page = () => { 4 | return ( 5 | 6 | 50% 7 | 8 | ); 9 | }; 10 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/progress/ExampleColors.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 | 7 | 8 | 9 |
10 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/progress/ExampleColors.tsx: -------------------------------------------------------------------------------- 1 | import { Progress } from '@skeletonlabs/skeleton-react'; 2 | 3 | export const Page = () => { 4 | return ( 5 |
6 | 7 | 8 | 9 |
10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/progress/ExampleHeight.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 | 7 | 8 | 9 |
10 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/progress/ExampleHeight.tsx: -------------------------------------------------------------------------------- 1 | import { Progress } from '@skeletonlabs/skeleton-react'; 2 | 3 | export const Page = () => { 4 | return ( 5 |
6 | 7 | 8 | 9 |
10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/progress/ExampleIndeterminate.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/progress/ExampleIndeterminate.tsx: -------------------------------------------------------------------------------- 1 | import { Progress } from '@skeletonlabs/skeleton-react'; 2 | 3 | export const Page = () => { 4 | return ; 5 | }; 6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/progress/ExampleNative.astro: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/rating/Example.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | (starValue = e.value)} /> 9 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/rating/Example.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { Rating } from '@skeletonlabs/skeleton-react'; 3 | 4 | export const Page = () => { 5 | // You may optionally implement useState 6 | const [starValue, setStarValue] = useState(2); 7 | 8 | return setStarValue(e.value)} />; 9 | }; 10 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/rating/ExampleAllowHalf.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/rating/ExampleAllowHalf.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { Rating } from '@skeletonlabs/skeleton-react'; 3 | 4 | export const Page = () => { 5 | const [starValue, setStarValue] = useState(2); 6 | 7 | return setStarValue(e.value)} allowHalf>; 8 | }; 9 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/rating/ExampleCount.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/rating/ExampleCount.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { Rating } from '@skeletonlabs/skeleton-react'; 3 | 4 | export const Page = () => { 5 | const [starValue, setStarValue] = useState(2); 6 | return setStarValue(e.value)}>; 7 | }; 8 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/rating/ExampleCustomIcon.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | {#snippet iconEmpty()} 8 | 9 | {/snippet} 10 | {#snippet iconFull()} 11 | 12 | {/snippet} 13 | 14 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/rating/ExampleCustomIcon.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | 3 | import { Rating } from '@skeletonlabs/skeleton-react'; 4 | import { Bone, Skull } from 'lucide-react'; 5 | 6 | export const Page = () => { 7 | const [starValue, setStarValue] = useState(2); 8 | return ( 9 | setStarValue(e.value)} 12 | iconEmpty={} 13 | iconFull={} 14 | > 15 | ); 16 | }; 17 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/rating/ExampleDisabled.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/rating/ExampleDisabled.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { Rating } from '@skeletonlabs/skeleton-react'; 3 | 4 | export const Page = () => { 5 | const [starValue, setStarValue] = useState(2); 6 | return setStarValue(e.value)} disabled>; 7 | }; 8 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/rating/ExampleRTL.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/rating/ExampleRTL.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { Rating } from '@skeletonlabs/skeleton-react'; 3 | 4 | export const Page = () => { 5 | const [starValue, setStarValue] = useState(2); 6 | return setStarValue(e.value)} dir="rtl">; 7 | }; 8 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/rating/ExampleReadOnly.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/rating/ExampleReadOnly.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { Rating } from '@skeletonlabs/skeleton-react'; 3 | 4 | export const Page = () => { 5 | const [starValue, setStarValue] = useState(2); 6 | return setStarValue(e.value)} readOnly>; 7 | }; 8 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/segment-control/ExampleDisableItem.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | (size = e.value)}> 8 | sm 9 | md 10 | lg 11 | 12 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/segment-control/ExampleDisableItem.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Segment } from '@skeletonlabs/skeleton-react'; 3 | 4 | export const Page: React.FC = () => { 5 | const [size, setSize] = useState('sm'); 6 | 7 | return ( 8 | setSize(e.value!)}> 9 | sm 10 | 11 | md 12 | 13 | lg 14 | 15 | ); 16 | }; 17 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/segment-control/ExampleDisabled.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | (size = e.value)} disabled> 8 | sm 9 | md 10 | lg 11 | 12 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/segment-control/ExampleDisabled.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Segment } from '@skeletonlabs/skeleton-react'; 3 | 4 | export const Page: React.FC = () => { 5 | const [size, setSize] = useState('sm'); 6 | 7 | return ( 8 | setSize(e.value!)} disabled> 9 | sm 10 | md 11 | lg 12 | 13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/segment-control/ExampleReadOnly.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | (size = e.value)} readOnly> 8 | sm 9 | md 10 | lg 11 | 12 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/segment-control/ExampleReadOnly.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Segment } from '@skeletonlabs/skeleton-react'; 3 | 4 | export const Page: React.FC = () => { 5 | const [size, setSize] = useState('sm'); 6 | 7 | return ( 8 | setSize(e.value!)} readOnly> 9 | sm 10 | md 11 | lg 12 | 13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/segment-control/ExampleVertical.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | (size = e.value!)} orientation="vertical"> 8 | Small 9 | Medium 10 | Large 11 | 12 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/segment-control/ExampleVertical.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Segment } from '@skeletonlabs/skeleton-react'; 3 | 4 | export const Page: React.FC = () => { 5 | const [size, setSize] = useState('sm'); 6 | 7 | return ( 8 | setSize(e.value!)} orientation="vertical"> 9 | Small 10 | Medium 11 | Large 12 | 13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/slider/Example.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | (value = e.value)} /> 8 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/slider/Example.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { Slider } from '@skeletonlabs/skeleton-react'; 3 | 4 | export const Page: React.FC = () => { 5 | const [value, setValue] = useState([40]); 6 | 7 | return setValue(e.value)} />; 8 | }; 9 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/slider/ExampleColors.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
8 | (value = e.value)} meterBg="bg-primary-500" thumbRingColor="ring-primary-500" /> 9 | (value = e.value)} meterBg="bg-secondary-500" thumbRingColor="ring-secondary-500" /> 10 | (value = e.value)} meterBg="bg-tertiary-500" thumbRingColor="ring-tertiary-500" /> 11 |
12 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/slider/ExampleColors.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { Slider } from '@skeletonlabs/skeleton-react'; 3 | 4 | export const Page: React.FC = () => { 5 | const [value, setValue] = useState([40]); 6 | 7 | return ( 8 |
9 | setValue(e.value)} meterBg="bg-primary-500" thumbRingColor="ring-primary-500" /> 10 | setValue(e.value)} meterBg="bg-secondary-500" thumbRingColor="ring-secondary-500" /> 11 | setValue(e.value)} meterBg="bg-tertiary-500" thumbRingColor="ring-tertiary-500" /> 12 |
13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/slider/ExampleHeight.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
8 | (value = e.value)} height="h-1" /> 9 | (value = e.value)} height="h-6" thumbSize="size-8" /> 10 |
11 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/slider/ExampleHeight.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { Slider } from '@skeletonlabs/skeleton-react'; 3 | 4 | export const Page: React.FC = () => { 5 | const [value, setValue] = useState([40]); 6 | 7 | return ( 8 |
9 | setValue(e.value)} height="h-1" /> 10 | setValue(e.value)} height="h-6" thumbSize="size-8" /> 11 |
12 | ); 13 | }; 14 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/slider/ExampleMarkers.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | (value = e.value)} markers={[25, 50, 75]} /> 8 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/slider/ExampleMarkers.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { Slider } from '@skeletonlabs/skeleton-react'; 3 | 4 | export const Page: React.FC = () => { 5 | const [value, setValue] = useState([40]); 6 | 7 | return setValue(e.value)} markers={[25, 50, 75]} />; 8 | }; 9 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/slider/ExampleMulti.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | (valueMulti = e.value)} /> 8 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/slider/ExampleMulti.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { Slider } from '@skeletonlabs/skeleton-react'; 3 | 4 | export const Page: React.FC = () => { 5 | const [valueMulti, setValueMulti] = useState([40, 60]); 6 | 7 | return setValueMulti(e.value)} />; 8 | }; 9 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/slider/ExampleRtl.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 | (value = e.value)} dir="rtl" /> 10 | (valueMulti = e.value)} dir="rtl" /> 11 |
12 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/slider/ExampleRtl.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { Slider } from '@skeletonlabs/skeleton-react'; 3 | 4 | export const Page: React.FC = () => { 5 | const [value, setValue] = useState([40]); 6 | const [valueMulti, setValueMulti] = useState([40, 60]); 7 | 8 | return ( 9 |
10 | setValue(e.value)} dir="rtl" /> 11 | setValueMulti(e.value)} dir="rtl" /> 12 |
13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/slider/ExampleState.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
8 |

Disabled

9 | (value = e.value)} disabled /> 10 |

Read-Only

11 | (value = e.value)} readOnly /> 12 |
13 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/slider/ExampleState.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { Slider } from '@skeletonlabs/skeleton-react'; 3 | 4 | export const Page: React.FC = () => { 5 | const [value, setValue] = useState([40]); 6 | 7 | return ( 8 |
9 |

Disabled

10 | setValue(e.value)} disabled /> 11 |

Read-Only

12 | setValue(e.value)} readOnly /> 13 |
14 | ); 15 | }; 16 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/switch/Example.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | (state = e.checked)} /> 8 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/switch/Example.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Switch } from '@skeletonlabs/skeleton-react'; 3 | 4 | export const Page: React.FC = () => { 5 | const [example, setExample] = React.useState(false); 6 | 7 | return setExample(e.checked)} />; 8 | }; 9 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/switch/ExampleCompact.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | {#snippet inactiveChild()}{/snippet} 10 | {#snippet activeChild()}{/snippet} 11 | 12 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/switch/ExampleCompact.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Switch } from '@skeletonlabs/skeleton-react'; 3 | import { Frown as IconFrown, Smile as IconSmile } from 'lucide-react'; 4 | 5 | export const Page: React.FC = () => { 6 | const [compact, setCompact] = React.useState(false); 7 | 8 | return ( 9 | setCompact(e.checked)} 13 | controlWidth="w-9" 14 | controlActive="preset-filled-tertiary-500" 15 | compact 16 | inactiveChild={} 17 | activeChild={} 18 | /> 19 | ); 20 | }; 21 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/switch/ExampleIcons.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | {#snippet inactiveChild()}{/snippet} 10 | {#snippet activeChild()}{/snippet} 11 | 12 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/switch/ExampleIcons.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Switch } from '@skeletonlabs/skeleton-react'; 3 | import { Check as IconCheck, X as IconX } from 'lucide-react'; 4 | 5 | export const Page: React.FC = () => { 6 | const [icons, setIcons] = React.useState(false); 7 | 8 | return ( 9 | setIcons(e.checked)} 14 | inactiveChild={} 15 | activeChild={} 16 | /> 17 | ); 18 | }; 19 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/tags-input/Example.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | (flavors = e.value)} placeholder="Add Tag..." /> 9 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/tags-input/Example.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { TagsInput } from '@skeletonlabs/skeleton-react'; 3 | 4 | export const Page: React.FC = () => { 5 | const [flavors, setFlavors] = useState(['Vanilla', 'Chocolate', 'Strawberry']); 6 | 7 | return setFlavors(e.value)} placeholder="Add Tag..." />; 8 | }; 9 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/tags-input/ExampleDisabled.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | (flavors = e.value)} placeholder="Add Tag..." disabled /> 9 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/tags-input/ExampleDisabled.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { TagsInput } from '@skeletonlabs/skeleton-react'; 3 | 4 | export const Page: React.FC = () => { 5 | const [flavors, setFlavors] = useState(['Vanilla', 'Chocolate', 'Strawberry']); 6 | 7 | return setFlavors(e.value)} placeholder="Add Tag..." disabled />; 8 | }; 9 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/tags-input/ExampleIcons.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | (flavors = e.value)} placeholder="Add Tag..."> 11 | {#snippet buttonDelete()}{/snippet} 12 | 13 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/tags-input/ExampleIcons.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { TagsInput } from '@skeletonlabs/skeleton-react'; 3 | import { XCircle as IconDelete } from 'lucide-react'; 4 | 5 | export const Page: React.FC = () => { 6 | const [flavors, setFlavors] = useState(['Vanilla', 'Chocolate', 'Strawberry']); 7 | 8 | return ( 9 | setFlavors(e.value)} 12 | placeholder="Add Tag..." 13 | buttonDelete={} 14 | /> 15 | ); 16 | }; 17 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/tags-input/ExampleMisc.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 |

Not Editable Tags

10 | (flavors = e.value)} placeholder="Add Tag..." editable={false} /> 11 |

Add Tag on Paste

12 | (flavors = e.value)} placeholder="Add Tag..." addOnPaste /> 13 |
14 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/tags-input/ExampleMisc.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { TagsInput } from '@skeletonlabs/skeleton-react'; 3 | 4 | export const Page: React.FC = () => { 5 | const [flavors, setFlavors] = useState(['Vanilla', 'Chocolate', 'Strawberry']); 6 | 7 | return ( 8 |
9 |

Not Editable Tags

10 | setFlavors(e.value)} placeholder="Add Tag..." editable={false} /> 11 |

Add Tag on Paste

12 | setFlavors(e.value)} placeholder="Add Tag..." addOnPaste /> 13 |
14 | ); 15 | }; 16 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/toast/Example.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 17 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/toast/Example.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { Toaster, createToaster } from '@skeletonlabs/skeleton-react'; 4 | 5 | export default function () { 6 | const toaster = createToaster(); 7 | return ( 8 | <> 9 | 10 | 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/toast/ExampleClosable.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 18 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/toast/ExampleClosable.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { Toaster, createToaster } from '@skeletonlabs/skeleton-react'; 4 | 5 | export default function () { 6 | const toaster = createToaster(); 7 | return ( 8 | <> 9 | 10 | 21 | 22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/toast/ExamplePlacement.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 11 | 19 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/toast/ExamplePlacement.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { Toaster, createToaster } from '@skeletonlabs/skeleton-react'; 4 | 5 | export default function () { 6 | const toaster = createToaster({ 7 | placement: 'bottom-end' 8 | }); 9 | return ( 10 | <> 11 | 12 | 22 | 23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/toast/ExampleReuseLayout.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/toast/ExampleReuseLayout.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { Toaster } from '@skeletonlabs/skeleton-react'; 4 | import { toaster } from './toaster-react'; 5 | 6 | export default function () { 7 | return ( 8 | <> 9 | 10 | 11 | {/* ...layout content... */} 12 | 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/toast/ExampleReusePage.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/toast/ExampleReusePage.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { toaster } from './toaster-react'; 4 | 5 | export default function () { 6 | return ( 7 | <> 8 | 18 | 19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/toast/toaster-react.ts: -------------------------------------------------------------------------------- 1 | import { createToaster } from '@skeletonlabs/skeleton-react'; 2 | 3 | export const toaster = createToaster(); 4 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/components/toast/toaster-svelte.ts: -------------------------------------------------------------------------------- 1 | import { createToaster } from '@skeletonlabs/skeleton-svelte'; 2 | 3 | export const toaster = createToaster(); 4 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/design/colors/ExampleContrast.astro: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |

Standard Colors

5 |
6 | 7 |
8 |

Color Pairings

9 |
10 |
11 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/design/presets/ExampleCustom.astro: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 |
6 | 7 | 18 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/design/typography/Anchors.astro: -------------------------------------------------------------------------------- 1 | Anchor 2 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/design/typography/Blockquotes.astro: -------------------------------------------------------------------------------- 1 |
2 | "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, aliquid. Molestias, odio illum voluptatibus natus dignissimos, quidem 3 | est unde aspernatur veniam pariatur fuga distinctio esse in quas, repellendus neque reiciendis!" 4 |
5 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/design/typography/CodeTag.astro: -------------------------------------------------------------------------------- 1 |
Insert the .example class here.
2 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/design/typography/Headings.astro: -------------------------------------------------------------------------------- 1 |
2 |

Heading 1

3 |

Heading 2

4 |

Heading 3

5 |

Heading 4

6 |
Heading 5
7 |
Heading 6
8 |
9 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/design/typography/InsDel.astro: -------------------------------------------------------------------------------- 1 |
2 | Always Gonna Give You Up 3 | Never Gonna Give You Up 4 |
5 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/design/typography/Keyboard.astro: -------------------------------------------------------------------------------- 1 |
Press ⌘ + C to copy.
2 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/design/typography/ListBasic.astro: -------------------------------------------------------------------------------- 1 |
    2 |
  • Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.
    • 3 |
  • Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.
    • 4 |
  • Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.
    • 5 |
6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/design/typography/ListDesc.astro: -------------------------------------------------------------------------------- 1 |
2 |
3 |
Item A
4 |
Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.
5 |
6 |
7 |
Item B
8 |
Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.
9 |
10 |
11 |
Item C
12 |
Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.
13 |
14 |
15 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/design/typography/ListNav.astro: -------------------------------------------------------------------------------- 1 | 17 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/design/typography/ListOrdered.astro: -------------------------------------------------------------------------------- 1 |
    2 |
  • Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.
    • 3 |
  • Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.
    • 4 |
  • Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.
    • 5 |
6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/design/typography/ListUnordered.astro: -------------------------------------------------------------------------------- 1 |
    2 |
  • Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.
    • 3 |
  • Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.
    • 4 |
  • Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.
    • 5 |
6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/design/typography/Mark.astro: -------------------------------------------------------------------------------- 1 | 2 |

3 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, aliquid. Molestias, odio illum voluptatibus natus dignissimos, quidem est unde aspernatur veniam pariatur fuga. 4 |

5 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/design/typography/Paragraphs.astro: -------------------------------------------------------------------------------- 1 |

The quick brown fox jumps over the lazy dog

2 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/design/typography/Pre.astro: -------------------------------------------------------------------------------- 1 | 
The quick brown fox jumps over the lazy dog.
2 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/guides/cookbook/alerts/Example.astro: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Hey, heads up!

4 |

Something of moderate importance has occurred.

5 |
6 |
7 | 8 |
9 |
10 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/guides/cookbook/breadcrumbs/Example.astro: -------------------------------------------------------------------------------- 1 |
    2 |
  1. Blog
    2. 3 |
  2. ›
    3. 4 |
  3. Category
    4. 5 |
  4. ›
    5. 6 |
  5. Article
    6. 7 |
8 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/guides/cookbook/breadcrumbs/ExampleIcons.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { ChevronRight, House, Cog } from 'lucide-react'; 3 | --- 4 | 5 |
    6 |
  1. 7 | 8 | 9 | 10 |
    2. 11 |
  2. 12 | 13 |
    3. 14 |
  3. 15 | 16 | 17 | 18 |
    4. 19 |
  4. 20 | 21 |
    5. 22 |
  5. Current
    6. 23 |
24 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/guides/cookbook/chat/ExampleColumns.astro: -------------------------------------------------------------------------------- 1 | 7 |
8 |
(nav)
9 |
(feed)
10 |
(online)
11 |
12 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/guides/cookbook/clipboard/Example.astro: -------------------------------------------------------------------------------- 1 | 2 | 3 | 20 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/guides/cookbook/image-layouts/ExampleQuad.astro: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/guides/cookbook/layouts/ExampleColOne.astro: -------------------------------------------------------------------------------- 1 |
2 | 3 |
(header)
4 | 5 |
6 |

Paragraph 1

7 |

Paragraph 2

8 |

Paragraph 3

9 |
10 | 11 |
(footer)
12 |
13 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/guides/cookbook/logo-clouds/Example.astro: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/guides/cookbook/scroll-containers/Example.astro: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 | { 6 | Array.from({ length: 8 }).map((_, i) => ( 7 | // Each scrollable card element 8 |
9 | {i + 1} 10 |
11 | )) 12 | } 13 |
14 |
15 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/guides/cookbook/stepper/ExampleComponent.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | {#each steps as step} 13 | 14 | 15 | 16 | {/each} 17 | 18 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/guides/cookbook/stepper/ExampleStepOne.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 |

{label}

7 |

The component contents for {label}.

8 |
9 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/guides/cookbook/svg-filters/filters/Apollo.astro: -------------------------------------------------------------------------------- 1 | 2 | 10 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/guides/cookbook/svg-filters/filters/BlueNight.astro: -------------------------------------------------------------------------------- 1 | 2 | 13 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/guides/cookbook/svg-filters/filters/GreenFall.astro: -------------------------------------------------------------------------------- 1 | 2 | 27 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/guides/cookbook/svg-filters/filters/Rustic.astro: -------------------------------------------------------------------------------- 1 | 2 | 15 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/guides/cookbook/svg-filters/filters/Summer.astro: -------------------------------------------------------------------------------- 1 | 2 | 18 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/guides/cookbook/svg-filters/filters/XPro.astro: -------------------------------------------------------------------------------- 1 | 2 | 13 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/guides/cookbook/svg-filters/filters/index.ts: -------------------------------------------------------------------------------- 1 | // Filter Barrel File 2 | 3 | import Apollo from './Apollo.astro'; 4 | import BlueNight from './BlueNight.astro'; 5 | import Emerald from './Emerald.astro'; 6 | import GreenFall from './GreenFall.astro'; 7 | import Noir from './Noir.astro'; 8 | import NoirLight from './NoirLight.astro'; 9 | import Rustic from './Rustic.astro'; 10 | import Summer from './Summer.astro'; 11 | import XPro from './XPro.astro'; 12 | 13 | export { Apollo, BlueNight, Emerald, GreenFall, Noir, NoirLight, Rustic, Summer, XPro }; 14 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/integrations/code-block/Example.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Code from 'astro/components/Code.astro'; 3 | 4 | const exampleConsole = `npx sv create my-skeleton-app`; 5 | const exampleHtml = `
Hello World
`; 6 | const exampleCss = `.foobar { background: green; }`; 7 | const exampleJavascript = `const foo = 'bar';`; 8 | --- 9 | 10 |
11 | 12 | 13 | 14 | 15 |
16 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/integrations/code-block/ReactPage.txt: -------------------------------------------------------------------------------- 1 | import { CodeBlock } from "@/components/CodeBlock/CodeBlock"; 2 | 3 | export default function Home() { 4 | // Source Code 5 | const exampleConsole = `npx sv create my-skeleton-app`; 6 | const exampleHtml = `
Hello World
`; 7 | const exampleCss = `.foobar { background: green; }`; 8 | const exampleJavascript = `const foo = 'bar';`; 9 | 10 | return ( 11 |
12 | 13 | 14 | 15 | 16 |
17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/integrations/code-block/ReactType.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/examples/integrations/code-block/ReactType.txt -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/integrations/code-block/SveltePage.txt: -------------------------------------------------------------------------------- 1 | 10 | 11 |
12 | 13 | 14 | 15 | 16 |
17 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/integrations/code-block/Types.txt: -------------------------------------------------------------------------------- 1 | export interface CodeBlockProps { 2 | code?: string; 3 | lang?: 'console' | 'html' | 'css' | 'js'; 4 | theme?: 'dark-plus'; 5 | // Base Style Props 6 | base?: string; 7 | rounded?: string; 8 | shadow?: string; 9 | classes?: string; 10 | // Pre Style Props 11 | preBase?: string; 12 | prePadding?: string; 13 | preClasses?: string; 14 | } 15 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/tailwind/badges/Example.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { Heart as IconHeart } from 'lucide-react'; 3 | --- 4 | 5 |
6 | 7 | 8 | 9 | 10 | 11 | Badge 12 | 13 | 14 | 15 | Badge 16 | 17 |
18 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/tailwind/badges/ExampleOverlap.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const imgSrc = 3 | 'https://images.unsplash.com/photo-1620122303020-87ec826cf70d?q=80&w=256&h=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'; 4 | --- 5 | 6 |
7 | 2 8 | Avatar 9 |
10 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/tailwind/buttons/Example.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { ArrowRight as IconArrowRight } from 'lucide-react'; 3 | --- 4 | 5 |
6 | 7 | 8 | 9 | 10 | 11 | 15 |
16 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/tailwind/buttons/ExampleDisabled.astro: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/tailwind/buttons/ExampleGroup.astro: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/tailwind/buttons/ExampleSizes.astro: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 |
6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/tailwind/cards/Example.astro: -------------------------------------------------------------------------------- 1 |
2 |

Card

3 |
4 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/tailwind/chips/Example.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { Check } from 'lucide-react'; 3 | --- 4 | 5 |
6 | 7 | 10 | 11 | 12 | 13 | 17 |
18 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/tailwind/chips/ExampleDisabled.astro: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/tailwind/chips/ExampleSelect.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 |
11 | 12 | {#each colors as c} 13 | 14 | 17 | {/each} 18 |
19 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/tailwind/chips/ExampleSelect.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | 3 | export const Page: React.FC = () => { 4 | const colors = ['red', 'blue', 'green']; 5 | const [color, setColor] = useState(colors[0]); 6 | 7 | return ( 8 |
9 | {/* Loop through the available colors */} 10 | {color && 11 | colors.map((c) => ( 12 | // On selection, set the color state, dynamically update classes 13 | 16 | ))} 17 |
18 | ); 19 | }; 20 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/tailwind/dividers/Example.astro: -------------------------------------------------------------------------------- 1 |
2 |

Above the divider.

3 | 4 |
5 | 6 |

Below the divider.

7 |
8 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/tailwind/dividers/ExampleSize.astro: -------------------------------------------------------------------------------- 1 |
2 | Default 3 |
4 | 5 | border-t-2 6 |
7 | 8 | border-t-4 9 |
10 | 11 | border-t-8 12 |
13 |
14 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/tailwind/dividers/ExampleStyle.astro: -------------------------------------------------------------------------------- 1 |
2 | border-solid 3 |
4 | 5 | border-dashed 6 |
7 | 8 | border-dotted 9 |
10 | 11 | border-double 12 |
13 |
14 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/tailwind/dividers/ExampleVert.astro: -------------------------------------------------------------------------------- 1 |
2 | Default → 3 | 4 | 5 | 6 | 7 | 8 | 9 | ← border-l-8 10 |
11 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/tailwind/forms/ExampleCheckboxes.astro: -------------------------------------------------------------------------------- 1 |
2 | 6 | 10 | 14 |
15 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/tailwind/forms/ExampleInput.astro: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/tailwind/forms/ExampleRadio.astro: -------------------------------------------------------------------------------- 1 |
2 | 6 | 10 | 14 |
15 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/tailwind/forms/ExampleSelect.astro: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/tailwind/forms/ExampleTextarea.astro: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/tailwind/gradients/Example.astro: -------------------------------------------------------------------------------- 1 |
2 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/tailwind/gradients/ExampleConic.astro: -------------------------------------------------------------------------------- 1 |
2 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/tailwind/gradients/ExampleSpinner.astro: -------------------------------------------------------------------------------- 1 |
2 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/examples/tailwind/gradients/ExampleText.astro: -------------------------------------------------------------------------------- 1 |

2 | Skeleton 3 |

4 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/icons/astro.svg: -------------------------------------------------------------------------------- 1 | Astro -------------------------------------------------------------------------------- /sites/skeleton.dev/src/icons/bluesky.svg: -------------------------------------------------------------------------------- 1 | 2 | Bluesky 3 | 4 | 5 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/icons/tailwind.svg: -------------------------------------------------------------------------------- 1 | 2 | Tailwind CSS 3 | 4 | 5 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/icons/vue.svg: -------------------------------------------------------------------------------- 1 | Vue.js -------------------------------------------------------------------------------- /sites/skeleton.dev/src/icons/youtube.svg: -------------------------------------------------------------------------------- 1 | 2 | YouTube 3 | 4 | 5 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/get-started/figma/components.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/get-started/figma/components.png -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/get-started/figma/components.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/get-started/figma/components.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/get-started/figma/hero-dark.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/get-started/figma/hero-dark.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/get-started/figma/hero-light.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/get-started/figma/hero-light.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/get-started/figma/hero.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/get-started/figma/hero.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/get-started/figma/plugin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/get-started/figma/plugin.png -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/get-started/figma/plugin.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/get-started/figma/plugin.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/get-started/figma/tutorials.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/get-started/figma/tutorials.png -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/get-started/figma/tutorials.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/get-started/figma/tutorials.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/get-started/figma/ui-kit.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/get-started/figma/ui-kit.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/headless/bits-ui/bits-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/headless/bits-ui/bits-banner.png -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/headless/bits-ui/bits-component.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/headless/bits-ui/bits-component.gif -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/headless/melt-ui/melt-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/headless/melt-ui/melt-banner.png -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/headless/melt-ui/melt-component.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/headless/melt-ui/melt-component.gif -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/headless/radix-ui/radix-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/headless/radix-ui/radix-banner.png -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/headless/radix-ui/radix-component.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/headless/radix-ui/radix-component.gif -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/meta/opengraph.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/meta/opengraph.png -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/tutorials/figma/chapter-1/01_createNewProject.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/tutorials/figma/chapter-1/01_createNewProject.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/tutorials/figma/chapter-1/02_importProject.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/tutorials/figma/chapter-1/02_importProject.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/tutorials/figma/chapter-1/03_publish.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/tutorials/figma/chapter-1/03_publish.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/tutorials/figma/chapter-1/04_createNewFile.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/tutorials/figma/chapter-1/04_createNewFile.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/tutorials/figma/chapter-1/05_selectLibrary.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/tutorials/figma/chapter-1/05_selectLibrary.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/tutorials/figma/chapter-1/06_useLibrary.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/tutorials/figma/chapter-1/06_useLibrary.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/tutorials/figma/chapter-2/01_openProject.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/tutorials/figma/chapter-2/01_openProject.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/tutorials/figma/chapter-2/01_openSkeleton.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/tutorials/figma/chapter-2/01_openSkeleton.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/tutorials/figma/chapter-2/02_openThemePlugin.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/tutorials/figma/chapter-2/02_openThemePlugin.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/tutorials/figma/chapter-2/02_setStage.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/tutorials/figma/chapter-2/02_setStage.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/tutorials/figma/chapter-2/03_addNewTheme.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/tutorials/figma/chapter-2/03_addNewTheme.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/tutorials/figma/chapter-2/03_switchTheme.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/tutorials/figma/chapter-2/03_switchTheme.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/tutorials/figma/chapter-2/03_switchThemeResult.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/tutorials/figma/chapter-2/03_switchThemeResult.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/tutorials/figma/chapter-2/04_selectTheme.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/tutorials/figma/chapter-2/04_selectTheme.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/tutorials/figma/chapter-2/04_switchColorScheme.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/tutorials/figma/chapter-2/04_switchColorScheme.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/tutorials/figma/chapter-2/04_switchColorSchemeResult.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/tutorials/figma/chapter-2/04_switchColorSchemeResult.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/tutorials/figma/chapter-2/05_copyTheme.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/tutorials/figma/chapter-2/05_copyTheme.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/tutorials/figma/chapter-2/06_pasteTheme.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/tutorials/figma/chapter-2/06_pasteTheme.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/tutorials/figma/chapter-2/07_publish.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/tutorials/figma/chapter-2/07_publish.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/tutorials/figma/chapter-2/07_publishUpdates.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/tutorials/figma/chapter-2/07_publishUpdates.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/tutorials/figma/chapter-3/02_import.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/tutorials/figma/chapter-3/02_import.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/tutorials/figma/chapter-3/03_publishLibrary.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/tutorials/figma/chapter-3/03_publishLibrary.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/tutorials/figma/chapter-3/04_openFile.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/tutorials/figma/chapter-3/04_openFile.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/tutorials/figma/chapter-3/04_selectNewSkeleton.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/tutorials/figma/chapter-3/04_selectNewSkeleton.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/tutorials/figma/chapter-3/04_selectSkeleton.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/tutorials/figma/chapter-3/04_selectSkeleton.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/images/tutorials/figma/chapter-3/removeOld.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/skeleton.dev/src/images/tutorials/figma/chapter-3/removeOld.webp -------------------------------------------------------------------------------- /sites/skeleton.dev/src/lib/bluesky.ts: -------------------------------------------------------------------------------- 1 | import { AtpAgent } from '@atproto/api'; 2 | 3 | const blueSkyAgent = new AtpAgent({ 4 | service: 'https://api.bsky.app' 5 | }); 6 | 7 | export { blueSkyAgent }; 8 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/pages/llms-react.txt.ts: -------------------------------------------------------------------------------- 1 | import type { APIRoute } from 'astro'; 2 | import { generateDocumentation } from 'src/lib/generate-llm'; 3 | 4 | export const GET: APIRoute = async () => { 5 | const content = await generateDocumentation('react'); 6 | return new Response(content, { 7 | headers: { 'Content-Type': 'text/plain; charset=utf-8' } 8 | }); 9 | }; 10 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/pages/llms-svelte.txt.ts: -------------------------------------------------------------------------------- 1 | import type { APIRoute } from 'astro'; 2 | import { generateDocumentation } from 'src/lib/generate-llm'; 3 | 4 | export const GET: APIRoute = async () => { 5 | const content = await generateDocumentation('svelte'); 6 | return new Response(content, { 7 | headers: { 'Content-Type': 'text/plain; charset=utf-8' } 8 | }); 9 | }; 10 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/stores/doc-search-settings.ts: -------------------------------------------------------------------------------- 1 | import { persistentMap } from '@nanostores/persistent'; 2 | import type { Framework } from './preferred-framework'; 3 | 4 | type SearchFilters = { 5 | framework: 'preferred' | 'all' | Framework; 6 | }; 7 | 8 | export const docSearchSettingsStore = persistentMap('doc-search-settings', { 9 | framework: 'preferred' 10 | }); 11 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/stores/preferred-framework.ts: -------------------------------------------------------------------------------- 1 | import { persistentAtom } from '@nanostores/persistent'; 2 | 3 | export type Framework = (typeof frameworks)[number]['slug']; 4 | 5 | export const frameworks = [ 6 | { 7 | name: 'React', 8 | slug: 'react', 9 | iconName: 'react' 10 | }, 11 | { 12 | name: 'Svelte', 13 | slug: 'svelte', 14 | iconName: 'svelte' 15 | } 16 | ] as const; 17 | 18 | export const preferredFrameworkStore = persistentAtom('preferred-framework', frameworks[0].slug); 19 | 20 | export function isFramework(framework: unknown): framework is Framework { 21 | return frameworks.some((f) => f.slug === framework); 22 | } 23 | -------------------------------------------------------------------------------- /sites/skeleton.dev/src/stores/social-links.ts: -------------------------------------------------------------------------------- 1 | import { atom } from 'nanostores'; 2 | 3 | interface SocialLink { 4 | href: string; 5 | label: string; 6 | icon: string; 7 | } 8 | 9 | export const socialLinks = atom([ 10 | { 11 | href: 'https://github.com/skeletonlabs/skeleton', 12 | label: 'GitHub', 13 | icon: 'github' 14 | }, 15 | { 16 | href: 'https://discord.gg/EXqV7W8MtY', 17 | label: 'Discord', 18 | icon: 'discord' 19 | }, 20 | { 21 | href: 'https://bsky.app/profile/skeleton.dev', 22 | label: 'Bluesky', 23 | icon: 'bluesky' 24 | }, 25 | { 26 | href: 'https://www.youtube.com/@skeletonlabs', 27 | label: 'YouTube', 28 | icon: 'youtube' 29 | } 30 | ]); 31 | -------------------------------------------------------------------------------- /sites/skeleton.dev/svelte.config.js: -------------------------------------------------------------------------------- 1 | import { vitePreprocess } from '@astrojs/svelte'; 2 | 3 | export default { 4 | preprocess: vitePreprocess() 5 | }; 6 | -------------------------------------------------------------------------------- /sites/skeleton.dev/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "astro/tsconfigs/strict", 3 | "compilerOptions": { 4 | "baseUrl": ".", 5 | "jsx": "react-jsx", 6 | "jsxImportSource": "react", 7 | "moduleResolution": "Bundler", 8 | "paths": { 9 | "@layouts/*": ["src/layouts/*"], 10 | "@components/*": ["src/components/*"], 11 | "@examples/*": ["src/examples/*"], 12 | "@content/*": ["src/content/*"], 13 | "@styles/*": ["src/styles/*"], 14 | "@images/*": ["src/images/*"] 15 | } 16 | }, 17 | "exclude": ["node_modules", "dist", "public/pagefind"] 18 | } 19 | -------------------------------------------------------------------------------- /sites/themes.skeleton.dev/README.md: -------------------------------------------------------------------------------- 1 | # themes.skeleton.dev 2 | 3 | The theme builder for Skeleton 4 | -------------------------------------------------------------------------------- /sites/themes.skeleton.dev/src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://kit.svelte.dev/docs/types#app 2 | // for information about these interfaces 3 | declare global { 4 | namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | // interface PageData {} 8 | // interface PageState {} 9 | // interface Platform {} 10 | } 11 | } 12 | 13 | export {}; 14 | -------------------------------------------------------------------------------- /sites/themes.skeleton.dev/src/lib/components/common/AppFooter/AppFooter.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /sites/themes.skeleton.dev/src/lib/components/common/CodeBlock/types.ts: -------------------------------------------------------------------------------- 1 | export interface CodeBlockProps { 2 | code?: string; 3 | lang?: 'console' | 'html' | 'css' | 'js'; 4 | theme?: string; 5 | // Base Style Props 6 | base?: string; 7 | rounded?: string; 8 | shadow?: string; 9 | classes?: string; 10 | // Pre Style Props 11 | preBase?: string; 12 | prePadding?: string; 13 | preClasses?: string; 14 | } 15 | -------------------------------------------------------------------------------- /sites/themes.skeleton.dev/src/lib/components/common/Lightswitch/Lightswitch.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 24 | -------------------------------------------------------------------------------- /sites/themes.skeleton.dev/src/lib/components/generator/Controls/ControlsCore.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 | 7 |
8 | -------------------------------------------------------------------------------- /sites/themes.skeleton.dev/src/routes/(app)/+layout.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |
10 | 11 | 12 | 13 |
{@render children?.()}
14 | 15 | 16 |
17 | -------------------------------------------------------------------------------- /sites/themes.skeleton.dev/src/routes/(app)/+page.server.ts: -------------------------------------------------------------------------------- 1 | import { redirect } from '@sveltejs/kit'; 2 | 3 | export function load() { 4 | // Redirect: keep in place until the browse 5 | // section is ready to use by end users. 6 | redirect(302, '/themes/create'); 7 | } 8 | -------------------------------------------------------------------------------- /sites/themes.skeleton.dev/src/routes/(app)/+page.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |

Future home of the browse page.

5 |
6 | -------------------------------------------------------------------------------- /sites/themes.skeleton.dev/src/routes/(generator)/themes/create/+layout.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 | 10 | 11 | 12 | {@render children?.()} 13 |
14 | -------------------------------------------------------------------------------- /sites/themes.skeleton.dev/src/routes/+layout.svelte: -------------------------------------------------------------------------------- 1 | 2 | 19 | 20 | {@render children?.()} 21 | -------------------------------------------------------------------------------- /sites/themes.skeleton.dev/static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/themes.skeleton.dev/static/favicon.png -------------------------------------------------------------------------------- /sites/themes.skeleton.dev/static/images/female.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/themes.skeleton.dev/static/images/female.png -------------------------------------------------------------------------------- /sites/themes.skeleton.dev/static/images/male.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skeletonlabs/skeleton/e4c76d60c0738a266c305e44c5dc5944413bf8db/sites/themes.skeleton.dev/static/images/male.png -------------------------------------------------------------------------------- /sites/themes.skeleton.dev/svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from '@sveltejs/adapter-vercel'; 2 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; 3 | 4 | /** @type {import('@sveltejs/kit').Config} */ 5 | const config = { 6 | preprocess: vitePreprocess(), 7 | kit: { 8 | adapter: adapter() 9 | } 10 | }; 11 | export default config; 12 | -------------------------------------------------------------------------------- /sites/themes.skeleton.dev/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true, 12 | "moduleResolution": "bundler" 13 | } 14 | // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files 15 | // 16 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes 17 | // from the referenced tsconfig.json - TypeScript does not merge them in 18 | } 19 | -------------------------------------------------------------------------------- /sites/themes.skeleton.dev/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | import { defineConfig } from 'vite'; 3 | import tailwind from '@tailwindcss/vite'; 4 | 5 | export default defineConfig({ 6 | plugins: [sveltekit(), tailwind()] 7 | }); 8 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "display": "Node LTS (22)", 4 | "_version": "22.0.0", 5 | "compilerOptions": { 6 | "lib": ["es2023"], 7 | "module": "node16", 8 | "target": "es2022", 9 | "strict": true, 10 | "esModuleInterop": true, 11 | "skipLibCheck": true, 12 | "moduleResolution": "node16" 13 | } 14 | } 15 | --------------------------------------------------------------------------------