├── .eslintignore ├── .eslintrc.cjs ├── .github └── FUNDING.yml ├── .gitignore ├── .npmrc ├── .prettierignore ├── .prettierrc ├── LICENSE.md ├── README.md ├── dist ├── bin.d.ts ├── bin.js ├── cli │ ├── helpers │ │ ├── common.d.ts │ │ └── common.js │ └── init │ │ ├── index.d.ts │ │ ├── index.js │ │ └── stubs │ │ ├── postcss.config.cjs │ │ ├── postcss.config.d.cts │ │ ├── tailwind.config.d.ts │ │ └── tailwind.config.js ├── components │ ├── accordion.d.ts │ ├── accordion.js │ ├── alert.d.ts │ ├── alert.js │ ├── animation.d.ts │ ├── animation.js │ ├── avatar.d.ts │ ├── avatar.js │ ├── badge.d.ts │ ├── badge.js │ ├── breadcrumb.d.ts │ ├── breadcrumb.js │ ├── button.d.ts │ ├── button.js │ ├── card.d.ts │ ├── card.js │ ├── chart.d.ts │ ├── chart.js │ ├── cmd.d.ts │ ├── cmd.js │ ├── comment.d.ts │ ├── comment.js │ ├── container.d.ts │ ├── container.js │ ├── cover.d.ts │ ├── cover.js │ ├── date.d.ts │ ├── date.js │ ├── divider.d.ts │ ├── divider.js │ ├── dotnav.d.ts │ ├── dotnav.js │ ├── drop.d.ts │ ├── drop.js │ ├── form │ │ ├── basic.d.ts │ │ ├── basic.js │ │ ├── custom-select.d.ts │ │ ├── custom-select.js │ │ ├── keyval.d.ts │ │ ├── keyval.js │ │ ├── pin.d.ts │ │ ├── pin.js │ │ ├── range.d.ts │ │ ├── range.js │ │ ├── rte.d.ts │ │ ├── rte.js │ │ ├── tag.d.ts │ │ └── tag.js │ ├── icon.d.ts │ ├── icon.js │ ├── index.d.ts │ ├── index.js │ ├── label.d.ts │ ├── label.js │ ├── leader.d.ts │ ├── leader.js │ ├── lightbox.d.ts │ ├── lightbox.js │ ├── link.d.ts │ ├── link.js │ ├── list.d.ts │ ├── list.js │ ├── media.d.ts │ ├── media.js │ ├── modal.d.ts │ ├── modal.js │ ├── nav.d.ts │ ├── nav.js │ ├── notification.d.ts │ ├── notification.js │ ├── offcanvas.d.ts │ ├── offcanvas.js │ ├── pagination.d.ts │ ├── pagination.js │ ├── placeholder.d.ts │ ├── placeholder.js │ ├── position.d.ts │ ├── position.js │ ├── preflight.d.ts │ ├── preflight.js │ ├── print.d.ts │ ├── print.js │ ├── progress.d.ts │ ├── progress.js │ ├── root.d.ts │ ├── root.js │ ├── slider.d.ts │ ├── slider.js │ ├── sortable.d.ts │ ├── sortable.js │ ├── spinner.d.ts │ ├── spinner.js │ ├── stepper.d.ts │ ├── stepper.js │ ├── sticky.d.ts │ ├── sticky.js │ ├── svg.d.ts │ ├── svg.js │ ├── switcher.d.ts │ ├── switcher.js │ ├── tab.d.ts │ ├── tab.js │ ├── table.d.ts │ ├── table.js │ ├── tag.d.ts │ ├── tag.js │ ├── theme-switcher.d.ts │ ├── theme-switcher.js │ ├── thumbnav.d.ts │ ├── thumbnav.js │ ├── tooltip.d.ts │ ├── tooltip.js │ ├── transition.d.ts │ ├── transition.js │ ├── typography.d.ts │ ├── typography.js │ ├── utility.d.ts │ └── utility.js ├── context.d.ts ├── context.js ├── css │ ├── core.min.css │ ├── franken-ui.css │ └── utilities.min.css ├── index.d.ts ├── index.js ├── js │ ├── chart.iife.js │ ├── core.iife.js │ ├── icon.iife.js │ └── rte.iife.js ├── merger.d.ts ├── merger.js ├── palette.d.ts ├── palette.js ├── plugin-vite.d.ts ├── plugin-vite.js ├── postcss │ ├── combine-duplicated-selectors.cjs │ ├── combine-duplicated-selectors.d.cts │ ├── sort-media-queries.cjs │ └── sort-media-queries.d.cts ├── rules.d.ts ├── rules.js ├── shadcn-ui │ ├── preset-quick.d.ts │ └── preset-quick.js ├── types.d.ts └── types.js ├── package-lock.json ├── package.json ├── postcss.config.cjs ├── src ├── app.d.ts ├── app.html ├── css │ └── app.css ├── franken │ ├── test-item.svelte │ └── test.svelte ├── lib │ ├── bin.ts │ ├── cli │ │ ├── helpers │ │ │ └── common.ts │ │ └── init │ │ │ ├── index.ts │ │ │ └── stubs │ │ │ ├── postcss.config.cjs │ │ │ └── tailwind.config.js │ ├── components │ │ ├── accordion.ts │ │ ├── alert.ts │ │ ├── animation.ts │ │ ├── avatar.ts │ │ ├── badge.ts │ │ ├── breadcrumb.ts │ │ ├── button.ts │ │ ├── card.ts │ │ ├── chart.ts │ │ ├── cmd.ts │ │ ├── comment.ts │ │ ├── container.ts │ │ ├── cover.ts │ │ ├── date.ts │ │ ├── divider.ts │ │ ├── dotnav.ts │ │ ├── drop.ts │ │ ├── form │ │ │ ├── basic.ts │ │ │ ├── custom-select.ts │ │ │ ├── keyval.ts │ │ │ ├── pin.ts │ │ │ ├── range.ts │ │ │ ├── rte.ts │ │ │ └── tag.ts │ │ ├── icon.ts │ │ ├── index.ts │ │ ├── label.ts │ │ ├── leader.ts │ │ ├── lightbox.ts │ │ ├── link.ts │ │ ├── list.ts │ │ ├── media.ts │ │ ├── modal.ts │ │ ├── nav.ts │ │ ├── notification.ts │ │ ├── offcanvas.ts │ │ ├── pagination.ts │ │ ├── placeholder.ts │ │ ├── position.ts │ │ ├── preflight.ts │ │ ├── print.ts │ │ ├── progress.ts │ │ ├── root.ts │ │ ├── slider.ts │ │ ├── sortable.ts │ │ ├── spinner.ts │ │ ├── stepper.ts │ │ ├── sticky.ts │ │ ├── svg.ts │ │ ├── switcher.ts │ │ ├── tab.ts │ │ ├── table.ts │ │ ├── tag.ts │ │ ├── theme-switcher.ts │ │ ├── thumbnav.ts │ │ ├── tooltip.ts │ │ ├── transition.ts │ │ ├── typography.ts │ │ └── utility.ts │ ├── context.ts │ ├── index.ts │ ├── merger.ts │ ├── palette.ts │ ├── plugin-vite.ts │ ├── postcss │ │ ├── combine-duplicated-selectors.cjs │ │ └── sort-media-queries.cjs │ ├── rules.ts │ ├── shadcn-ui │ │ └── preset-quick.ts │ └── types.ts └── routes │ ├── +layout.js │ └── +page.svelte ├── static ├── favicon.png ├── fonts │ └── Geist │ │ ├── Mono.woff2 │ │ ├── Sans.woff2 │ │ └── style.css └── images │ ├── avatar.jpg │ ├── dark.jpg │ ├── icons.svg │ ├── image-type.avif │ ├── image-type.jpeg │ ├── image-type.webp │ ├── light.jpg │ ├── photo.jpg │ ├── photo2.jpg │ ├── photo3.jpg │ ├── size-h.jpg │ ├── size-v.jpg │ ├── size1.jpg │ ├── size2.jpg │ ├── slider1.jpg │ ├── slider2.jpg │ ├── slider3.jpg │ ├── slider4.jpg │ └── slider5.jpg ├── svelte.config.js ├── tailwind.config.js ├── tsconfig.json └── vite.config.ts /.eslintignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | 10 | # Ignore files for PNPM, NPM and YARN 11 | pnpm-lock.yaml 12 | package-lock.json 13 | yarn.lock 14 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | /** @type { import("eslint").Linter.Config } */ 2 | module.exports = { 3 | root: true, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:@typescript-eslint/recommended', 7 | 'plugin:svelte/recommended', 8 | 'prettier' 9 | ], 10 | parser: '@typescript-eslint/parser', 11 | plugins: ['@typescript-eslint'], 12 | parserOptions: { 13 | sourceType: 'module', 14 | ecmaVersion: 2020, 15 | extraFileExtensions: ['.svelte'] 16 | }, 17 | env: { 18 | browser: true, 19 | es2017: true, 20 | node: true 21 | }, 22 | overrides: [ 23 | { 24 | files: ['*.svelte'], 25 | parser: 'svelte-eslint-parser', 26 | parserOptions: { 27 | parser: '@typescript-eslint/parser' 28 | } 29 | } 30 | ] 31 | }; 32 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [sveltecult] 2 | ko_fi: sveltecult -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | vite.config.js.timestamp-* 10 | vite.config.ts.timestamp-* 11 | /src/lib/css/franken-ui.css 12 | 13 | # shell scripts 14 | *.sh -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # Ignore files for PNPM, NPM and YARN 2 | pnpm-lock.yaml 3 | package-lock.json 4 | yarn.lock 5 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "printWidth": 100, 6 | "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"], 7 | "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] 8 | } 9 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 [Franken UI contributors](https://github.com/franken-ui/ui/graphs/contributors) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Franken UI 2 | 3 | Franken UI is an open-source library of UI components. Under the hood, it uses UIkit 3 and extended with LitElement. The design is based on shadcn/ui. 4 | 5 | ## Documentations 6 | 7 | | **Version** | **Status** | 8 | |:---------------------------------------:|:---------------:| 9 | | [Version 2](https://franken-ui.dev) | ⚡ Active | 10 | | [Version 1](https://uno.franken-ui.dev) | 💀 Discontinued | 11 | 12 | ## Support 13 | 14 | Franken UI is an independent, MIT-licensed open source project with its ongoing development made possible entirely by the support of the community. If Franken UI has been beneficial to you in any way, please consider contributing by making a donation, which will help maintain and improve it for the benefit of everyone. 15 | 16 | Thanks to the following: 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 |
Omnigres
Answer.ai
Atuin
The Intelligence Company
Ko-Fi Supporters
40 | 41 | ## Hire Me 42 | 43 | I maybe open to new projects and collaborations! Feel free to [get in touch](mailto:reden@franken-ui.dev) to discuss potential collaborations or freelance work. 44 | 45 | ## License 46 | 47 | Licensed under the [MIT license](https://github.com/franken-ui/ui/blob/master/LICENSE.md). 48 | -------------------------------------------------------------------------------- /dist/bin.d.ts: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | export {}; 3 | -------------------------------------------------------------------------------- /dist/bin.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | import init from './cli/init/index.js'; 3 | const args = process.argv.slice(2); 4 | switch (args[0]) { 5 | case 'init': 6 | init(process.argv.slice(3)); 7 | break; 8 | default: 9 | console.error(`Invalid command: ${args[0]}`); 10 | break; 11 | } 12 | -------------------------------------------------------------------------------- /dist/cli/helpers/common.d.ts: -------------------------------------------------------------------------------- 1 | export declare function parseArgs(args: string[], safelist: string[], map: { 2 | [key: string]: string; 3 | }): string[]; 4 | -------------------------------------------------------------------------------- /dist/cli/helpers/common.js: -------------------------------------------------------------------------------- 1 | import uniq from 'lodash/uniq.js'; 2 | export function parseArgs(args, safelist, map) { 3 | const result = []; 4 | const invalidCommands = []; 5 | args.forEach((arg) => { 6 | if (/^-[^-]/.test(arg)) { 7 | for (let i = 1; i < arg.length; i++) { 8 | const char = arg[i]; 9 | const mappedArg = map[char]; 10 | if (mappedArg && safelist.includes(mappedArg)) { 11 | result.push(mappedArg); 12 | } 13 | else { 14 | invalidCommands.push(`-${char}`); 15 | } 16 | } 17 | } 18 | else if (safelist.includes(arg)) { 19 | result.push(arg); 20 | } 21 | else { 22 | invalidCommands.push(arg); 23 | } 24 | }); 25 | if (invalidCommands.length > 0) { 26 | console.error(`Invalid command ${invalidCommands.join(' ')}`); 27 | process.exit(1); 28 | } 29 | return uniq(result); 30 | } 31 | -------------------------------------------------------------------------------- /dist/cli/init/index.d.ts: -------------------------------------------------------------------------------- 1 | export default function (args: string[]): void; 2 | -------------------------------------------------------------------------------- /dist/cli/init/index.js: -------------------------------------------------------------------------------- 1 | import { existsSync, copyFileSync } from 'fs'; 2 | import { join, dirname } from 'path'; 3 | import { parseArgs } from '../helpers/common.js'; 4 | import { fileURLToPath } from 'url'; 5 | const __filename = fileURLToPath(import.meta.url); 6 | const __dirname = dirname(__filename); 7 | const extensions = ['js', 'cjs', 'ts']; 8 | function copy(stub, filename) { 9 | copyFileSync(join(__dirname, 'stubs', stub), join(process.cwd(), filename)); 10 | console.log('Created config file:', filename); 11 | } 12 | export default function (args) { 13 | const map = { p: '--postcss', f: '--force' }; 14 | const safelist = ['-p', '--postcss', '-f', '--force']; 15 | args = parseArgs(args, safelist, map); 16 | if (extensions.some((extension) => existsSync(`tailwind.config.${extension}`))) { 17 | console.error('tailwind.config.js already exists'); 18 | } 19 | else { 20 | (() => { 21 | copy('tailwind.config.js', 'tailwind.config.js'); 22 | })(); 23 | } 24 | if (args.includes('--postcss')) { 25 | if (extensions.some((extension) => existsSync(`postcss.config.${extension}`))) { 26 | console.error('postcss.config.js already exists'); 27 | return; 28 | } 29 | copy('postcss.config.cjs', 'postcss.config.cjs'); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /dist/cli/init/stubs/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('tailwindcss'), 4 | require('franken-ui/postcss/combine-duplicated-selectors')({ 5 | removeDuplicatedProperties: true 6 | }) 7 | ] 8 | }; 9 | -------------------------------------------------------------------------------- /dist/cli/init/stubs/postcss.config.d.cts: -------------------------------------------------------------------------------- 1 | export let plugins: any[]; 2 | -------------------------------------------------------------------------------- /dist/cli/init/stubs/tailwind.config.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: import("tailwindcss").Config; 2 | export default _default; 3 | -------------------------------------------------------------------------------- /dist/cli/init/stubs/tailwind.config.js: -------------------------------------------------------------------------------- 1 | import franken from 'franken-ui/shadcn-ui/preset-quick'; 2 | 3 | /** @type {import('tailwindcss').Config} */ 4 | export default { 5 | presets: [franken()], 6 | content: [], 7 | safelist: [ 8 | { 9 | pattern: /^uk-/ 10 | }, 11 | 'ProseMirror', 12 | 'ProseMirror-focused', 13 | 'tiptap', 14 | 'mr-2', 15 | 'mt-2', 16 | 'opacity-50' 17 | ], 18 | theme: { 19 | extend: {} 20 | }, 21 | plugins: [] 22 | }; 23 | -------------------------------------------------------------------------------- /dist/components/accordion.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-accordion-title': { 3 | display: string; 4 | justifyContent: string; 5 | alignItems: string; 6 | overflow: string; 7 | padding: string; 8 | fontWeight: string; 9 | }; 10 | '.uk-accordion-title:hover': { 11 | textDecoration: string; 12 | }; 13 | '.uk-accordion-icon': { 14 | flex: string; 15 | transition: string; 16 | color: string; 17 | }; 18 | '.uk-open > .uk-accordion-title > .uk-accordion-icon': { 19 | transform: string; 20 | }; 21 | '.uk-accordion-content': { 22 | display: string; 23 | padding: string; 24 | }; 25 | '.uk-accordion-content[hidden]': { 26 | display: string; 27 | }; 28 | '.uk-accordion > li': { 29 | borderWidth: string; 30 | borderStyle: string; 31 | borderColor: string; 32 | }; 33 | }; 34 | export default _default; 35 | -------------------------------------------------------------------------------- /dist/components/accordion.js: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-accordion-title': { 3 | // Layout 4 | display: 'var(--uk-accordion-title-display, flex)', 5 | justifyContent: 'var(--uk-accordion-title-justify, space-between)', 6 | alignItems: 'var(--uk-accordion-title-align, start)', 7 | overflow: 'var(--uk-accordion-title-overflow, hidden)', 8 | padding: 'var(--uk-accordion-title-padding, 1rem 0 1rem 0)', 9 | fontWeight: 'var(--uk-accordion-title-font, 500)' 10 | }, 11 | '.uk-accordion-title:hover': { 12 | textDecoration: 'var(--uk-accordion-title-hover-decoration, underline)' 13 | }, 14 | '.uk-accordion-icon': { 15 | flex: 'var(--uk-accordion-icon-flex, none)', 16 | transition: 'var(--uk-accordion-icon-transition, 300ms transform)', 17 | color: 'var(--uk-accordion-icon-color, hsl(var(--muted-foreground)))' 18 | }, 19 | '.uk-open > .uk-accordion-title > .uk-accordion-icon': { 20 | transform: 'rotate(180deg)' 21 | }, 22 | '.uk-accordion-content': { 23 | display: 'var(--uk-accordion-content-display, flow-root)', 24 | padding: 'var(--uk-accordion-content-padding, 0 0 1rem 0)' 25 | }, 26 | '.uk-accordion-content[hidden]': { 27 | display: 'none' 28 | }, 29 | '.uk-accordion > li': { 30 | borderWidth: 'var(--uk-accordion-item-border-width, 0 0 1px 0)', 31 | borderStyle: 'var(--uk-accordion-item-border-style, solid)', 32 | borderColor: 'var(--uk-accordion-item-border-color, hsl(var(--border)))' 33 | } 34 | }; 35 | -------------------------------------------------------------------------------- /dist/components/alert.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-alert': { 3 | position: string; 4 | padding: string; 5 | backgroundColor: string; 6 | color: string; 7 | borderRadius: string; 8 | borderWidth: string; 9 | borderStyle: string; 10 | borderColor: string; 11 | }; 12 | '.uk-alert-close': { 13 | position: string; 14 | inset: string; 15 | }; 16 | '.uk-alert-destructive': { 17 | '--uk-alert-bg': string; 18 | '--uk-alert-color': string; 19 | '--uk-alert-border-color': string; 20 | }; 21 | '.uk-alert a:not([class])': { 22 | fontWeight: string; 23 | textDecorationLine: string; 24 | textUnderlineOffset: string; 25 | }; 26 | '.uk-alert-title': { 27 | fontWeight: string; 28 | lineHeight: string; 29 | letterSpacing: string; 30 | }; 31 | }; 32 | export default _default; 33 | -------------------------------------------------------------------------------- /dist/components/alert.js: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-alert': { 3 | // Layout 4 | position: 'var(--uk-alert-position, relative)', 5 | padding: 'var(--uk-alert-padding, 1rem 2rem 1rem 1rem)', 6 | // Visual 7 | backgroundColor: 'var(--uk-alert-bg, hsl(var(--muted) / .5))', 8 | color: 'var(--uk-alert-color, hsl(var(--foreground)))', 9 | borderRadius: 'var(--uk-alert-radius, var(--uk-global-radius))', 10 | borderWidth: 'var(--uk-alert-border-width, 1px)', 11 | borderStyle: 'var(--uk-alert-border-style, solid)', 12 | borderColor: 'var(--uk-alert-border-color, hsl(var(--border)))' 13 | }, 14 | '.uk-alert-close': { 15 | // Layout 16 | position: 'var(--uk-alert-close-position, absolute)', 17 | inset: 'var(--uk-alert-close-inset, 1rem 1rem auto auto)' 18 | }, 19 | '.uk-alert-destructive': { 20 | '--uk-alert-bg': 'hsl(var(--destructive))', 21 | '--uk-alert-color': 'hsl(var(--destructive-foreground))', 22 | '--uk-alert-border-color': 'hsl(var(--destructive))' 23 | }, 24 | '.uk-alert a:not([class])': { 25 | // Typography 26 | fontWeight: 'var(--uk-alert-link-font-weight, 500)', 27 | textDecorationLine: 'var(--uk-alert-link-decoration-line, underline)', 28 | textUnderlineOffset: 'var(--uk-alert-link-underline-offset, 4px)' 29 | }, 30 | '.uk-alert-title': { 31 | // Typography 32 | fontWeight: 'var(--uk-alert-title-font-weight, 500)', 33 | lineHeight: 'var(--uk-alert-title-leading, none)', 34 | letterSpacing: 'var(--uk-alert-title-tracking, -0.025em)' // Using Tailwind-like naming 35 | } 36 | }; 37 | -------------------------------------------------------------------------------- /dist/components/avatar.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-avatar': { 3 | backgroundColor: string; 4 | borderRadius: string; 5 | position: string; 6 | display: string; 7 | height: string; 8 | width: string; 9 | alignItems: string; 10 | justifyContent: string; 11 | }; 12 | '.uk-avatar-image': { 13 | height: string; 14 | width: string; 15 | overflow: string; 16 | }; 17 | '.uk-avatar.uk-avatar-rounded': { 18 | borderRadius: string; 19 | }; 20 | '.uk-avatar.uk-avatar-rounded img, .uk-avatar.uk-avatar-rounded .uk-avatar-text': { 21 | borderRadius: string; 22 | }; 23 | '.uk-avatar.uk-avatar-bordered': { 24 | borderWidth: string; 25 | borderColor: string; 26 | padding: string; 27 | }; 28 | '.uk-avatar img': { 29 | borderRadius: string; 30 | height: string; 31 | width: string; 32 | objectFit: string; 33 | }; 34 | '.uk-avatar-dot::after, .uk-avatar-dot-top::after, .uk-avatar-dot-top-right::after, .uk-avatar-dot-right::after, .uk-avatar-dot-bottom-right::after, .uk-avatar-dot-bottom::after, .uk-avatar-dot-bottom-left::after, .uk-avatar-dot-left::after, .uk-avatar-dot-top-left::after': { 35 | content: string; 36 | position: string; 37 | height: string; 38 | width: string; 39 | borderRadius: string; 40 | borderWidth: string; 41 | borderColor: string; 42 | backgroundColor: string; 43 | transform: string; 44 | zIndex: string; 45 | }; 46 | '.uk-avatar-dot::after, .uk-avatar-dot-bottom-right::after': { 47 | bottom: string; 48 | right: string; 49 | transform: string; 50 | }; 51 | '.uk-avatar-dot-top::after': { 52 | top: string; 53 | left: string; 54 | transform: string; 55 | }; 56 | '.uk-avatar-dot-top-right::after': { 57 | top: string; 58 | right: string; 59 | transform: string; 60 | }; 61 | '.uk-avatar-dot-right::after': { 62 | top: string; 63 | right: string; 64 | transform: string; 65 | }; 66 | '.uk-avatar-dot-bottom::after': { 67 | bottom: string; 68 | left: string; 69 | transform: string; 70 | }; 71 | '.uk-avatar-dot-bottom-left::after': { 72 | bottom: string; 73 | left: string; 74 | transform: string; 75 | }; 76 | '.uk-avatar-dot-left::after': { 77 | top: string; 78 | left: string; 79 | transform: string; 80 | }; 81 | '.uk-avatar-dot-top-left::after': { 82 | top: string; 83 | left: string; 84 | transform: string; 85 | }; 86 | '.uk-avatar-text': { 87 | height: string; 88 | width: string; 89 | display: string; 90 | justifyContent: string; 91 | alignItems: string; 92 | borderRadius: string; 93 | }; 94 | }; 95 | export default _default; 96 | -------------------------------------------------------------------------------- /dist/components/badge.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-badge': { 3 | display: string; 4 | justifyContent: string; 5 | alignItems: string; 6 | height: string; 7 | minWidth: string; 8 | padding: string; 9 | fontSize: string; 10 | lineHeight: string; 11 | fontWeight: string; 12 | borderRadius: string; 13 | boxShadow: string; 14 | border: string; 15 | backgroundColor: string; 16 | color: string; 17 | }; 18 | '.uk-badge:hover': { 19 | transitionProperty: string; 20 | transitionDuration: string; 21 | transitionTimingFunction: string; 22 | opacity: string; 23 | }; 24 | '.uk-badge-primary': { 25 | '--uk-badge-border': string; 26 | '--uk-badge-bg': string; 27 | '--uk-badge-color': string; 28 | }; 29 | '.uk-badge-secondary': { 30 | '--uk-badge-border': string; 31 | '--uk-badge-bg': string; 32 | '--uk-badge-color': string; 33 | }; 34 | '.uk-badge-destructive': { 35 | '--uk-badge-border': string; 36 | '--uk-badge-bg': string; 37 | '--uk-badge-color': string; 38 | }; 39 | }; 40 | export default _default; 41 | -------------------------------------------------------------------------------- /dist/components/badge.js: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-badge': { 3 | // Layout 4 | display: 'var(--uk-badge-display, inline-flex)', 5 | justifyContent: 'var(--uk-badge-justify-content, center)', 6 | alignItems: 'var(--uk-badge-align-items, center)', 7 | height: 'var(--uk-badge-height, 1.25rem)', 8 | minWidth: 'var(--uk-badge-min-width, 1.25rem)', 9 | padding: 'var(--uk-badge-padding, 0 0.375rem)', 10 | // Typography 11 | fontSize: 'var(--uk-badge-font-size, var(--uk-global-font-size-s))', 12 | lineHeight: 'var(--uk-badge-leading, var(--uk-global-leading-s))', 13 | fontWeight: 'var(--uk-badge-font-weight, 600)', 14 | // Visual 15 | borderRadius: 'var(--uk-badge-radius, 500px)', 16 | boxShadow: 'var(--uk-badge-box-shadow, var(--uk-global-shadow))', 17 | border: 'var(--uk-badge-border, 1px solid hsl(var(--border)))', 18 | backgroundColor: 'var(--uk-badge-bg, transparent)', 19 | color: 'var(--uk-badge-color, hsl(var(--foreground)))' 20 | // States 21 | }, 22 | '.uk-badge:hover': { 23 | transitionProperty: 'var(--uk-badge-hover-transition-property, background-color)', 24 | transitionDuration: 'var(--uk-badge-hover-transition-duration, 150ms)', 25 | transitionTimingFunction: 'var(--uk-badge-hover-transition-timing, ease-in-out)', 26 | opacity: 'var(--uk-badge-hover-opacity, 0.8)' 27 | }, 28 | '.uk-badge-primary': { 29 | '--uk-badge-border': '1px solid hsl(var(--primary))', 30 | '--uk-badge-bg': 'hsl(var(--primary))', 31 | '--uk-badge-color': 'hsl(var(--primary-foreground))' 32 | }, 33 | '.uk-badge-secondary': { 34 | '--uk-badge-border': '1px solid hsl(var(--secondary))', 35 | '--uk-badge-bg': 'hsl(var(--secondary))', 36 | '--uk-badge-color': 'hsl(var(--secondary-foreground))' 37 | }, 38 | '.uk-badge-destructive': { 39 | '--uk-badge-border': '1px solid hsl(var(--destructive))', 40 | '--uk-badge-bg': 'hsl(var(--destructive))', 41 | '--uk-badge-color': 'hsl(var(--destructive-foreground))' 42 | } 43 | }; 44 | -------------------------------------------------------------------------------- /dist/components/breadcrumb.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-breadcrumb > *': { 3 | display: string; 4 | }; 5 | '.uk-breadcrumb > * > *': { 6 | display: string; 7 | alignItems: string; 8 | color: string; 9 | }; 10 | '.uk-breadcrumb > * > :hover': { 11 | textDecoration: string; 12 | color: string; 13 | transitionProperty: string; 14 | transitionDuration: string; 15 | transitionTimingFunction: string; 16 | }; 17 | '.uk-breadcrumb > :last-child > span, .uk-breadcrumb > :last-child > a:not([href])': { 18 | fontWeight: string; 19 | color: string; 20 | }; 21 | '.uk-breadcrumb > :nth-child(n + 2):not(.uk-first-column)::before': { 22 | content: string; 23 | display: string; 24 | margin: string; 25 | color: string; 26 | }; 27 | '.uk-breadcrumb > .uk-disabled > *': { 28 | opacity: string; 29 | pointerEvents: string; 30 | }; 31 | }; 32 | export default _default; 33 | -------------------------------------------------------------------------------- /dist/components/breadcrumb.js: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-breadcrumb > *': { 3 | // Layout 4 | display: 'var(--uk-breadcrumb-display, contents)' 5 | }, 6 | '.uk-breadcrumb > * > *': { 7 | // Layout 8 | display: 'var(--uk-breadcrumb-item-display, inline-flex)', 9 | alignItems: 'var(--uk-breadcrumb-item-align, center)', 10 | // Typography 11 | color: 'var(--uk-breadcrumb-item-color, hsl(var(--muted-foreground)))' 12 | }, 13 | '.uk-breadcrumb > * > :hover': { 14 | // Typography 15 | textDecoration: 'var(--uk-breadcrumb-item-hover-decoration, none)', 16 | color: 'var(--uk-breadcrumb-item-hover-color, hsl(var(--foreground)))', 17 | // Hover-only transition 18 | transitionProperty: 'var(--uk-breadcrumb-item-hover-transition-property, color)', 19 | transitionDuration: 'var(--uk-breadcrumb-item-hover-transition-duration, 150ms)', 20 | transitionTimingFunction: 'var(--uk-breadcrumb-item-hover-transition-timing, ease-in-out)' 21 | }, 22 | '.uk-breadcrumb > :last-child > span, .uk-breadcrumb > :last-child > a:not([href])': { 23 | // Typography 24 | fontWeight: 'var(--uk-breadcrumb-active-font-weight, 500)', 25 | color: 'var(--uk-breadcrumb-active-color, hsl(var(--foreground)))' 26 | }, 27 | '.uk-breadcrumb > :nth-child(n + 2):not(.uk-first-column)::before': { 28 | // Content 29 | content: 'var(--uk-breadcrumb-divider, "/")', 30 | display: 'var(--uk-breadcrumb-divider-display, inline-block)', 31 | // Layout 32 | margin: 'var(--uk-breadcrumb-divider-margin, 0 0.75rem 0 0.5rem)', 33 | // Typography 34 | color: 'var(--uk-breadcrumb-divider-color, hsl(var(--muted-foreground)))' 35 | }, 36 | '.uk-breadcrumb > .uk-disabled > *': { 37 | // Visual 38 | opacity: 'var(--uk-breadcrumb-disabled-opacity, 0.5)', 39 | pointerEvents: 'none' // static no need to make it a variable 40 | } 41 | }; 42 | -------------------------------------------------------------------------------- /dist/components/card.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-card': { 3 | position: string; 4 | boxSizing: string; 5 | border: string; 6 | borderRadius: string; 7 | boxShadow: string; 8 | backgroundColor: string; 9 | color: string; 10 | }; 11 | '.uk-card-body, .uk-card-header, .uk-card-footer': { 12 | padding: string; 13 | }; 14 | '.uk-card-body > :last-child, .uk-card-header > :last-child, .uk-card-footer > :last-child': { 15 | marginBottom: string; 16 | }; 17 | '.uk-card-title': { 18 | fontSize: string; 19 | fontWeight: string; 20 | lineHeight: string; 21 | letterSpacing: string; 22 | }; 23 | '.uk-card-primary': { 24 | '--uk-card-border': string; 25 | '--uk-card-bg': string; 26 | '--uk-card-color': string; 27 | }; 28 | '.uk-card-secondary': { 29 | '--uk-card-border': string; 30 | '--uk-card-bg': string; 31 | '--uk-card-color': string; 32 | }; 33 | '.uk-card-destructive': { 34 | '--uk-card-border': string; 35 | '--uk-card-bg': string; 36 | '--uk-card-color': string; 37 | }; 38 | '.uk-card-header + .uk-card-body, .uk-card-body + .uk-card-footer': { 39 | paddingTop: string; 40 | }; 41 | '.uk-card-header ~ .uk-card-footer': { 42 | paddingTop: string; 43 | }; 44 | }; 45 | export default _default; 46 | -------------------------------------------------------------------------------- /dist/components/card.js: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-card': { 3 | position: 'relative', // obvious value, no need for var 4 | boxSizing: 'border-box', // obvious value, no need for var 5 | border: 'var(--uk-card-border, 1px solid hsl(var(--border)))', 6 | borderRadius: 'var(--uk-card-radius, var(--uk-global-radius))', 7 | boxShadow: 'var(--uk-card-shadow, var(--uk-global-shadow))', 8 | backgroundColor: 'var(--uk-card-bg, hsl(var(--card)))', 9 | color: 'var(--uk-card-color, hsl(var(--card-foreground)))' 10 | }, 11 | '.uk-card-body, .uk-card-header, .uk-card-footer': { 12 | padding: 'var(--uk-card-padding, 1rem)' 13 | }, 14 | '.uk-card-body > :last-child, .uk-card-header > :last-child, .uk-card-footer > :last-child': { 15 | marginBottom: 'var(--uk-card-last-child-margin, 0)' 16 | }, 17 | '.uk-card-title': { 18 | fontSize: 'var(--uk-card-title-font-size, 1.125rem)', 19 | fontWeight: 'var(--uk-card-title-weight, 600)', 20 | lineHeight: 'var(--uk-card-title-height, 1)', 21 | letterSpacing: 'var(--uk-card-title-tracking, -0.025em)' 22 | }, 23 | // Variants can be simplified 24 | '.uk-card-primary': { 25 | '--uk-card-border': '1px solid transparent', 26 | '--uk-card-bg': 'hsl(var(--primary))', 27 | '--uk-card-color': 'hsl(var(--primary-foreground))' 28 | }, 29 | '.uk-card-secondary': { 30 | '--uk-card-border': '1px solid transparent', 31 | '--uk-card-bg': 'hsl(var(--secondary))', 32 | '--uk-card-color': 'hsl(var(--secondary-foreground))' 33 | }, 34 | '.uk-card-destructive': { 35 | '--uk-card-border': '1px solid transparent', 36 | '--uk-card-bg': 'hsl(var(--destructive))', 37 | '--uk-card-color': 'hsl(var(--destructive-foreground))' 38 | }, 39 | // Spacing adjustments remain the same 40 | '.uk-card-header + .uk-card-body, .uk-card-body + .uk-card-footer': { 41 | paddingTop: 'var(--uk-card-adjacent-padding, 0)' 42 | }, 43 | '.uk-card-header ~ .uk-card-footer': { 44 | paddingTop: 'var(--uk-card-header-footer-padding, 0)' 45 | } 46 | }; 47 | -------------------------------------------------------------------------------- /dist/components/cmd.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-cmd-header': { 3 | display: string; 4 | alignItems: string; 5 | gap: string; 6 | padding: string; 7 | }; 8 | '.uk-cmd-header-input': { 9 | flex: string; 10 | padding: string; 11 | }; 12 | '.uk-cmd-header-input input': { 13 | width: string; 14 | backgroundColor: string; 15 | }; 16 | '.uk-cmd-header-input input:focus': { 17 | outline: string; 18 | }; 19 | '.uk-cmd-header-input input::placeholder': { 20 | color: string; 21 | }; 22 | '.uk-cmd-header-icon': { 23 | width: string; 24 | height: string; 25 | flex: string; 26 | color: string; 27 | }; 28 | '.uk-cmd-header-esc': { 29 | flex: string; 30 | }; 31 | '.uk-cmd-body': { 32 | maxHeight: string; 33 | }; 34 | '.uk-cmd-item-wrapper': { 35 | display: string; 36 | flex: string; 37 | alignItems: string; 38 | }; 39 | '.uk-cmd-item-icon': { 40 | marginRight: string; 41 | width: string; 42 | height: string; 43 | flex: string; 44 | }; 45 | '.uk-cmd-item-text': { 46 | flex: string; 47 | }; 48 | }; 49 | export default _default; 50 | -------------------------------------------------------------------------------- /dist/components/cmd.js: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-cmd-header': { 3 | display: 'flex', // obvious - standard header layout 4 | alignItems: 'center', // obvious - standard header layout 5 | gap: 'var(--uk-cmd-header-gap, 0.5rem)', 6 | padding: 'var(--uk-cmd-header-padding, 0 0.75rem)' 7 | }, 8 | '.uk-cmd-header-input': { 9 | flex: '1', // obvious - should take remaining space 10 | padding: 'var(--uk-cmd-header-input-padding, 0.75rem 0)' 11 | }, 12 | '.uk-cmd-header-input input': { 13 | width: '100%', // obvious - should fill container 14 | backgroundColor: 'transparent' // obvious - input should be transparent 15 | }, 16 | '.uk-cmd-header-input input:focus': { 17 | outline: 'none' 18 | }, 19 | '.uk-cmd-header-input input::placeholder': { 20 | color: 'var(--uk-cmd-input-placeholder-color, hsl(var(--muted-foreground)))' 21 | }, 22 | '.uk-cmd-header-icon': { 23 | width: 'var(--uk-cmd-header-icon-size, 1rem)', 24 | height: 'var(--uk-cmd-header-icon-size, 1rem)', 25 | flex: 'none', // obvious - icon shouldn't grow/shrink 26 | color: 'var(--uk-cmd-header-icon-color, hsl(var(--muted-foreground)))' 27 | }, 28 | '.uk-cmd-header-esc': { 29 | flex: 'none' // obvious - escape button shouldn't grow/shrink 30 | }, 31 | '.uk-cmd-body': { 32 | maxHeight: 'var(--uk-cmd-body-max-height, 20rem)' 33 | }, 34 | '.uk-cmd-item-wrapper': { 35 | display: 'flex', // obvious - standard item layout 36 | flex: '1', // obvious - should take full width 37 | alignItems: 'center' // obvious - vertical alignment 38 | }, 39 | '.uk-cmd-item-icon': { 40 | marginRight: 'var(--uk-cmd-item-icon-margin, 0.5rem)', 41 | width: 'var(--uk-cmd-item-icon-size, 1rem)', 42 | height: 'var(--uk-cmd-item-icon-size, 1rem)', 43 | flex: 'none' // obvious - icon shouldn't grow/shrink 44 | }, 45 | '.uk-cmd-item-text': { 46 | flex: '1' // obvious - should take remaining space 47 | } 48 | }; 49 | -------------------------------------------------------------------------------- /dist/components/comment.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-comment-body': { 3 | display: string; 4 | overflowWrap: string; 5 | wordWrap: string; 6 | }; 7 | '.uk-comment-header': { 8 | display: string; 9 | marginBottom: string; 10 | }; 11 | '.uk-comment-body > :last-child, .uk-comment-header > :last-child': { 12 | marginBottom: string; 13 | }; 14 | '.uk-comment-title': { 15 | fontSize: string; 16 | fontWeight: string; 17 | }; 18 | '.uk-comment-meta': { 19 | fontSize: string; 20 | lineHeight: string; 21 | marginTop: string; 22 | }; 23 | '.uk-comment-list > :nth-child(n + 2)': { 24 | marginTop: string; 25 | }; 26 | '.uk-comment-list .uk-comment ~ ul': { 27 | marginInlineStart: string; 28 | marginTop: string; 29 | borderInlineStartWidth: string; 30 | borderInlineStartStyle: string; 31 | borderInlineStartColor: string; 32 | }; 33 | '.uk-comment-list .uk-comment ~ ul > :nth-child(n + 2)': { 34 | marginTop: string; 35 | }; 36 | '.uk-comment-primary': { 37 | borderRadius: string; 38 | backgroundColor: string; 39 | color: string; 40 | }; 41 | '.uk-comment': { 42 | padding: string; 43 | }; 44 | '.uk-comment-avatar': { 45 | height: string; 46 | width: string; 47 | overflow: string; 48 | borderRadius: string; 49 | backgroundColor: string; 50 | }; 51 | '.uk-comment-avatar img': { 52 | height: string; 53 | width: string; 54 | objectFit: string; 55 | }; 56 | '.uk-comment-list .uk-comment ~ ul > li': { 57 | marginLeft: string; 58 | marginInlineStart: string; 59 | }; 60 | }; 61 | export default _default; 62 | -------------------------------------------------------------------------------- /dist/components/comment.js: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-comment-body': { 3 | display: 'flow-root', // obvious - standard block formatting context 4 | overflowWrap: 'break-word', // obvious - prevent overflow 5 | wordWrap: 'break-word' // obvious - prevent overflow 6 | }, 7 | '.uk-comment-header': { 8 | display: 'flow-root', // obvious - standard block formatting context 9 | marginBottom: 'var(--uk-comment-header-margin, 1.25rem)' 10 | }, 11 | '.uk-comment-body > :last-child, .uk-comment-header > :last-child': { 12 | marginBottom: '0' // obvious - remove margin from last child 13 | }, 14 | // Typography 15 | '.uk-comment-title': { 16 | fontSize: 'var(--uk-comment-title-font-size, 1rem)', 17 | fontWeight: 'var(--uk-comment-title-font-weight, 500)' 18 | }, 19 | '.uk-comment-meta': { 20 | fontSize: 'var(--uk-comment-meta-font-size, var(--uk-global-font-size-s))', 21 | lineHeight: 'var(--uk-comment-meta-leading, var(--uk-global-leading-s))', 22 | marginTop: 'var(--uk-comment-meta-margin-top, 0.25rem)' 23 | }, 24 | '.uk-comment-list > :nth-child(n + 2)': { 25 | marginTop: 'var(--uk-comment-list-gap, 0.75rem)' 26 | }, 27 | // Nested comments 28 | '.uk-comment-list .uk-comment ~ ul': { 29 | marginInlineStart: 'var(--uk-comment-nested-margin, 1.5rem)', 30 | marginTop: 'var(--uk-comment-nested-margin-top, 1.5rem)', 31 | borderInlineStartWidth: 'var(--uk-comment-nested-border-width, 1px)', 32 | borderInlineStartStyle: 'var(--uk-comment-nested-border-style, solid)', 33 | borderInlineStartColor: 'var(--uk-comment-nested-border-color, hsl(var(--border)))' 34 | }, 35 | '.uk-comment-list .uk-comment ~ ul > :nth-child(n + 2)': { 36 | marginTop: 'var(--uk-comment-nested-item-gap, 1.5rem)' 37 | }, 38 | '.uk-comment-primary': { 39 | borderRadius: 'var(--uk-comment-primary-radius, var(--uk-global-radius))', 40 | backgroundColor: 'var(--uk-comment-primary-bg, hsl(var(--primary)))', 41 | color: 'var(--uk-comment-primary-color, hsl(var(--primary-foreground)))' 42 | }, 43 | '.uk-comment': { 44 | padding: 'var(--uk-comment-padding, 0.75rem)' 45 | }, 46 | // Avatar 47 | '.uk-comment-avatar': { 48 | height: 'var(--uk-comment-avatar-size, 2.5rem)', 49 | width: 'var(--uk-comment-avatar-size, 2.5rem)', 50 | overflow: 'hidden', // obvious - contain image 51 | borderRadius: 'var(--uk-comment-avatar-radius, 9999px)', 52 | backgroundColor: 'var(--uk-comment-avatar-bg, hsl(var(--muted)))' 53 | }, 54 | '.uk-comment-avatar img': { 55 | height: '100%', // obvious - fill container 56 | width: '100%', // obvious - fill container 57 | objectFit: 'cover' // obvious - standard image cover 58 | }, 59 | '.uk-comment-list .uk-comment ~ ul > li': { 60 | marginLeft: 'var(--uk-comment-nested-item-margin, 0.75rem)', 61 | marginInlineStart: 'var(--uk-comment-nested-item-margin, 0.75rem)' 62 | } 63 | }; 64 | -------------------------------------------------------------------------------- /dist/components/container.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-container': { 3 | display: string; 4 | boxSizing: string; 5 | maxWidth: string; 6 | marginLeft: string; 7 | marginRight: string; 8 | paddingLeft: string; 9 | paddingRight: string; 10 | }; 11 | '.uk-container > :last-child': { 12 | marginBottom: string; 13 | }; 14 | '.uk-container .uk-container': { 15 | paddingLeft: string; 16 | paddingRight: string; 17 | }; 18 | '.uk-container-xs': { 19 | maxWidth: string; 20 | }; 21 | '.uk-container-sm': { 22 | maxWidth: string; 23 | }; 24 | '.uk-container-lg': { 25 | maxWidth: string; 26 | }; 27 | '.uk-container-xl': { 28 | maxWidth: string; 29 | }; 30 | '.uk-container-expand': { 31 | maxWidth: string; 32 | }; 33 | '.uk-container-expand-left': { 34 | marginLeft: string; 35 | }; 36 | '.uk-container-expand-right': { 37 | marginRight: string; 38 | }; 39 | '.uk-container-item-padding-remove-left, .uk-container-item-padding-remove-right': { 40 | width: string; 41 | }; 42 | '.uk-container-item-padding-remove-left': { 43 | marginLeft: string; 44 | }; 45 | '.uk-container-item-padding-remove-right': { 46 | marginRight: string; 47 | }; 48 | }; 49 | export default _default; 50 | -------------------------------------------------------------------------------- /dist/components/container.js: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-container': { 3 | display: 'var(--uk-container-display, flow-root)', 4 | boxSizing: 'var(--uk-container-box-sizing, content-box)', 5 | maxWidth: 'var(--uk-container-max-width, 1200px)', 6 | marginLeft: 'var(--uk-container-margin-x, auto)', 7 | marginRight: 'var(--uk-container-margin-x, auto)', 8 | paddingLeft: 'var(--uk-container-padding-x, 1rem)', 9 | paddingRight: 'var(--uk-container-padding-x, 1rem)' 10 | }, 11 | '.uk-container > :last-child': { 12 | marginBottom: 'var(--uk-container-last-child-margin, 0)' 13 | }, 14 | '.uk-container .uk-container': { 15 | paddingLeft: 'var(--uk-nested-container-padding-x, 0)', 16 | paddingRight: 'var(--uk-nested-container-padding-x, 0)' 17 | }, 18 | '.uk-container-xs': { 19 | maxWidth: 'var(--uk-container-xs-max-width, 750px)' 20 | }, 21 | '.uk-container-sm': { 22 | maxWidth: 'var(--uk-container-sm-max-width, 900px)' 23 | }, 24 | '.uk-container-lg': { 25 | maxWidth: 'var(--uk-container-lg-max-width, 1400px)' 26 | }, 27 | '.uk-container-xl': { 28 | maxWidth: 'var(--uk-container-xl-max-width, 1600px)' 29 | }, 30 | '.uk-container-expand': { 31 | maxWidth: 'var(--uk-container-expand-max-width, none)' 32 | }, 33 | '.uk-container-expand-left': { 34 | marginLeft: 'var(--uk-container-expand-left-margin, 0)' 35 | }, 36 | '.uk-container-expand-right': { 37 | marginRight: 'var(--uk-container-expand-right-margin, 0)' 38 | }, 39 | '.uk-container-item-padding-remove-left, .uk-container-item-padding-remove-right': { 40 | width: 'var(--uk-container-item-padding-remove-width, calc(100% + 1rem))' 41 | }, 42 | '.uk-container-item-padding-remove-left': { 43 | marginLeft: 'var(--uk-container-item-padding-remove-left-margin, -1rem)' 44 | }, 45 | '.uk-container-item-padding-remove-right': { 46 | marginRight: 'var(--uk-container-item-padding-remove-right-margin, -1rem)' 47 | } 48 | }; 49 | -------------------------------------------------------------------------------- /dist/components/cover.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '[uk-cover]:where(canvas, iframe, svg), [data-uk-cover]:where(canvas, iframe, svg)': { 3 | maxWidth: string; 4 | position: string; 5 | left: string; 6 | top: string; 7 | '--uk-position-translate-x': string; 8 | '--uk-position-translate-y': string; 9 | transform: string; 10 | }; 11 | 'iframe[uk-cover], iframe[data-uk-cover]': { 12 | pointerEvents: string; 13 | }; 14 | '[uk-cover]:where(img, video), [data-uk-cover]:where(img, video)': { 15 | position: string; 16 | top: string; 17 | left: string; 18 | width: string; 19 | height: string; 20 | boxSizing: string; 21 | objectFit: string; 22 | objectPosition: string; 23 | }; 24 | '.uk-cover-container': { 25 | overflow: string; 26 | position: string; 27 | }; 28 | }; 29 | export default _default; 30 | -------------------------------------------------------------------------------- /dist/components/cover.js: -------------------------------------------------------------------------------- 1 | export default { 2 | '[uk-cover]:where(canvas, iframe, svg), [data-uk-cover]:where(canvas, iframe, svg)': { 3 | maxWidth: 'none', 4 | position: 'absolute', 5 | left: '50%', 6 | top: '50%', 7 | '--uk-position-translate-x': '-50%', 8 | '--uk-position-translate-y': '-50%', 9 | transform: 'translate(var(--uk-position-translate-x), var(--uk-position-translate-y))' 10 | }, 11 | 'iframe[uk-cover], iframe[data-uk-cover]': { 12 | pointerEvents: 'none' 13 | }, 14 | '[uk-cover]:where(img, video), [data-uk-cover]:where(img, video)': { 15 | position: 'absolute', 16 | top: '0', 17 | left: '0', 18 | width: '100%', 19 | height: '100%', 20 | boxSizing: 'border-box', 21 | objectFit: 'cover', 22 | objectPosition: 'center' 23 | }, 24 | '.uk-cover-container': { 25 | overflow: 'hidden', 26 | position: 'relative' 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /dist/components/divider.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | "[class*='uk-divider']": { 3 | border: string; 4 | height: string; 5 | }; 6 | '.uk-hr': { 7 | borderColor: string; 8 | }; 9 | '.uk-divider-icon': { 10 | position: string; 11 | height: string; 12 | backgroundImage: string; 13 | backgroundRepeat: string; 14 | backgroundPosition: string; 15 | }; 16 | '.uk-divider-icon::before, .uk-divider-icon::after': { 17 | content: string; 18 | position: string; 19 | top: string; 20 | maxWidth: string; 21 | borderBottom: string; 22 | }; 23 | '.uk-divider-icon::before': { 24 | right: string; 25 | width: string; 26 | }; 27 | '.uk-divider-icon::after': { 28 | left: string; 29 | width: string; 30 | }; 31 | '.uk-divider-sm': { 32 | lineHeight: string; 33 | }; 34 | '.uk-divider-sm::after': { 35 | content: string; 36 | display: string; 37 | width: string; 38 | maxWidth: string; 39 | borderTop: string; 40 | verticalAlign: string; 41 | borderBottom: string; 42 | }; 43 | '.uk-divider-vertical': { 44 | width: string; 45 | height: string; 46 | marginLeft: string; 47 | marginRight: string; 48 | borderLeft: string; 49 | borderBottom: string; 50 | }; 51 | }; 52 | export default _default; 53 | -------------------------------------------------------------------------------- /dist/components/divider.js: -------------------------------------------------------------------------------- 1 | export default { 2 | "[class*='uk-divider']": { 3 | border: 'none', // Static - core reset 4 | height: 'var(--uk-divider-height, 1px)' 5 | }, 6 | '.uk-hr': { 7 | borderColor: 'var(--uk-hr-color, hsl(var(--border)))' 8 | }, 9 | '.uk-divider-icon': { 10 | position: 'relative', // Static - core positioning 11 | height: 'var(--uk-divider-icon-height, 1.25rem)', 12 | backgroundImage: 'var(--uk-divider-icon-image)', 13 | backgroundRepeat: 'no-repeat', // Static - icon behavior 14 | backgroundPosition: '50% 50%' // Static - icon centering 15 | }, 16 | '.uk-divider-icon::before, .uk-divider-icon::after': { 17 | content: '""', // Static - pseudo element 18 | position: 'absolute', // Static - core positioning 19 | top: '50%', // Static - vertical centering 20 | maxWidth: 'calc(50% - (3.5rem / 2))', // Static - line width calculation 21 | borderBottom: 'var(--uk-divider-icon-line-border, 1px solid hsl(var(--border)))' 22 | }, 23 | '.uk-divider-icon::before': { 24 | right: 'calc(50% + (3.5rem / 2))', // Static - line positioning 25 | width: '100%' // Static - full width 26 | }, 27 | '.uk-divider-icon::after': { 28 | left: 'calc(50% + (3.5rem / 2))', // Static - line positioning 29 | width: '100%' // Static - full width 30 | }, 31 | '.uk-divider-sm': { 32 | lineHeight: '0' // Static - remove line spacing 33 | }, 34 | '.uk-divider-sm::after': { 35 | content: '""', // Static - pseudo element 36 | display: 'inline-block', // Static - layout behavior 37 | width: 'var(--uk-divider-sm-width, 100px)', 38 | maxWidth: '100%', // Static - responsive behavior 39 | borderTop: 'var(--uk-divider-sm-border, 1px solid hsl(var(--border)))', 40 | verticalAlign: 'top', // Static - alignment 41 | borderBottom: 'var(--uk-divider-sm-border, 1px solid hsl(var(--border)))' 42 | }, 43 | '.uk-divider-vertical': { 44 | width: 'max-content', // Static - content fitting 45 | height: 'var(--uk-divider-vertical-height, 100px)', 46 | marginLeft: 'auto', // Static - horizontal centering 47 | marginRight: 'auto', // Static - horizontal centering 48 | borderLeft: 'var(--uk-divider-vertical-border, 1px solid hsl(var(--border)))', 49 | borderBottom: 'var(--uk-divider-vertical-border, 1px solid hsl(var(--border)))' 50 | } 51 | }; 52 | -------------------------------------------------------------------------------- /dist/components/dotnav.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-dotnav': { 3 | display: string; 4 | flexWrap: string; 5 | marginLeft: string; 6 | }; 7 | '.uk-dotnav > *': { 8 | flex: string; 9 | paddingLeft: string; 10 | }; 11 | '.uk-dotnav > * > *': { 12 | display: string; 13 | boxSizing: string; 14 | width: string; 15 | height: string; 16 | border: string; 17 | borderRadius: string; 18 | backgroundColor: string; 19 | textIndent: string; 20 | overflow: string; 21 | whiteSpace: string; 22 | transition: string; 23 | transitionProperty: string; 24 | }; 25 | '.uk-dotnav > * > :hover': { 26 | borderColor: string; 27 | backgroundColor: string; 28 | }; 29 | '.uk-dotnav > * > :active': { 30 | borderColor: string; 31 | backgroundColor: string; 32 | }; 33 | '.uk-dotnav > .uk-active > *': { 34 | borderColor: string; 35 | backgroundColor: string; 36 | }; 37 | '.uk-dotnav-vertical': { 38 | flexDirection: string; 39 | marginLeft: string; 40 | marginTop: string; 41 | }; 42 | '.uk-dotnav-vertical > *': { 43 | paddingLeft: string; 44 | paddingTop: string; 45 | }; 46 | }; 47 | export default _default; 48 | -------------------------------------------------------------------------------- /dist/components/dotnav.js: -------------------------------------------------------------------------------- 1 | export default { 2 | // Base dotnav styles 3 | '.uk-dotnav': { 4 | display: 'flex', // Removed variable - fundamental layout 5 | flexWrap: 'wrap', // Removed variable - fundamental layout 6 | marginLeft: 'var(--uk-dotnav-margin-left, -0.75rem)' 7 | }, 8 | // Dotnav items 9 | '.uk-dotnav > *': { 10 | flex: 'none', // Removed variable - fundamental layout 11 | paddingLeft: 'var(--uk-dotnav-item-padding, 0.75rem)' 12 | }, 13 | // Dotnav dots 14 | '.uk-dotnav > * > *': { 15 | // Layout 16 | display: 'block', // Removed variable - fundamental layout 17 | boxSizing: 'border-box', // Removed variable - fundamental box model 18 | width: 'var(--uk-dotnav-dot-size, 10px)', 19 | height: 'var(--uk-dotnav-dot-size, 10px)', // Using same variable for consistent sizing 20 | // Visual 21 | border: 'var(--uk-dotnav-dot-border, 1px solid hsl(var(--primary)))', // Combined border properties 22 | borderRadius: '50%', // Removed variable - fundamental shape for dots 23 | backgroundColor: 'var(--uk-dotnav-dot-bg, transparent)', 24 | // Accessibility 25 | textIndent: '100%', // Removed variable - fundamental accessibility 26 | overflow: 'hidden', // Removed variable - fundamental accessibility 27 | whiteSpace: 'nowrap', // Removed variable - fundamental text behavior 28 | // Transitions 29 | transition: '0.2s ease-in-out', // Removed variable - fundamental transition 30 | transitionProperty: 'background-color, border-color' // Removed variable - fundamental properties 31 | }, 32 | // States 33 | '.uk-dotnav > * > :hover': { 34 | borderColor: 'var(--uk-dotnav-dot-hover-border, transparent)', 35 | backgroundColor: 'var(--uk-dotnav-dot-hover-bg, hsl(var(--primary)))' 36 | }, 37 | '.uk-dotnav > * > :active': { 38 | borderColor: 'var(--uk-dotnav-dot-active-border, transparent)', 39 | backgroundColor: 'var(--uk-dotnav-dot-active-bg, hsl(var(--primary)))' 40 | }, 41 | '.uk-dotnav > .uk-active > *': { 42 | borderColor: 'var(--uk-dotnav-dot-current-border, transparent)', 43 | backgroundColor: 'var(--uk-dotnav-dot-current-bg, hsl(var(--primary)))' 44 | }, 45 | // Vertical variant 46 | '.uk-dotnav-vertical': { 47 | flexDirection: 'column', // Removed variable - fundamental layout 48 | marginLeft: '0', // Removed variable - fundamental reset 49 | marginTop: 'var(--uk-dotnav-vertical-margin-top, -0.75rem)' 50 | }, 51 | '.uk-dotnav-vertical > *': { 52 | paddingLeft: '0', // Removed variable - fundamental reset 53 | paddingTop: 'var(--uk-dotnav-vertical-item-padding-top, 0.75rem)' 54 | } 55 | }; 56 | -------------------------------------------------------------------------------- /dist/components/drop.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-drop': { 3 | display: string; 4 | position: string; 5 | zIndex: string; 6 | boxSizing: string; 7 | width: string; 8 | '--uk-position-offset': string; 9 | '--uk-position-viewport-offset': string; 10 | }; 11 | '.uk-drop.uk-open': { 12 | display: string; 13 | }; 14 | '.uk-drop-stack .uk-drop-grid > *': { 15 | width: string; 16 | }; 17 | '.uk-drop-parent-icon': { 18 | marginLeft: string; 19 | transition: string; 20 | }; 21 | "[aria-expanded='true'] > .uk-drop-parent-icon": { 22 | transform: string; 23 | }; 24 | '.uk-dropbar': { 25 | '--uk-position-offset': string; 26 | '--uk-position-shift-offset': string; 27 | '--uk-position-viewport-offset': string; 28 | width: string; 29 | backgroundColor: string; 30 | }; 31 | '.uk-dropbar > :last-child': { 32 | marginBottom: string; 33 | }; 34 | '.uk-dropbar-lg': { 35 | padding: string; 36 | }; 37 | '.uk-dropdown': { 38 | '--uk-position-offset': string; 39 | '--uk-position-viewport-offset': string; 40 | width: string; 41 | borderRadius: string; 42 | boxShadow: string; 43 | borderWidth: string; 44 | borderStyle: string; 45 | borderColor: string; 46 | backgroundColor: string; 47 | color: string; 48 | }; 49 | '.uk-dropdown-dropbar': { 50 | width: string; 51 | backgroundColor: string; 52 | boxShadow: string; 53 | '--uk-position-viewport-offset': string; 54 | }; 55 | '.uk-dropdown-nav': { 56 | '--uk-nav-item-hover-decoration': string; 57 | '--uk-nav-item-padding': string; 58 | '--uk-nav-item-margin': string; 59 | '--uk-nav-item-display': string; 60 | '--uk-nav-item-align-items': string; 61 | '--uk-nav-item-hover-bg': string; 62 | '--uk-nav-item-hover-color': string; 63 | '--uk-nav-header-padding': string; 64 | '--uk-nav-header-margin': string; 65 | '--uk-nav-header-font-weight': string; 66 | '--uk-nav-divider-margin': string; 67 | '--uk-nav-divider-width': string; 68 | '--uk-nav-divider-style': string; 69 | '--uk-nav-divider-color': string; 70 | 'user-select': string; 71 | }; 72 | '.uk-dropnav-dropbar': { 73 | position: string; 74 | zIndex: string; 75 | padding: string; 76 | left: string; 77 | right: string; 78 | }; 79 | }; 80 | export default _default; 81 | -------------------------------------------------------------------------------- /dist/components/form/custom-select.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-custom-select-search': { 3 | display: string; 4 | alignItems: string; 5 | padding: string; 6 | }; 7 | '.uk-custom-select-search svg': { 8 | margin: string; 9 | opacity: string; 10 | }; 11 | '.uk-custom-select-search input': { 12 | width: string; 13 | padding: string; 14 | backgroundColor: string; 15 | outline: string; 16 | '&::placeholder': { 17 | color: string; 18 | }; 19 | }; 20 | '.uk-custom-select-options': { 21 | maxHeight: string; 22 | }; 23 | '.uk-custom-select-item-wrapper': { 24 | display: string; 25 | flex: string; 26 | alignItems: string; 27 | }; 28 | '.uk-custom-select-item-icon': { 29 | margin: string; 30 | flexShrink: string; 31 | }; 32 | '.uk-custom-select-item-text': { 33 | flex: string; 34 | }; 35 | '.uk-custom-select-item-check': { 36 | margin: string; 37 | flexShrink: string; 38 | }; 39 | }; 40 | export default _default; 41 | -------------------------------------------------------------------------------- /dist/components/form/custom-select.js: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-custom-select-search': { 3 | // Layout 4 | display: 'var(--uk-custom-select-search-display, flex)', 5 | alignItems: 'var(--uk-custom-select-search-align, center)', 6 | padding: 'var(--uk-custom-select-search-padding, 0 0.75rem)' 7 | }, 8 | '.uk-custom-select-search svg': { 9 | // Layout 10 | margin: 'var(--uk-custom-select-search-icon-margin, 0 0.5rem 0 0)', 11 | // Visual 12 | opacity: 'var(--uk-custom-select-search-icon-opacity, 0.5)' 13 | }, 14 | '.uk-custom-select-search input': { 15 | // Layout 16 | width: 'var(--uk-custom-select-search-input-width, 100%)', 17 | padding: 'var(--uk-custom-select-search-input-padding, 0.75rem 0)', 18 | // Visual 19 | backgroundColor: 'transparent', 20 | outline: 'none', 21 | '&::placeholder': { 22 | color: 'var(--uk-custom-select-search-placeholder-color, hsl(var(--muted-foreground)))' 23 | } 24 | }, 25 | '.uk-custom-select-options': { 26 | // Layout 27 | maxHeight: 'var(--uk-custom-select-options-max-height, 10rem)' 28 | }, 29 | '.uk-custom-select-item-wrapper': { 30 | // Layout 31 | display: 'var(--uk-custom-select-item-wrapper-display, flex)', 32 | flex: 'var(--uk-custom-select-item-wrapper-flex, 1)', 33 | alignItems: 'var(--uk-custom-select-item-wrapper-align, center)' 34 | }, 35 | '.uk-custom-select-item-icon': { 36 | // Layout 37 | margin: 'var(--uk-custom-select-item-icon-margin, 0 0.5rem 0 0)', 38 | flexShrink: 'var(--uk-custom-select-item-icon-shrink, 0)' 39 | }, 40 | '.uk-custom-select-item-text': { 41 | // Layout 42 | flex: 'var(--uk-custom-select-item-text-flex, 1)' 43 | }, 44 | '.uk-custom-select-item-check': { 45 | // Layout 46 | margin: 'var(--uk-custom-select-item-check-margin, 0 0 0 0.5rem)', 47 | flexShrink: 'var(--uk-custom-select-item-check-shrink, 0)' 48 | } 49 | }; 50 | -------------------------------------------------------------------------------- /dist/components/form/keyval.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-keyval': { 3 | borderRadius: string; 4 | boxShadow: string; 5 | borderWidth: string; 6 | borderColor: string; 7 | }; 8 | '.uk-keyval-value-wrapper': { 9 | width: string; 10 | }; 11 | '.uk-keyval-actions': { 12 | display: string; 13 | flexWrap: string; 14 | columnGap: string; 15 | }; 16 | }; 17 | export default _default; 18 | -------------------------------------------------------------------------------- /dist/components/form/keyval.js: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-keyval': { 3 | borderRadius: 'var(--uk-global-radius)', 4 | boxShadow: 'var(--uk-global-shadow)', 5 | borderWidth: '1px', 6 | borderColor: 'hsl(var(--border))' 7 | }, 8 | '.uk-keyval-value-wrapper': { width: '100%' }, 9 | '.uk-keyval-actions': { 10 | display: 'flex', 11 | flexWrap: 'nowrap', 12 | columnGap: '0.5rem' 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /dist/components/form/pin.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-input-pin': { 3 | display: string; 4 | alignItems: string; 5 | borderRadius: string; 6 | boxShadow: string; 7 | '--focus-shadow-color': string; 8 | }; 9 | '.uk-input-pin input': { 10 | height: string; 11 | width: string; 12 | position: string; 13 | margin: string; 14 | display: string; 15 | fontSize: string; 16 | lineHeight: string; 17 | textAlign: string; 18 | backgroundColor: string; 19 | outline: string; 20 | borderWidth: string; 21 | borderStyle: string; 22 | borderColor: string; 23 | '&::placeholder': { 24 | color: string; 25 | }; 26 | '&:focus': { 27 | zIndex: string; 28 | outlineWidth: string; 29 | outlineStyle: string; 30 | outlineColor: string; 31 | outlineOffset: string; 32 | boxShadow: string; 33 | transitionProperty: string; 34 | transitionDuration: string; 35 | transitionTimingFunction: string; 36 | '&::placeholder': { 37 | color: string; 38 | }; 39 | }; 40 | }; 41 | '.uk-input-pin.uk-form-destructive': { 42 | '--focus-shadow-color': string; 43 | }; 44 | '.uk-input-pin.uk-disabled input, .uk-input-pin input:disabled': { 45 | opacity: string; 46 | }; 47 | '.uk-input-pin input:first-child': { 48 | borderRadius: string; 49 | }; 50 | '.uk-input-pin input:last-child': { 51 | borderRadius: string; 52 | }; 53 | '.uk-input-pin.uk-input-pin-separated': { 54 | gap: string; 55 | boxShadow: string; 56 | }; 57 | '.uk-input-pin.uk-input-pin-separated input': { 58 | margin: string; 59 | borderRadius: string; 60 | boxShadow: string; 61 | }; 62 | }; 63 | export default _default; 64 | -------------------------------------------------------------------------------- /dist/components/form/rte.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.tiptap p.is-editor-empty:first-child::before': { 3 | content: string; 4 | pointerEvents: string; 5 | cssFloat: string; 6 | height: string; 7 | color: string; 8 | }; 9 | '.ProseMirror': { 10 | overflow: string; 11 | borderWidth: string; 12 | borderColor: string; 13 | backgroundColor: string; 14 | padding: string; 15 | color: string; 16 | }; 17 | '.ProseMirror p:first-child': { 18 | marginTop: string; 19 | }; 20 | '.ProseMirror p:last-child': { 21 | marginBottom: string; 22 | }; 23 | '.ProseMirror-focused': { 24 | outlineWidth: string; 25 | outlineStyle: string; 26 | outlineOffset: string; 27 | boxShadow: string; 28 | transitionProperty: string; 29 | transitionDuration: string; 30 | transitionTimingFunction: string; 31 | }; 32 | '.uk-rte': { 33 | boxShadow: string; 34 | borderRadius: string; 35 | }; 36 | '.uk-rte-header': { 37 | borderTopLeftRadius: string; 38 | borderTopRightRadius: string; 39 | display: string; 40 | flexWrap: string; 41 | overflow: string; 42 | borderWidth: string; 43 | borderBottomWidth: string; 44 | borderColor: string; 45 | padding: string; 46 | }; 47 | '.uk-rte-toolbar': { 48 | marginBottom: string; 49 | display: string; 50 | width: string; 51 | columnGap: string; 52 | overflowX: string; 53 | paddingBottom: string; 54 | }; 55 | '.uk-rte-toolbar-group': { 56 | display: string; 57 | gap: string; 58 | }; 59 | '.uk-rte-toolbar-group button.uk-active': { 60 | backgroundColor: string; 61 | color: string; 62 | }; 63 | '.uk-rte-toolbar-group a': { 64 | cursor: string; 65 | }; 66 | '.uk-rte-footer': { 67 | borderBottomRightRadius: string; 68 | borderBottomLeftRadius: string; 69 | borderWidth: string; 70 | borderTopWidth: string; 71 | borderColor: string; 72 | padding: string; 73 | fontSize: string; 74 | lineHeight: string; 75 | }; 76 | '.uk-rte-link-close': { 77 | position: string; 78 | right: string; 79 | top: string; 80 | }; 81 | }; 82 | export default _default; 83 | -------------------------------------------------------------------------------- /dist/components/form/rte.js: -------------------------------------------------------------------------------- 1 | export default { 2 | '.tiptap p.is-editor-empty:first-child::before': { 3 | content: 'attr(data-placeholder)', 4 | pointerEvents: 'none', 5 | cssFloat: 'left', 6 | height: '0px', 7 | color: 'hsl(var(--muted-foreground))' 8 | }, 9 | '.ProseMirror': { 10 | overflow: 'auto', 11 | borderWidth: '1px', 12 | borderColor: 'hsl(var(--input))', 13 | backgroundColor: 'transparent', 14 | padding: '0.5rem', 15 | color: 'hsl(var(--foreground))' 16 | }, 17 | '.ProseMirror p:first-child': { marginTop: '0px' }, 18 | '.ProseMirror p:last-child': { marginBottom: '0px' }, 19 | '.ProseMirror-focused': { 20 | outlineWidth: 'var(--uk-form-focus-outline-width, 0)', 21 | outlineStyle: 'var(--uk-form-focus-outline-style, none)', 22 | outlineOffset: 'var(--uk-form-focus-outline-offset, 0px)', 23 | boxShadow: 'var(--uk-form-focus-shadow, 0 0 0 0 transparent, 0 0 0 1px hsl(var(--ring)), 0 0 #0000)', 24 | transitionProperty: 'var(--uk-form-focus-transition-property, box-shadow)', 25 | transitionDuration: 'var(--uk-form-focus-transition-duration, 150ms)', 26 | transitionTimingFunction: 'var(--uk-form-focus-transition-timing, ease-in-out)' 27 | }, 28 | '.uk-rte': { 29 | boxShadow: 'var(--uk-global-shadow)', 30 | borderRadius: 'var(--uk-global-radius)' 31 | }, 32 | '.uk-rte-header': { 33 | borderTopLeftRadius: 'var(--uk-global-radius)', 34 | borderTopRightRadius: 'var(--uk-global-radius)', 35 | display: 'flex', 36 | flexWrap: 'nowrap', 37 | overflow: 'hidden', 38 | borderWidth: '1px', 39 | borderBottomWidth: '0px', 40 | borderColor: 'hsl(var(--border))', 41 | padding: '0.5rem' 42 | }, 43 | '.uk-rte-toolbar': { 44 | marginBottom: '-2.5rem', 45 | display: 'flex', 46 | width: '100%', 47 | columnGap: '0.75rem', 48 | overflowX: 'scroll', 49 | paddingBottom: '2.5rem' 50 | }, 51 | '.uk-rte-toolbar-group': { display: 'flex', gap: '0.25rem' }, 52 | '.uk-rte-toolbar-group button.uk-active': { 53 | backgroundColor: 'hsl(var(--muted))', 54 | color: 'hsl(var(--muted-foreground))' 55 | }, 56 | '.uk-rte-toolbar-group a': { cursor: 'pointer' }, 57 | '.uk-rte-footer': { 58 | borderBottomRightRadius: 'var(--uk-global-radius)', 59 | borderBottomLeftRadius: 'var(--uk-global-radius)', 60 | borderWidth: '1px', 61 | borderTopWidth: '0px', 62 | borderColor: 'hsl(var(--border))', 63 | padding: '0.5rem', 64 | fontSize: '0.75rem', 65 | lineHeight: '1rem' 66 | }, 67 | '.uk-rte-link-close': { 68 | position: 'absolute', 69 | right: '0.5rem', 70 | top: '0.5rem' 71 | } 72 | }; 73 | -------------------------------------------------------------------------------- /dist/components/form/tag.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-input-tag': { 3 | backgroundColor: string; 4 | display: string; 5 | minHeight: string; 6 | padding: string; 7 | gap: string; 8 | flexWrap: string; 9 | alignItems: string; 10 | boxShadow: string; 11 | borderRadius: string; 12 | borderWidth: string; 13 | borderStyle: string; 14 | borderColor: string; 15 | '--focus-shadow-color': string; 16 | '&:has(input:focus)': { 17 | outlineWidth: string; 18 | outlineStyle: string; 19 | outlineColor: string; 20 | outlineOffset: string; 21 | boxShadow: string; 22 | }; 23 | }; 24 | '.uk-input-tag.uk-disabled': { 25 | opacity: string; 26 | }; 27 | '.uk-input-tag input': { 28 | backgroundColor: string; 29 | outline: string; 30 | minHeight: string; 31 | flex: string; 32 | padding: string; 33 | color: string; 34 | '&::placeholder': { 35 | color: string; 36 | }; 37 | }; 38 | '.uk-input-tag.uk-form-destructive': { 39 | '--focus-shadow-color': string; 40 | }; 41 | }; 42 | export default _default; 43 | -------------------------------------------------------------------------------- /dist/components/form/tag.js: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-input-tag': { 3 | // Reset 4 | backgroundColor: 'transparent', 5 | // Layout 6 | display: 'var(--uk-input-tag-display, flex)', 7 | minHeight: 'var(--uk-input-tag-min-height, 2.5rem)', 8 | padding: 'var(--uk-input-tag-padding, 0.5rem)', 9 | gap: 'var(--uk-input-tag-gap, 0.25rem)', 10 | flexWrap: 'var(--uk-input-tag-wrap, wrap)', 11 | alignItems: 'var(--uk-input-tag-align, center)', 12 | // Visual 13 | boxShadow: 'var(--uk-input-tag-shadow, var(--uk-form-input-shadow))', 14 | borderRadius: 'var(--uk-input-tag-radius, var(--uk-form-input-radius))', 15 | borderWidth: 'var(--uk-input-tag-border-width, 1px)', 16 | borderStyle: 'var(--uk-input-tag-border-style, solid)', 17 | borderColor: 'var(--uk-input-tag-border-color, hsl(var(--input)))', 18 | // Theme 19 | '--focus-shadow-color': 'hsl(var(--ring))', 20 | // Focus state 21 | '&:has(input:focus)': { 22 | outlineWidth: 'var(--uk-input-tag-focus-outline-width, 2px)', 23 | outlineStyle: 'var(--uk-input-tag-focus-outline-style, solid)', 24 | outlineColor: 'var(--uk-input-tag-focus-outline-color, transparent)', 25 | outlineOffset: 'var(--uk-input-tag-focus-outline-offset, 2px)', 26 | boxShadow: 'var(--uk-input-tag-focus-shadow, 0 0 0 0 transparent, 0 0 0 1px var(--focus-shadow-color), 0 0 #0000)' 27 | } 28 | }, 29 | '.uk-input-tag.uk-disabled': { 30 | opacity: 'var(--uk-input-tag-disabled-opacity, 0.5)' 31 | }, 32 | '.uk-input-tag input': { 33 | // Reset 34 | backgroundColor: 'transparent', 35 | outline: 'none', 36 | // Layout 37 | minHeight: 'var(--uk-input-tag-input-min-height, 1.75rem)', 38 | flex: 'var(--uk-input-tag-input-flex, 1)', 39 | padding: 'var(--uk-input-tag-input-padding, 0 0.25rem)', 40 | // Typography 41 | color: 'var(--uk-input-tag-input-color, hsl(var(--foreground)))', 42 | '&::placeholder': { 43 | color: 'var(--uk-input-tag-placeholder-color, hsl(var(--muted-foreground)))' 44 | } 45 | }, 46 | '.uk-input-tag.uk-form-destructive': { 47 | '--focus-shadow-color': 'hsl(var(--destructive))' 48 | } 49 | }; 50 | -------------------------------------------------------------------------------- /dist/components/icon.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-icon': { 3 | display: string; 4 | color: string; 5 | fill: string; 6 | }; 7 | 'button.uk-icon:not(:disabled)': { 8 | cursor: string; 9 | }; 10 | '.uk-icon::-moz-focus-inner': { 11 | border: string; 12 | padding: string; 13 | }; 14 | ".uk-icon:not(.uk-preserve) [fill*='#']:not(.uk-preserve)": { 15 | fill: string; 16 | }; 17 | ".uk-icon:not(.uk-preserve) [stroke*='#']:not(.uk-preserve)": { 18 | stroke: string; 19 | }; 20 | '.uk-icon > *': { 21 | transform: string; 22 | }; 23 | '.uk-icon-image': { 24 | width: string; 25 | height: string; 26 | backgroundPosition: string; 27 | backgroundRepeat: string; 28 | backgroundSize: string; 29 | verticalAlign: string; 30 | objectFit: string; 31 | maxWidth: string; 32 | }; 33 | }; 34 | export default _default; 35 | -------------------------------------------------------------------------------- /dist/components/icon.js: -------------------------------------------------------------------------------- 1 | export default { 2 | // Base icon styles 3 | '.uk-icon': { 4 | display: 'inline-flex', // Removed variable - fundamental layout 5 | color: 'var(--uk-icon-color, inherit)', 6 | fill: 'var(--uk-icon-fill, currentcolor)' 7 | }, 8 | // Button behavior 9 | 'button.uk-icon:not(:disabled)': { 10 | cursor: 'pointer' // Removed variable - fundamental button behavior 11 | }, 12 | // Browser reset - keep static vendor prefix rule as is 13 | '.uk-icon::-moz-focus-inner': { 14 | border: '0', 15 | padding: '0' 16 | }, 17 | // SVG fill and stroke handling 18 | ".uk-icon:not(.uk-preserve) [fill*='#']:not(.uk-preserve)": { 19 | fill: 'var(--uk-icon-fill-color, currentcolor)' 20 | }, 21 | ".uk-icon:not(.uk-preserve) [stroke*='#']:not(.uk-preserve)": { 22 | stroke: 'var(--uk-icon-stroke-color, currentcolor)' 23 | }, 24 | // Icon positioning 25 | '.uk-icon > *': { 26 | transform: 'var(--uk-icon-transform, translate(0, 0))' 27 | }, 28 | // Image icons 29 | '.uk-icon-image': { 30 | // Dimensions 31 | width: 'var(--uk-icon-image-size, 1.25rem)', 32 | height: 'var(--uk-icon-image-size, 1.25rem)', // Using same variable for consistent sizing 33 | // Keep static properties that don't need customization 34 | backgroundPosition: '50% 50%', 35 | backgroundRepeat: 'no-repeat', 36 | backgroundSize: 'contain', 37 | verticalAlign: 'middle', 38 | objectFit: 'scale-down', 39 | maxWidth: 'none' 40 | } 41 | }; 42 | -------------------------------------------------------------------------------- /dist/components/label.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-label': { 3 | display: string; 4 | alignItems: string; 5 | padding: string; 6 | fontSize: string; 7 | lineHeight: string; 8 | fontWeight: string; 9 | borderRadius: string; 10 | boxShadow: string; 11 | border: string; 12 | backgroundColor: string; 13 | color: string; 14 | }; 15 | '.uk-label:hover': { 16 | transitionProperty: string; 17 | transitionDuration: string; 18 | transitionTimingFunction: string; 19 | opacity: string; 20 | }; 21 | '.uk-label-primary': { 22 | '--uk-label-border': string; 23 | '--uk-label-bg': string; 24 | '--uk-label-color': string; 25 | }; 26 | '.uk-label-secondary': { 27 | '--uk-label-border': string; 28 | '--uk-label-bg': string; 29 | '--uk-label-color': string; 30 | }; 31 | '.uk-label-destructive': { 32 | '--uk-label-border': string; 33 | '--uk-label-bg': string; 34 | '--uk-label-color': string; 35 | }; 36 | }; 37 | export default _default; 38 | -------------------------------------------------------------------------------- /dist/components/label.js: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-label': { 3 | // Layout 4 | display: 'inline-flex', // Removed variable - fundamental layout 5 | alignItems: 'center', // Removed variable - fundamental layout 6 | padding: 'var(--uk-label-padding, 0.125rem 0.625rem)', 7 | // Typography 8 | fontSize: 'var(--uk-label-font-size, var(--uk-global-font-size-s))', 9 | lineHeight: 'var(--uk-label-leading, var(--uk-global-leading-s))', 10 | fontWeight: 'var(--uk-label-font-weight, 600)', 11 | // Visual 12 | borderRadius: 'var(--uk-label-radius, var(--uk-global-radius))', 13 | boxShadow: 'var(--uk-label-shadow, var(--uk-global-shadow))', 14 | border: 'var(--uk-label-border, 1px solid hsl(var(--border)))', 15 | backgroundColor: 'var(--uk-label-bg, transparent)', 16 | color: 'var(--uk-label-color, hsl(var(--foreground)))' 17 | }, 18 | '.uk-label:hover': { 19 | transitionProperty: 'background-color', // Removed variable - fundamental transition 20 | transitionDuration: 'var(--uk-label-hover-duration, 150ms)', 21 | transitionTimingFunction: 'ease-in-out', // Removed variable - fundamental timing 22 | opacity: 'var(--uk-label-hover-opacity, 0.8)' 23 | }, 24 | // Variants using CSS variable reassignment pattern 25 | '.uk-label-primary': { 26 | '--uk-label-border': '1px solid hsl(var(--primary))', 27 | '--uk-label-bg': 'hsl(var(--primary))', 28 | '--uk-label-color': 'hsl(var(--primary-foreground))' 29 | }, 30 | '.uk-label-secondary': { 31 | '--uk-label-border': '1px solid hsl(var(--secondary))', 32 | '--uk-label-bg': 'hsl(var(--secondary))', 33 | '--uk-label-color': 'hsl(var(--secondary-foreground))' 34 | }, 35 | '.uk-label-destructive': { 36 | '--uk-label-border': '1px solid hsl(var(--destructive))', 37 | '--uk-label-bg': 'hsl(var(--destructive))', 38 | '--uk-label-color': 'hsl(var(--destructive-foreground))' 39 | } 40 | }; 41 | -------------------------------------------------------------------------------- /dist/components/leader.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-leader': { 3 | overflow: string; 4 | }; 5 | '.uk-leader-fill::after': { 6 | display: string; 7 | marginLeft: string; 8 | width: string; 9 | content: string; 10 | whiteSpace: string; 11 | }; 12 | '.uk-leader-fill.uk-leader-hide::after': { 13 | display: string; 14 | }; 15 | }; 16 | export default _default; 17 | -------------------------------------------------------------------------------- /dist/components/leader.js: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-leader': { 3 | overflow: 'hidden' // Fundamental - required for text truncation 4 | }, 5 | '.uk-leader-fill::after': { 6 | // Layout 7 | display: 'inline-block', // Fundamental - required for content placement 8 | marginLeft: 'var(--uk-leader-spacing, 1rem)', // Keep as variable for spacing customization 9 | width: '0', // Fundamental - required for dynamic filling 10 | // Content 11 | content: 'attr(data-fill)', // Fundamental - required for leader dots 12 | whiteSpace: 'nowrap' // Fundamental - required for proper filling 13 | }, 14 | '.uk-leader-fill.uk-leader-hide::after': { 15 | display: 'none' // Fundamental - required for hiding behavior 16 | } 17 | }; 18 | -------------------------------------------------------------------------------- /dist/components/lightbox.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-lightbox': { 3 | display: string; 4 | position: string; 5 | top: string; 6 | right: string; 7 | bottom: string; 8 | left: string; 9 | zIndex: string; 10 | opacity: string; 11 | transition: string; 12 | touchAction: string; 13 | background: string; 14 | }; 15 | '.uk-lightbox.uk-open': { 16 | display: string; 17 | opacity: string; 18 | }; 19 | '.uk-lightbox-page': { 20 | overflow: string; 21 | }; 22 | '.uk-lightbox-items > *': { 23 | position: string; 24 | top: string; 25 | right: string; 26 | bottom: string; 27 | left: string; 28 | display: string; 29 | justifyContent: string; 30 | alignItems: string; 31 | willChange: string; 32 | overflow: string; 33 | }; 34 | '.uk-lightbox-items > .uk-active': { 35 | display: string; 36 | }; 37 | '.uk-lightbox-items-fit > *': { 38 | alignItems: string; 39 | }; 40 | '.uk-lightbox-items-fit > * > *': { 41 | maxWidth: string; 42 | maxHeight: string; 43 | }; 44 | '.uk-lightbox-items-fit > * > :not(iframe)': { 45 | width: string; 46 | height: string; 47 | }; 48 | '.uk-lightbox-items.uk-lightbox-items-fit .uk-lightbox-zoom:hover': { 49 | cursor: string; 50 | }; 51 | '.uk-lightbox-items:not(.uk-lightbox-items-fit) .uk-lightbox-zoom:hover': { 52 | cursor: string; 53 | }; 54 | '.uk-lightbox-thumbnav-vertical :where(img, video)': { 55 | maxWidth: string; 56 | }; 57 | '.uk-lightbox-thumbnav:not(.uk-lightbox-thumbnav-vertical) :where(img, video)': { 58 | maxHeight: string; 59 | }; 60 | '.uk-lightbox-thumbnav:empty, .uk-lightbox-dotnav:empty': { 61 | display: string; 62 | }; 63 | '.uk-lightbox-caption': { 64 | backgroundColor: string; 65 | padding: string; 66 | color: string; 67 | }; 68 | '.uk-lightbox-caption:empty': { 69 | display: string; 70 | }; 71 | '.uk-lightbox-iframe': { 72 | width: string; 73 | height: string; 74 | }; 75 | }; 76 | export default _default; 77 | -------------------------------------------------------------------------------- /dist/components/link.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | 'a.uk-link-muted, .uk-link-muted a, .uk-link-toggle .uk-link-muted': { 3 | fontWeight: string; 4 | color: string; 5 | textDecorationLine: string; 6 | textUnderlineOffset: string; 7 | }; 8 | 'a.uk-link-text:hover, .uk-link-text a:hover, .uk-link-toggle:hover .uk-link-text': { 9 | textDecorationLine: string; 10 | textUnderlineOffset: string; 11 | }; 12 | 'a.uk-link-reset, .uk-link-reset a': { 13 | textDecoration: string; 14 | fontWeight: string; 15 | }; 16 | '.uk-link-toggle': { 17 | textDecoration: string; 18 | }; 19 | '.uk-link': { 20 | fontWeight: string; 21 | textDecorationLine: string; 22 | textUnderlineOffset: string; 23 | }; 24 | }; 25 | export default _default; 26 | -------------------------------------------------------------------------------- /dist/components/link.js: -------------------------------------------------------------------------------- 1 | export default { 2 | // Muted variant 3 | 'a.uk-link-muted, .uk-link-muted a, .uk-link-toggle .uk-link-muted': { 4 | fontWeight: 'var(--uk-link-muted-font-weight, 500)', 5 | color: 'var(--uk-link-muted-color, hsl(var(--muted-foreground)))', 6 | textDecorationLine: 'underline', // Fundamental link behavior 7 | textUnderlineOffset: 'var(--uk-link-underline-offset, 4px)' 8 | }, 9 | // Text variant hover state 10 | 'a.uk-link-text:hover, .uk-link-text a:hover, .uk-link-toggle:hover .uk-link-text': { 11 | textDecorationLine: 'underline', // Fundamental link behavior 12 | textUnderlineOffset: 'var(--uk-link-underline-offset, 4px)' 13 | }, 14 | // Reset variant (no variables needed - purpose is to reset) 15 | 'a.uk-link-reset, .uk-link-reset a': { 16 | textDecoration: 'none !important', // Fundamental reset 17 | fontWeight: '400 !important' // Fundamental reset 18 | }, 19 | // Toggle variant (no variables needed - functional class) 20 | '.uk-link-toggle': { 21 | textDecoration: 'none !important' // Fundamental behavior 22 | }, 23 | // Base link style 24 | '.uk-link': { 25 | fontWeight: 'var(--uk-link-font-weight, 500)', 26 | textDecorationLine: 'underline', // Fundamental link behavior 27 | textUnderlineOffset: 'var(--uk-link-underline-offset, 4px)' 28 | } 29 | }; 30 | -------------------------------------------------------------------------------- /dist/components/list.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-list > *': { 3 | MozColumnBreakInside: string; 4 | breakInside: string; 5 | }; 6 | '.uk-list > * > :last-child': { 7 | marginBottom: string; 8 | }; 9 | '.uk-list > :nth-child(n+2), .uk-list > * > ul': { 10 | marginTop: string; 11 | }; 12 | '.uk-list-disc, .uk-list-circle, .uk-list-square, .uk-list-decimal, .uk-list-hyphen': { 13 | paddingLeft: string; 14 | }; 15 | '.uk-list-disc': { 16 | listStyleType: string; 17 | }; 18 | '.uk-list-circle': { 19 | listStyleType: string; 20 | }; 21 | '.uk-list-square': { 22 | listStyleType: string; 23 | }; 24 | '.uk-list-decimal': { 25 | listStyleType: string; 26 | }; 27 | '.uk-list-hyphen': { 28 | listStyleType: string; 29 | }; 30 | '.uk-list-muted > ::marker': { 31 | color: string; 32 | }; 33 | '.uk-list-primary > ::marker': { 34 | color: string; 35 | }; 36 | '.uk-list-secondary > ::marker': { 37 | color: string; 38 | }; 39 | '.uk-list-bullet > *': { 40 | position: string; 41 | paddingLeft: string; 42 | }; 43 | '.uk-list-bullet > ::before': { 44 | content: string; 45 | position: string; 46 | top: string; 47 | left: string; 48 | width: string; 49 | height: string; 50 | backgroundImage: string; 51 | backgroundRepeat: string; 52 | backgroundPosition: string; 53 | }; 54 | '.uk-list-divider > :nth-child(n+2)': { 55 | marginTop: string; 56 | borderTopWidth: string; 57 | borderColor: string; 58 | paddingTop: string; 59 | }; 60 | '.uk-list-striped > *': { 61 | padding: string; 62 | }; 63 | '.uk-list-striped > *:nth-of-type(odd)': { 64 | borderTopWidth: string; 65 | borderBottomWidth: string; 66 | borderColor: string; 67 | }; 68 | '.uk-list-striped > :nth-of-type(odd)': { 69 | backgroundColor: string; 70 | }; 71 | '.uk-list-striped > :nth-child(n+2)': { 72 | marginTop: string; 73 | }; 74 | }; 75 | export default _default; 76 | -------------------------------------------------------------------------------- /dist/components/list.js: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-list > *': { 3 | MozColumnBreakInside: 'avoid', 4 | breakInside: 'avoid-column' 5 | }, 6 | '.uk-list > * > :last-child': { marginBottom: '0' }, 7 | '.uk-list > :nth-child(n+2), .uk-list > * > ul': { 8 | marginTop: 'var(--uk-list-item-margin-top, 0.5rem)' 9 | }, 10 | '.uk-list-disc, .uk-list-circle, .uk-list-square, .uk-list-decimal, .uk-list-hyphen': { 11 | paddingLeft: 'var(--uk-list-indent, 32px)' 12 | }, 13 | '.uk-list-disc': { listStyleType: 'disc' }, 14 | '.uk-list-circle': { listStyleType: 'circle' }, 15 | '.uk-list-square': { listStyleType: 'square' }, 16 | '.uk-list-decimal': { listStyleType: 'decimal' }, 17 | '.uk-list-hyphen': { listStyleType: "'–  '" }, 18 | '.uk-list-muted > ::marker': { 19 | color: 'var(--uk-list-marker-muted-color, hsl(var(--muted-foreground)))' 20 | }, 21 | '.uk-list-primary > ::marker': { 22 | color: 'var(--uk-list-marker-primary-color, hsl(var(--primary)))' 23 | }, 24 | '.uk-list-secondary > ::marker': { 25 | color: 'var(--uk-list-marker-secondary-color, hsl(var(--secondary-foreground)))' 26 | }, 27 | '.uk-list-bullet > *': { 28 | position: 'relative', 29 | paddingLeft: 'var(--uk-list-bullet-indent, 32px)' 30 | }, 31 | '.uk-list-bullet > ::before': { 32 | content: '""', 33 | position: 'absolute', 34 | top: '0', 35 | left: '0', 36 | width: 'var(--uk-list-bullet-width, 32px)', 37 | height: 'var(--uk-list-bullet-height, 1.5em)', 38 | backgroundImage: 'var(--uk-list-bullet-image)', 39 | backgroundRepeat: 'no-repeat', 40 | backgroundPosition: '50% 50%' 41 | }, 42 | '.uk-list-divider > :nth-child(n+2)': { 43 | marginTop: 'var(--uk-list-divider-item-margin-top, 0.5rem)', 44 | borderTopWidth: 'var(--uk-list-divider-border-width, 1px)', 45 | borderColor: 'var(--uk-list-divider-border-color, hsl(var(--border)))', 46 | paddingTop: 'var(--uk-list-divider-item-padding-top, 0.5rem)' 47 | }, 48 | '.uk-list-striped > *': { padding: 'var(--uk-list-striped-item-padding, 0.5rem)' }, 49 | '.uk-list-striped > *:nth-of-type(odd)': { 50 | borderTopWidth: 'var(--uk-list-striped-border-width, 1px)', // Shorthand variable 51 | borderBottomWidth: 'var(--uk-list-striped-border-width, 1px)', // Shorthand variable 52 | borderColor: 'var(--uk-list-striped-border-color, hsl(var(--border)))' 53 | }, 54 | '.uk-list-striped > :nth-of-type(odd)': { 55 | backgroundColor: 'var(--uk-list-striped-background-color, hsl(var(--muted) / 0.5))' 56 | }, 57 | '.uk-list-striped > :nth-child(n+2)': { marginTop: '0' } 58 | }; 59 | -------------------------------------------------------------------------------- /dist/components/modal.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-modal': { 3 | display: string; 4 | position: string; 5 | top: string; 6 | right: string; 7 | bottom: string; 8 | left: string; 9 | zIndex: string; 10 | overflowY: string; 11 | backgroundColor: string; 12 | opacity: string; 13 | transition: string; 14 | padding: string; 15 | WebkitBackdropFilter: string; 16 | backdropFilter: string; 17 | }; 18 | '.uk-modal.uk-open': { 19 | opacity: string; 20 | }; 21 | '.uk-modal-page': { 22 | overflow: string; 23 | }; 24 | '.uk-modal-dialog': { 25 | position: string; 26 | boxSizing: string; 27 | margin: string; 28 | width: string; 29 | maxWidth: string; 30 | opacity: string; 31 | transform: string; 32 | transition: string; 33 | transitionProperty: string; 34 | borderRadius: string; 35 | overflow: string; 36 | borderWidth: string; 37 | borderStyle: string; 38 | borderColor: string; 39 | backgroundColor: string; 40 | }; 41 | '.uk-open > .uk-modal-dialog': { 42 | opacity: string; 43 | transform: string; 44 | }; 45 | '.uk-modal-container .uk-modal-dialog': { 46 | width: string; 47 | }; 48 | '.uk-modal-full': { 49 | padding: string; 50 | background: string; 51 | }; 52 | '.uk-modal-full .uk-modal-dialog': { 53 | margin: string; 54 | maxWidth: string; 55 | transform: string; 56 | width: string; 57 | borderRadius: string; 58 | borderStyle: string; 59 | }; 60 | '.uk-modal-body': { 61 | display: string; 62 | padding: string; 63 | }; 64 | '.uk-modal-header': { 65 | display: string; 66 | padding: string; 67 | }; 68 | '.uk-modal-footer': { 69 | display: string; 70 | padding: string; 71 | }; 72 | '.uk-modal-body > :last-child, .uk-modal-header > :last-child, .uk-modal-footer > :last-child': { 73 | marginBottom: string; 74 | }; 75 | '.uk-modal-title': { 76 | fontSize: string; 77 | fontWeight: string; 78 | lineHeight: string; 79 | letterSpacing: string; 80 | }; 81 | '.uk-modal-header + .uk-modal-body, .uk-modal-body + .uk-modal-footer': { 82 | paddingTop: string; 83 | }; 84 | '.uk-modal-header ~ .uk-modal-footer': { 85 | paddingTop: string; 86 | }; 87 | '.uk-modal-header + .uk-modal-body.uk-overflow-auto': { 88 | paddingBottom: string; 89 | }; 90 | '.uk-modal-body.uk-overflow-auto + .uk-modal-footer': { 91 | paddingTop: string; 92 | }; 93 | }; 94 | export default _default; 95 | -------------------------------------------------------------------------------- /dist/components/notification.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-notification': { 3 | position: string; 4 | top: string; 5 | left: string; 6 | zIndex: string; 7 | boxSizing: string; 8 | width: string; 9 | }; 10 | '.uk-notification-top-right, .uk-notification-bottom-right': { 11 | left: string; 12 | right: string; 13 | }; 14 | '.uk-notification-top-center, .uk-notification-bottom-center': { 15 | left: string; 16 | marginLeft: string; 17 | }; 18 | '.uk-notification-bottom-left, .uk-notification-bottom-right, .uk-notification-bottom-center': { 19 | top: string; 20 | bottom: string; 21 | }; 22 | '.uk-notification-message': { 23 | position: string; 24 | cursor: string; 25 | borderRadius: string; 26 | boxShadow: string; 27 | border: string; 28 | backgroundColor: string; 29 | padding: string; 30 | color: string; 31 | }; 32 | '* + .uk-notification-message': { 33 | marginTop: string; 34 | }; 35 | '.uk-notification-close': { 36 | display: string; 37 | position: string; 38 | right: string; 39 | top: string; 40 | padding: string; 41 | color: string; 42 | }; 43 | '.uk-notification-message:hover .uk-notification-close': { 44 | display: string; 45 | }; 46 | '.uk-notification-message-primary': { 47 | '--uk-notification-border': string; 48 | '--uk-notification-bg': string; 49 | '--uk-notification-color': string; 50 | '--uk-notification-close-color': string; 51 | }; 52 | '.uk-notification-message-secondary': { 53 | '--uk-notification-border': string; 54 | '--uk-notification-bg': string; 55 | '--uk-notification-color': string; 56 | '--uk-notification-close-color': string; 57 | }; 58 | '.uk-notification-message-destructive': { 59 | '--uk-notification-border': string; 60 | '--uk-notification-bg': string; 61 | '--uk-notification-color': string; 62 | '--uk-notification-close-color': string; 63 | }; 64 | }; 65 | export default _default; 66 | -------------------------------------------------------------------------------- /dist/components/placeholder.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-placeholder': { 3 | marginBottom: string; 4 | padding: string; 5 | background: string; 6 | border: string; 7 | borderColor: string; 8 | }; 9 | '.uk-placeholder > :last-child': { 10 | marginBottom: string; 11 | }; 12 | }; 13 | export default _default; 14 | -------------------------------------------------------------------------------- /dist/components/placeholder.js: -------------------------------------------------------------------------------- 1 | export default { 2 | // Placeholder 3 | '.uk-placeholder': { 4 | marginBottom: 'var(--uk-placeholder-margin-bottom, 1.25rem)', 5 | padding: 'var(--uk-placeholder-padding, 2rem 2rem)', 6 | background: 'var(--uk-placeholder-background, transparent)', 7 | border: 'var(--uk-placeholder-border, 1px dashed)', // Shorthand variable for border 8 | borderColor: 'var(--uk-placeholder-border-color, hsl(var(--border)))' // borderColor is already using a variable, encapsulate it too for component level customization 9 | }, 10 | '.uk-placeholder > :last-child': { 11 | marginBottom: '0' // obvious value, keep static 12 | } 13 | }; 14 | -------------------------------------------------------------------------------- /dist/components/print.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '@media print': { 3 | '*,*::before,*::after': { 4 | background: string; 5 | color: string; 6 | boxShadow: string; 7 | textShadow: string; 8 | }; 9 | 'a,a:visited': { 10 | textDecoration: string; 11 | }; 12 | 'pre,blockquote': { 13 | border: string; 14 | pageBreakInside: string; 15 | }; 16 | thead: { 17 | display: string; 18 | }; 19 | 'tr,img': { 20 | pageBreakInside: string; 21 | }; 22 | img: { 23 | maxWidth: string; 24 | }; 25 | '@page': { 26 | margin: string; 27 | }; 28 | 'p,h2,h3': { 29 | orphans: string; 30 | widows: string; 31 | }; 32 | 'h2,h3': { 33 | pageBreakAfter: string; 34 | }; 35 | }; 36 | }; 37 | export default _default; 38 | -------------------------------------------------------------------------------- /dist/components/print.js: -------------------------------------------------------------------------------- 1 | export default { 2 | '@media print': { 3 | '*,*::before,*::after': { 4 | background: 'transparent !important', 5 | color: 'black !important', 6 | boxShadow: 'none !important', 7 | textShadow: 'none !important' 8 | }, 9 | 'a,a:visited': { 10 | textDecoration: 'underline' 11 | }, 12 | 'pre,blockquote': { 13 | border: '1px solid #999', 14 | pageBreakInside: 'avoid' 15 | }, 16 | thead: { 17 | display: 'table-header-group' 18 | }, 19 | 'tr,img': { 20 | pageBreakInside: 'avoid' 21 | }, 22 | img: { 23 | maxWidth: '100% !important' 24 | }, 25 | '@page': { 26 | margin: '0.5cm' 27 | }, 28 | 'p,h2,h3': { 29 | orphans: '3', 30 | widows: '3' 31 | }, 32 | 'h2,h3': { 33 | pageBreakAfter: 'avoid' 34 | } 35 | } 36 | }; 37 | -------------------------------------------------------------------------------- /dist/components/progress.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-progress': { 3 | verticalAlign: string; 4 | display: string; 5 | width: string; 6 | border: string; 7 | marginBottom: string; 8 | height: string; 9 | borderRadius: string; 10 | overflow: string; 11 | backgroundColor: string; 12 | }; 13 | '.uk-progress::-webkit-progress-bar': { 14 | backgroundColor: string; 15 | }; 16 | '.uk-progress::-webkit-progress-value': { 17 | transition: string; 18 | backgroundColor: string; 19 | }; 20 | '.uk-progress::-moz-progress-bar': { 21 | transition: string; 22 | backgroundColor: string; 23 | }; 24 | }; 25 | export default _default; 26 | -------------------------------------------------------------------------------- /dist/components/progress.js: -------------------------------------------------------------------------------- 1 | export default { 2 | // Progress 3 | '.uk-progress': { 4 | verticalAlign: 'baseline', // obvious value 5 | display: 'block', // obvious value 6 | width: '100%', // obvious value 7 | border: '0', // obvious value 8 | marginBottom: 'var(--uk-progress-margin-bottom, 1.25rem)', 9 | height: 'var(--uk-progress-height, 1rem)', 10 | borderRadius: 'var(--uk-progress-radius, 500px)', 11 | overflow: 'hidden', // obvious value 12 | backgroundColor: 'var(--uk-progress-track-color, hsl(var(--primary) / 0.2))' // Renamed for clarity - track color 13 | }, 14 | '.uk-progress::-webkit-progress-bar': { 15 | backgroundColor: 'transparent' // browser specific, obvious value 16 | }, 17 | '.uk-progress::-webkit-progress-value': { 18 | transition: 'var(--uk-progress-transition, width 0.6s ease)', // Shorthand variable for transition 19 | backgroundColor: 'var(--uk-progress-value-color, hsl(var(--primary)))' // Renamed for clarity - value color 20 | }, 21 | '.uk-progress::-moz-progress-bar': { 22 | transition: 'var(--uk-progress-transition, width 0.6s ease)', // Reusing the same variable for consistency 23 | backgroundColor: 'var(--uk-progress-value-color, hsl(var(--primary)))' // Reusing the same variable for consistency 24 | } 25 | }; 26 | -------------------------------------------------------------------------------- /dist/components/root.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | ':root': { 3 | '--chart-1': string; 4 | '--chart-2': string; 5 | '--chart-3': string; 6 | '--chart-4': string; 7 | '--chart-5': string; 8 | '--uk-breakpoint-s': string; 9 | '--uk-breakpoint-m': string; 10 | '--uk-breakpoint-l': string; 11 | '--uk-breakpoint-xl': string; 12 | '--uk-global-blur': string; 13 | '--uk-global-font-size': string; 14 | '--uk-global-leading': string; 15 | '--uk-global-font-size-s': string; 16 | '--uk-global-leading-s': string; 17 | '--uk-global-radius-s': string; 18 | '--uk-global-radius': string; 19 | '--uk-global-shadow-s': string; 20 | '--uk-global-shadow': string; 21 | '--uk-btn-font-size': string; 22 | '--uk-btn-leading': string; 23 | '--uk-btn-padding': string; 24 | '--uk-btn-height': string; 25 | '--uk-btn-radius': string; 26 | '--uk-btn-shadow': string; 27 | '--uk-cal-cell-size': string; 28 | '--uk-cal-cell-radius': string; 29 | '--uk-cal-cell-header-font-size': string; 30 | '--uk-cal-cell-body-font-size': string; 31 | '--uk-datepicker-spacing': string; 32 | '--uk-form-input-radius': string; 33 | '--uk-form-input-shadow': string; 34 | '--uk-form-input-height': string; 35 | '--uk-form-input-font-size': string; 36 | '--uk-form-input-leading': string; 37 | '--uk-form-input-padding': string; 38 | '--uk-form-list-image-position': string; 39 | '--uk-form-toggle-switch-shadow': string; 40 | '--uk-form-radio-radius': string; 41 | '--uk-form-radio-shadow': string; 42 | '--uk-leader-fill-content': string; 43 | '--uk-modal-padding': string; 44 | '--uk-modal-padding-header': string; 45 | '--uk-modal-padding-body': string; 46 | '--uk-modal-padding-footer': string; 47 | '--uk-modal-padding-top-between': string; 48 | '--uk-modal-padding-top-after-header': string; 49 | '--uk-modal-padding-bottom-scrollable': string; 50 | '--uk-modal-padding-top-after-scrollable': string; 51 | '--uk-modal-radius': string; 52 | '--uk-modal-overlay-blur': string; 53 | '--uk-offcanvas-bar-width': string; 54 | '--uk-offcanvas-bar-width-i': string; 55 | '--uk-offcanvas-overlay-blur': string; 56 | '--uk-nav-item-padding': string; 57 | '--uk-nav-item-margin': string; 58 | '--uk-nav-sub-item-padding': string; 59 | '--uk-nav-sub-item-margin': string; 60 | '--uk-nav-sub-width': string; 61 | '--uk-position-margin-offset': string; 62 | }; 63 | '.dark': { 64 | '--chart-1': string; 65 | '--chart-5': string; 66 | '--chart-3': string; 67 | '--chart-4': string; 68 | '--chart-2': string; 69 | }; 70 | }; 71 | export default _default; 72 | -------------------------------------------------------------------------------- /dist/components/slider.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-slider': { 3 | WebkitTapHighlightColor: string; 4 | }; 5 | '.uk-slider-container': { 6 | overflow: string[]; 7 | }; 8 | '.uk-slider-items': { 9 | display: string; 10 | willChange: string; 11 | position: string; 12 | touchAction: string; 13 | }; 14 | '.uk-slider-items > *': { 15 | flex: string; 16 | boxSizing: string; 17 | maxWidth: string; 18 | position: string; 19 | }; 20 | '.uk-slidenav': { 21 | boxShadow: string; 22 | display: string; 23 | height: string; 24 | width: string; 25 | alignItems: string; 26 | justifyContent: string; 27 | borderRadius: string; 28 | borderWidth: string; 29 | borderColor: string; 30 | backgroundColor: string; 31 | }; 32 | '.uk-slidenav:hover': { 33 | backgroundColor: string; 34 | color: string; 35 | }; 36 | '.uk-slidenav:active': { 37 | backgroundColor: string; 38 | color: string; 39 | }; 40 | '.uk-slidenav-lg': { 41 | padding: string; 42 | }; 43 | '.uk-slidenav-container': { 44 | display: string; 45 | }; 46 | '.uk-slidenav svg': { 47 | height: string; 48 | width: string; 49 | }; 50 | '.uk-slideshow': { 51 | WebkitTapHighlightColor: string; 52 | }; 53 | '.uk-slideshow-items': { 54 | position: string; 55 | zIndex: string; 56 | margin: string; 57 | padding: string; 58 | listStyle: string; 59 | overflow: string; 60 | WebkitTouchCallout: string; 61 | touchAction: string; 62 | }; 63 | '.uk-slideshow-items > *': { 64 | position: string; 65 | top: string; 66 | left: string; 67 | right: string; 68 | bottom: string; 69 | overflow: string; 70 | willChange: string; 71 | }; 72 | '.uk-slideshow-items > :not(.uk-active)': { 73 | display: string; 74 | }; 75 | }; 76 | export default _default; 77 | -------------------------------------------------------------------------------- /dist/components/sortable.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-sortable': { 3 | position: string; 4 | }; 5 | '.uk-sortable > :last-child': { 6 | marginBottom: string; 7 | }; 8 | '.uk-sortable-drag': { 9 | position: string; 10 | zIndex: string; 11 | pointerEvents: string; 12 | }; 13 | '.uk-sortable-placeholder': { 14 | opacity: string; 15 | pointerEvents: string; 16 | }; 17 | '.uk-sortable-empty': { 18 | minHeight: string; 19 | }; 20 | '.uk-sortable-handle:hover': { 21 | cursor: string; 22 | }; 23 | }; 24 | export default _default; 25 | -------------------------------------------------------------------------------- /dist/components/sortable.js: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-sortable': { 3 | position: 'relative' // obvious value, required for positioning sortable items 4 | }, 5 | '.uk-sortable > :last-child': { 6 | marginBottom: '0' // obvious value, remove bottom margin from last child 7 | }, 8 | '.uk-sortable-drag': { 9 | position: 'fixed !important', // important for dragging functionality, obvious value 10 | zIndex: 'var(--uk-sortable-drag-z-index, 1050) !important', // Customizable z-index, important for stacking above other elements 11 | pointerEvents: 'none' // obvious value, prevent interaction with dragged element 12 | }, 13 | '.uk-sortable-placeholder': { 14 | opacity: 'var(--uk-sortable-placeholder-opacity, 0)', // Customizable placeholder opacity, default to fully transparent 15 | pointerEvents: 'none' // obvious value, placeholder should not be interactive 16 | }, 17 | '.uk-sortable-empty': { 18 | minHeight: 'var(--uk-sortable-empty-min-height, 3.5rem)' // Customizable minimum height for empty sortable area 19 | }, 20 | '.uk-sortable-handle:hover': { 21 | cursor: 'var(--uk-sortable-handle-hover-cursor, move)' // Customizable cursor on handle hover, default to 'move' 22 | } 23 | }; 24 | -------------------------------------------------------------------------------- /dist/components/spinner.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-spinner > *': { 3 | animation: string; 4 | }; 5 | '@keyframes uk-spinner-rotate': { 6 | '0%': { 7 | transform: string; 8 | }; 9 | '100%': { 10 | transform: string; 11 | }; 12 | }; 13 | '.uk-spinner > * > *': { 14 | strokeDasharray: string; 15 | strokeDashoffset: string; 16 | transformOrigin: string; 17 | animation: string; 18 | strokeWidth: string; 19 | strokeLinecap: string; 20 | }; 21 | '@keyframes uk-spinner-dash': { 22 | '0%': { 23 | strokeDashoffset: string; 24 | }; 25 | '50%': { 26 | strokeDashoffset: string; 27 | transform: string; 28 | }; 29 | '100%': { 30 | strokeDashoffset: string; 31 | transform: string; 32 | }; 33 | }; 34 | '.uk-spinner': {}; 35 | }; 36 | export default _default; 37 | -------------------------------------------------------------------------------- /dist/components/spinner.js: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-spinner > *': { 3 | animation: 'uk-spinner-rotate 1.4s linear infinite' 4 | }, 5 | '@keyframes uk-spinner-rotate': { 6 | '0%': { 7 | transform: 'rotate(0deg)' 8 | }, 9 | '100%': { 10 | transform: 'rotate(270deg)' 11 | } 12 | }, 13 | '.uk-spinner > * > *': { 14 | strokeDasharray: '88px', 15 | strokeDashoffset: '0', 16 | transformOrigin: 'center', 17 | animation: 'uk-spinner-dash 1.4s ease-in-out infinite', 18 | strokeWidth: '1', 19 | strokeLinecap: 'round' 20 | }, 21 | '@keyframes uk-spinner-dash': { 22 | '0%': { 23 | strokeDashoffset: '88px' 24 | }, 25 | '50%': { 26 | strokeDashoffset: '22px', 27 | transform: 'rotate(135deg)' 28 | }, 29 | '100%': { 30 | strokeDashoffset: '88px', 31 | transform: 'rotate(450deg)' 32 | } 33 | }, 34 | '.uk-spinner': {} 35 | }; 36 | -------------------------------------------------------------------------------- /dist/components/stepper.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-stepper': { 3 | display: string; 4 | }; 5 | '.uk-stepper-counter': { 6 | counterReset: string; 7 | }; 8 | '.uk-stepper-counter li': { 9 | counterIncrement: string; 10 | }; 11 | '.uk-stepper-default': { 12 | justifyContent: string; 13 | color: string; 14 | flexWrap: string; 15 | fontSize: string; 16 | }; 17 | '.uk-stepper-default li': { 18 | display: string; 19 | alignItems: string; 20 | width: string; 21 | textWrap: string; 22 | position: string; 23 | }; 24 | '.uk-stepper-default:has(li.uk-active) li.uk-active ~ li': { 25 | color: string; 26 | }; 27 | '.uk-stepper-default li.uk-active,.uk-stepper-default li.uk-stepper-checked, .uk-stepper-default:has(li.uk-active) li': { 28 | color: string; 29 | }; 30 | '.uk-stepper-default .uk-stepper-checked a::before': { 31 | content: string; 32 | display: string; 33 | backgroundImage: string; 34 | backgroundRepeat: string; 35 | backgroundPosition: string; 36 | position: string; 37 | height: string; 38 | width: string; 39 | justifyContent: string; 40 | alignItems: string; 41 | left: string; 42 | margin: string; 43 | border: string; 44 | borderColor: string; 45 | borderRadius: string; 46 | }; 47 | '.uk-stepper-default li:not(:last-child)::after': { 48 | content: string; 49 | color: string; 50 | marginLeft: string; 51 | marginRight: string; 52 | }; 53 | }; 54 | export default _default; 55 | -------------------------------------------------------------------------------- /dist/components/sticky.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-sticky': { 3 | position: string; 4 | zIndex: string; 5 | boxSizing: string; 6 | }; 7 | '.uk-sticky-fixed': { 8 | margin: string; 9 | WebkitBackfaceVisibility: string; 10 | backfaceVisibility: string; 11 | }; 12 | ".uk-sticky[class*='uk-anmt-']": { 13 | animationDuration: string; 14 | }; 15 | '.uk-sticky.uk-anmt-reverse': { 16 | animationDuration: string; 17 | }; 18 | '.uk-sticky-placeholder': { 19 | pointerEvents: string; 20 | }; 21 | }; 22 | export default _default; 23 | -------------------------------------------------------------------------------- /dist/components/sticky.js: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-sticky': { 3 | position: 'relative', 4 | zIndex: '980', 5 | boxSizing: 'border-box' 6 | }, 7 | '.uk-sticky-fixed': { 8 | margin: '0 !important', 9 | WebkitBackfaceVisibility: 'hidden', 10 | backfaceVisibility: 'hidden' 11 | }, 12 | ".uk-sticky[class*='uk-anmt-']": { 13 | animationDuration: '0.2s' 14 | }, 15 | '.uk-sticky.uk-anmt-reverse': { 16 | animationDuration: '0.2s' 17 | }, 18 | '.uk-sticky-placeholder': { 19 | pointerEvents: 'none' 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /dist/components/svg.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | ".uk-svg, .uk-svg:not(.uk-preserve) [fill*='#']:not(.uk-preserve)": { 3 | fill: string; 4 | }; 5 | ".uk-svg:not(.uk-preserve) [stroke*='#']:not(.uk-preserve)": { 6 | stroke: string; 7 | }; 8 | '.uk-svg': { 9 | transform: string; 10 | }; 11 | }; 12 | export default _default; 13 | -------------------------------------------------------------------------------- /dist/components/svg.js: -------------------------------------------------------------------------------- 1 | export default { 2 | ".uk-svg, .uk-svg:not(.uk-preserve) [fill*='#']:not(.uk-preserve)": { 3 | fill: 'currentcolor' 4 | }, 5 | ".uk-svg:not(.uk-preserve) [stroke*='#']:not(.uk-preserve)": { 6 | stroke: 'currentcolor' 7 | }, 8 | '.uk-svg': { 9 | transform: 'translate(0, 0)' 10 | } 11 | }; 12 | -------------------------------------------------------------------------------- /dist/components/switcher.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-switcher > :not(.uk-active)': { 3 | display: string; 4 | }; 5 | }; 6 | export default _default; 7 | -------------------------------------------------------------------------------- /dist/components/switcher.js: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-switcher > :not(.uk-active)': { 3 | display: 'none' 4 | } 5 | }; 6 | -------------------------------------------------------------------------------- /dist/components/table.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-table': { 3 | width: string; 4 | borderCollapse: string; 5 | borderSpacing: string; 6 | }; 7 | '.uk-table th': { 8 | padding: string; 9 | textAlign: string; 10 | fontSize: string; 11 | fontWeight: string; 12 | color: string; 13 | }; 14 | '.uk-table td': { 15 | padding: string; 16 | verticalAlign: string; 17 | }; 18 | '.uk-table tfoot': { 19 | fontSize: string; 20 | }; 21 | '.uk-table caption': { 22 | fontSize: string; 23 | color: string; 24 | }; 25 | '.uk-table-middle, .uk-table-middle td': { 26 | verticalAlign: string; 27 | }; 28 | '.uk-table-divider > tr:not(:first-child), .uk-table-divider > :not(:first-child) > tr, .uk-table-divider > :first-child > tr:not(:first-child)': { 29 | borderTop: string; 30 | }; 31 | '.uk-table-striped > tr:nth-of-type(odd), .uk-table-striped tbody tr:nth-of-type(odd)': { 32 | borderTop: string; 33 | borderBottom: string; 34 | backgroundColor: string; 35 | }; 36 | '.uk-table-hover > tr:hover, .uk-table-hover tbody tr:hover': { 37 | backgroundColor: string; 38 | transition: string; 39 | }; 40 | '.uk-table > tr.uk-active, .uk-table tbody tr.uk-active': { 41 | backgroundColor: string; 42 | }; 43 | '.uk-table-justify th:first-child, .uk-table-justify td:first-child': { 44 | paddingLeft: string; 45 | }; 46 | '.uk-table-justify th:last-child, .uk-table-justify td:last-child': { 47 | paddingRight: string; 48 | }; 49 | '.uk-table-shrink': { 50 | width: string; 51 | }; 52 | '.uk-table-expand': { 53 | minWidth: string; 54 | }; 55 | '.uk-table-link': { 56 | padding: string; 57 | }; 58 | '.uk-table-link > a': { 59 | padding: string; 60 | display: string; 61 | }; 62 | '.uk-table-striped > tr:nth-of-type(even):last-child, .uk-table-striped tbody tr:nth-of-type(even):last-child': { 63 | borderBottom: string; 64 | }; 65 | '.uk-table-sm': { 66 | '--uk-table-cell-padding': string; 67 | }; 68 | '.uk-table-lg': { 69 | '--uk-table-cell-padding': string; 70 | }; 71 | }; 72 | export default _default; 73 | -------------------------------------------------------------------------------- /dist/components/tag.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-tag': { 3 | display: string; 4 | alignItems: string; 5 | minHeight: string; 6 | padding: string; 7 | gap: string; 8 | fontSize: string; 9 | lineHeight: string; 10 | borderRadius: string; 11 | backgroundColor: string; 12 | color: string; 13 | transition: string; 14 | }; 15 | '.uk-tag:hover': { 16 | transitionProperty: string; 17 | transitionDuration: string; 18 | transitionTimingFunction: string; 19 | opacity: string; 20 | }; 21 | '.uk-tag-primary': { 22 | '--uk-tag-bg': string; 23 | '--uk-tag-color': string; 24 | }; 25 | '.uk-tag-primary:hover': { 26 | '--uk-tag-bg': string; 27 | }; 28 | '.uk-tag-secondary': { 29 | '--uk-tag-bg': string; 30 | '--uk-tag-color': string; 31 | }; 32 | '.uk-tag-secondary:hover': { 33 | '--uk-tag-bg': string; 34 | }; 35 | '.uk-tag-destructive': { 36 | '--uk-tag-bg': string; 37 | '--uk-tag-color': string; 38 | }; 39 | '.uk-tag-destructive:hover': { 40 | '--uk-tag-bg': string; 41 | }; 42 | }; 43 | export default _default; 44 | -------------------------------------------------------------------------------- /dist/components/tag.js: -------------------------------------------------------------------------------- 1 | export default { 2 | // Tags 3 | '.uk-tag': { 4 | // Layout 5 | display: 'var(--uk-tag-display, inline-flex)', 6 | alignItems: 'var(--uk-tag-align, center)', 7 | minHeight: 'var(--uk-tag-height, 1.75rem)', 8 | padding: 'var(--uk-tag-padding, 0.25rem 0.5rem)', 9 | gap: 'var(--uk-tag-gap, 0.5rem)', 10 | // Typography 11 | fontSize: 'var(--uk-tag-font-size, var(--uk-global-font-size-s))', 12 | lineHeight: 'var(--uk-tag-leading, var(--uk-global-leading-s))', 13 | // Visual 14 | borderRadius: 'var(--uk-tag-radius, var(--uk-global-radius-s))', 15 | backgroundColor: 'var(--uk-tag-bg, transparent)', 16 | color: 'var(--uk-tag-color, hsl(var(--foreground)))', 17 | // Reset transition 18 | transition: 'none' 19 | }, 20 | '.uk-tag:hover': { 21 | transitionProperty: 'background-color', // Removed variable - fundamental transition 22 | transitionDuration: 'var(--uk-tag-hover-duration, 150ms)', 23 | transitionTimingFunction: 'ease-in-out', // Removed variable - fundamental timing 24 | opacity: 'var(--uk-tag-hover-opacity, 0.8)' 25 | }, 26 | // Variants 27 | '.uk-tag-primary': { 28 | '--uk-tag-bg': 'hsl(var(--primary))', 29 | '--uk-tag-color': 'hsl(var(--primary-foreground))' 30 | }, 31 | '.uk-tag-primary:hover': { 32 | '--uk-tag-bg': 'hsl(var(--primary) / 0.8)' 33 | }, 34 | '.uk-tag-secondary': { 35 | '--uk-tag-bg': 'hsl(var(--secondary))', 36 | '--uk-tag-color': 'hsl(var(--secondary-foreground))' 37 | }, 38 | '.uk-tag-secondary:hover': { 39 | '--uk-tag-bg': 'hsl(var(--secondary) / 0.8)' 40 | }, 41 | '.uk-tag-destructive': { 42 | '--uk-tag-bg': 'hsl(var(--destructive))', 43 | '--uk-tag-color': 'hsl(var(--destructive-foreground))' 44 | }, 45 | '.uk-tag-destructive:hover': { 46 | '--uk-tag-bg': 'hsl(var(--destructive) / 0.8)' 47 | } 48 | }; 49 | -------------------------------------------------------------------------------- /dist/components/theme-switcher.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-theme-switcher': { 3 | display: string; 4 | flex: string; 5 | flexDirection: string; 6 | gap: string; 7 | }; 8 | '.uk-theme-switcher-key': { 9 | gap: string; 10 | display: string; 11 | flexDirection: string; 12 | margin: string; 13 | }; 14 | '.uk-theme-switcher-value': { 15 | display: string; 16 | gridTemplateColumns: string; 17 | gap: string; 18 | }; 19 | '.uk-theme-switcher-value button': { 20 | display: string; 21 | height: string; 22 | alignItems: string; 23 | justifyContent: string; 24 | padding: string; 25 | fontSize: string; 26 | lineHeight: string; 27 | fontWeight: string; 28 | borderRadius: string; 29 | boxShadow: string; 30 | border: string; 31 | backgroundColor: string; 32 | color: string; 33 | }; 34 | '.uk-theme-switcher-value button:hover': { 35 | transitionProperty: string; 36 | transitionDuration: string; 37 | transitionTimingFunction: string; 38 | backgroundColor: string; 39 | color: string; 40 | }; 41 | '.uk-theme-switcher-value button.uk-active': { 42 | border: string; 43 | outline: string; 44 | }; 45 | '.uk-theme-switcher-hex': { 46 | display: string; 47 | height: string; 48 | width: string; 49 | flexShrink: string; 50 | transform: string; 51 | alignItems: string; 52 | justifyContent: string; 53 | borderRadius: string; 54 | color: string; 55 | }; 56 | '.uk-theme-switcher-text:not(:first-child)': { 57 | overflow: string; 58 | textOverflow: string; 59 | marginLeft: string; 60 | }; 61 | '.uk-radii-none': { 62 | '--uk-global-radius-s': string; 63 | '--uk-global-radius': string; 64 | }; 65 | '.uk-radii-sm': { 66 | '--uk-global-radius-s': string; 67 | '--uk-global-radius': string; 68 | }; 69 | '.uk-radii-lg': { 70 | '--uk-global-radius-s': string; 71 | '--uk-global-radius': string; 72 | }; 73 | '.uk-shadows-none': { 74 | '--uk-global-shadow-s': string; 75 | '--uk-global-shadow': string; 76 | }; 77 | '.uk-shadows-md': { 78 | '--uk-global-shadow-s': string; 79 | '--uk-global-shadow': string; 80 | }; 81 | '.uk-shadows-lg': { 82 | '--uk-global-shadow-s': string; 83 | '--uk-global-shadow': string; 84 | }; 85 | '.uk-font-sm': { 86 | '--uk-global-font-size': string; 87 | '--uk-global-leading': string; 88 | '--uk-global-font-size-s': string; 89 | '--uk-global-leading-s': string; 90 | }; 91 | }; 92 | export default _default; 93 | -------------------------------------------------------------------------------- /dist/components/thumbnav.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-thumbnav': { 3 | display: string; 4 | flexWrap: string; 5 | margin: string; 6 | padding: string; 7 | listStyle: string; 8 | marginLeft: string; 9 | }; 10 | '.uk-thumbnav > *': { 11 | paddingLeft: string; 12 | }; 13 | '.uk-thumbnav > * > *': { 14 | display: string; 15 | position: string; 16 | }; 17 | '.uk-thumbnav > * > *::after': { 18 | content: string; 19 | position: string; 20 | top: string; 21 | bottom: string; 22 | left: string; 23 | right: string; 24 | backgroundImage: string; 25 | transition: string; 26 | }; 27 | '.uk-thumbnav > * > :hover::after': { 28 | opacity: string; 29 | }; 30 | '.uk-thumbnav > .uk-active > *::after': { 31 | opacity: string; 32 | }; 33 | '.uk-thumbnav-vertical': { 34 | flexDirection: string; 35 | marginLeft: string; 36 | marginTop: string; 37 | }; 38 | '.uk-thumbnav-vertical > *': { 39 | paddingLeft: string; 40 | paddingTop: string; 41 | }; 42 | }; 43 | export default _default; 44 | -------------------------------------------------------------------------------- /dist/components/thumbnav.js: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-thumbnav': { 3 | display: 'flex', // obvious value, layout property 4 | flexWrap: 'wrap', // obvious value, layout property 5 | margin: '0', // reset, obvious value 6 | padding: '0', // reset, obvious value 7 | listStyle: 'none', // reset, obvious value for lists 8 | marginLeft: 'var(--uk-thumbnav-margin-horizontal, -1rem)' // Customizable horizontal margin for spacing 9 | }, 10 | '.uk-thumbnav > *': { 11 | paddingLeft: 'var(--uk-thumbnav-item-padding-horizontal, 1rem)' // Customizable horizontal padding for item spacing, consistent with container margin 12 | }, 13 | '.uk-thumbnav > * > *': { 14 | display: 'inline-block', // obvious value, layout property 15 | position: 'relative' // obvious value, for positioning pseudo-element 16 | }, 17 | '.uk-thumbnav > * > *::after': { 18 | content: "''", // required for pseudo-element, obvious value 19 | position: 'absolute', // required for overlay, obvious value 20 | top: '0', // position fill, obvious value 21 | bottom: '0', // position fill, obvious value 22 | left: '0', // position fill, obvious value 23 | right: '0', // position fill, obvious value 24 | backgroundImage: 'var(--uk-thumbnav-overlay-background, linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4)))', // Customizable overlay gradient 25 | transition: 'var(--uk-thumbnav-overlay-transition, opacity 0.1s ease-in-out)' // Customizable overlay transition 26 | }, 27 | '.uk-thumbnav > * > :hover::after': { 28 | opacity: 'var(--uk-thumbnav-overlay-hover-opacity, 0)' // Customizable overlay opacity on hover 29 | }, 30 | '.uk-thumbnav > .uk-active > *::after': { 31 | opacity: 'var(--uk-thumbnav-overlay-active-opacity, 0)' // Customizable overlay opacity on active state 32 | }, 33 | '.uk-thumbnav-vertical': { 34 | flexDirection: 'column', // obvious value, layout change for vertical 35 | marginLeft: 'var(--uk-thumbnav-vertical-margin-horizontal, 0)', // Customizable horizontal margin reset for vertical layout 36 | marginTop: 'var(--uk-thumbnav-margin-vertical, -1rem)' // Customizable vertical margin for vertical spacing 37 | }, 38 | '.uk-thumbnav-vertical > *': { 39 | paddingLeft: '0', // reset horizontal padding for vertical layout, obvious value 40 | paddingTop: 'var(--uk-thumbnav-item-padding-vertical, 1rem)' // Customizable vertical padding for item spacing in vertical layout 41 | } 42 | }; 43 | -------------------------------------------------------------------------------- /dist/components/tooltip.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | '.uk-tooltip': { 3 | display: string; 4 | position: string; 5 | zIndex: string; 6 | top: string; 7 | maxWidth: string; 8 | padding: string; 9 | fontSize: string; 10 | lineHeight: string; 11 | borderRadius: string; 12 | backgroundColor: string; 13 | color: string; 14 | '--uk-position-offset': string; 15 | '--uk-position-viewport-offset': string; 16 | }; 17 | '.uk-tooltip.uk-active': { 18 | display: string; 19 | }; 20 | }; 21 | export default _default; 22 | -------------------------------------------------------------------------------- /dist/components/tooltip.js: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-tooltip': { 3 | // Layout 4 | display: 'none', // Removed variable - fundamental behavior 5 | position: 'absolute', // Removed variable - fundamental positioning 6 | zIndex: 'var(--uk-tooltip-z-index, 1030)', 7 | top: 'var(--uk-tooltip-top, 0)', 8 | maxWidth: 'var(--uk-tooltip-max-width, 208px)', 9 | padding: 'var(--uk-tooltip-padding, 0.375rem 0.75rem)', 10 | // Typography 11 | fontSize: 'var(--uk-tooltip-font-size, var(--uk-global-font-size-s))', 12 | lineHeight: 'var(--uk-tooltip-leading, var(--uk-global-leading-s))', 13 | // Visual 14 | borderRadius: 'var(--uk-tooltip-radius, var(--uk-global-radius))', 15 | backgroundColor: 'var(--uk-tooltip-bg, hsl(var(--primary)))', 16 | color: 'var(--uk-tooltip-color, hsl(var(--primary-foreground)))', 17 | // Position offset variables - keep as is per rule #4 18 | '--uk-position-offset': '10px', 19 | '--uk-position-viewport-offset': '8px' 20 | }, 21 | '.uk-tooltip.uk-active': { 22 | display: 'block' // Removed variable - fundamental behavior 23 | } 24 | }; 25 | -------------------------------------------------------------------------------- /dist/css/franken-ui.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/franken-ui/ui/a93d3fdfbd4a57d85fd14d6f040cb3f4d94be9d7/dist/css/franken-ui.css -------------------------------------------------------------------------------- /dist/index.d.ts: -------------------------------------------------------------------------------- 1 | import type { Colors, Options } from './types.js'; 2 | export declare const variables: { 3 | [key: string]: Colors; 4 | }; 5 | declare const _default: { 6 | (options: Options): { 7 | handler: import("tailwindcss/types/config.js").PluginCreator; 8 | config?: Partial; 9 | }; 10 | __isOptionsFunction: true; 11 | }; 12 | export default _default; 13 | -------------------------------------------------------------------------------- /dist/merger.d.ts: -------------------------------------------------------------------------------- 1 | import type { Components, CSSRuleObject } from './types.js'; 2 | declare const _default: (options: { 3 | palettes: CSSRuleObject; 4 | components: Components; 5 | }) => CSSRuleObject; 6 | export default _default; 7 | -------------------------------------------------------------------------------- /dist/merger.js: -------------------------------------------------------------------------------- 1 | import merge from 'lodash/merge.js'; 2 | export default (options) => { 3 | const { palettes, components } = options; 4 | const rules = {}; 5 | for (const key in components) { 6 | if (Object.prototype.hasOwnProperty.call(components, key)) { 7 | merge(rules, components[key]); 8 | } 9 | } 10 | return { ...palettes, ...rules }; 11 | }; 12 | -------------------------------------------------------------------------------- /dist/palette.d.ts: -------------------------------------------------------------------------------- 1 | export default function (variables: { 2 | [key: string]: { 3 | [key: string]: string; 4 | }; 5 | }): { 6 | [key: string]: { 7 | [key: string]: string; 8 | }; 9 | }; 10 | -------------------------------------------------------------------------------- /dist/plugin-vite.d.ts: -------------------------------------------------------------------------------- 1 | import type { Options } from './types.js'; 2 | export default function customPalettePlugin(options: Options): any; 3 | -------------------------------------------------------------------------------- /dist/plugin-vite.js: -------------------------------------------------------------------------------- 1 | import fs, { readFileSync } from 'fs'; 2 | import path from 'path'; 3 | import merge from 'lodash/merge.js'; 4 | import { fileURLToPath } from 'url'; 5 | import { preflight } from './components/index.js'; 6 | import { defaults, palettes, components } from './context.js'; 7 | import postcssJs from 'postcss-js'; 8 | import postcss from 'postcss'; 9 | import merger from './merger.js'; 10 | function css(rules) { 11 | const processor = postcss([]); 12 | return processor.process(rules, { parser: postcssJs.parse }).css; 13 | } 14 | export default function customPalettePlugin(options) { 15 | let config; 16 | return { 17 | name: 'vite-plugin-franken', 18 | configResolved(resolvedConfig) { 19 | config = resolvedConfig; 20 | try { 21 | const pkgJson = JSON.parse(readFileSync('package.json', 'utf-8')); 22 | const tailwindVersion = pkgJson.dependencies?.tailwindcss || pkgJson.devDependencies?.tailwindcss; 23 | if (tailwindVersion?.startsWith('^4.') && options?.preflight) { 24 | console.warn('\n[@franken-ui/ui] Warning: Tailwind CSS v4 detected in your project.' + 25 | '\nYou may want to disable preflight in Franken UI since Tailwind v4' + 26 | '\nalready includes modern CSS reset styles.\n'); 27 | } 28 | } 29 | catch (error) { } 30 | }, 31 | buildStart() { 32 | let rules = options?.preflight ? { ...preflight } : {}; 33 | let context = { 34 | defaults, 35 | palettes: palettes(options), 36 | components 37 | }; 38 | if (options.extensions) { 39 | for (const [plugin, config] of options.extensions) { 40 | context = plugin(context, config); 41 | } 42 | } 43 | // merged rules of palettes and components 44 | const r = merger({ 45 | palettes: context.palettes, 46 | components: context.components 47 | }); 48 | rules = merge(rules, context.defaults, r); 49 | const __dirname = path.dirname(fileURLToPath(import.meta.url)); 50 | const outputPath = path.join(__dirname, '/css/franken-ui.css'); 51 | fs.mkdirSync(path.dirname(outputPath), { recursive: true }); 52 | fs.writeFileSync(outputPath, css(rules)); 53 | } 54 | }; 55 | } 56 | -------------------------------------------------------------------------------- /dist/postcss/combine-duplicated-selectors.cjs: -------------------------------------------------------------------------------- 1 | module.exports = require('postcss-combine-duplicated-selectors'); 2 | -------------------------------------------------------------------------------- /dist/postcss/combine-duplicated-selectors.d.cts: -------------------------------------------------------------------------------- 1 | declare const _exports: import("postcss").PluginCreator; 2 | export = _exports; 3 | -------------------------------------------------------------------------------- /dist/postcss/sort-media-queries.cjs: -------------------------------------------------------------------------------- 1 | module.exports = require('postcss-sort-media-queries'); 2 | -------------------------------------------------------------------------------- /dist/postcss/sort-media-queries.d.cts: -------------------------------------------------------------------------------- 1 | declare const _exports: any; 2 | export = _exports; 3 | -------------------------------------------------------------------------------- /dist/rules.js: -------------------------------------------------------------------------------- 1 | import merge from 'lodash/merge.js'; 2 | import { root, accordion, alert, animation, badge, breadcrumb, button, card, chart, cmd, comment, container, cover, date, divider, dotnav, drop, form, heading, icon, media, modal, nav, notification, offcanvas, label, leader, lightbox, link, list, pagination, position, print, sizing, slider, sortable, spinner, stepper, sticky, svg, switcher, tab, table, themeSwitcher, thumbnav, tooltip, transition, utility } from './components/index.js'; 3 | import { variables } from './index.js'; 4 | import palette from './palette.js'; 5 | export const defaults = { 6 | ':root': root[':root'], 7 | '.dark': root['.dark'], 8 | body: { 9 | fontSize: 'var(--uk-global-font-size)', 10 | lineHeight: 'var(--uk-global-leading)' 11 | }, 12 | '.uk-accordion-title:focus-visible, .uk-alert-close:focus-visible, .uk-alert a:not([class]):focus-visible, .uk-badge:focus-visible, .uk-breadcrumb > * > *:focus-visible, .uk-btn:focus-visible, .uk-cal table tbody tr td button:focus-visible, .uk-close:focus-visible, .uk-input-range-knob:focus-visible, .uk-toggle-switch:focus-visible, a.uk-link-muted:focus-visible, .uk-link-muted a:focus-visible, .uk-link-toggle:focus-visible .uk-link-muted:focus-visible, a.uk-link-reset:focus-visible, .uk-link-reset a:focus-visible, .uk-link-toggle:focus-visible, .uk-link:focus-visible, .uk-nav li > a:focus-visible, .uk-slidenav:focus-visible, .uk-tab > * > a:focus-visible, .uk-tab-alt > * > a:focus-visible, .uk-ts-value button:focus-visible, .uk-lightbox :focus-visible': { 13 | // Split outline into individual properties 14 | outlineWidth: 'var(--uk-global-focus-outline-width, 2px)', 15 | outlineStyle: 'var(--uk-global-focus-outline-style, dotted)', 16 | outlineColor: 'var(--uk-global-focus-outline-color, hsl(var(--ring)))', 17 | // Add transition for focus state 18 | transitionProperty: 'var(--uk-global-focus-transition-property, outline)', 19 | transitionDuration: 'var(--uk-global-focus-transition-duration, 150ms)', 20 | transitionTimingFunction: 'var(--uk-global-focus-transition-timing, ease-in-out)' 21 | } 22 | }; 23 | export const components = merge(accordion, alert, animation, badge, breadcrumb, button, card, chart, cmd, comment, container, cover, date, divider, dotnav, drop, form, heading, icon, label, leader, lightbox, link, list, modal, nav, notification, offcanvas, pagination, position, sizing, slider, sortable, spinner, stepper, sticky, svg, switcher, tab, table, themeSwitcher, thumbnav, tooltip, transition, utility, media, print); 24 | export function palettes(options) { 25 | const all = options?.customPalette ? { ...variables, ...options.customPalette } : variables; 26 | return palette(all); 27 | } 28 | -------------------------------------------------------------------------------- /dist/shadcn-ui/preset-quick.d.ts: -------------------------------------------------------------------------------- 1 | import type { Options } from '../types.js'; 2 | export default function (options?: Options): { 3 | darkMode: string; 4 | theme: { 5 | extend: { 6 | colors: { 7 | background: string; 8 | foreground: string; 9 | muted: string; 10 | 'muted-foreground': string; 11 | card: string; 12 | 'card-foreground': string; 13 | popover: string; 14 | 'popover-foreground': string; 15 | border: string; 16 | input: string; 17 | primary: string; 18 | 'primary-foreground': string; 19 | secondary: string; 20 | 'secondary-foreground': string; 21 | accent: string; 22 | 'accent-foreground': string; 23 | destructive: string; 24 | 'destructive-foreground': string; 25 | ring: string; 26 | }; 27 | fontFamily: { 28 | 'geist-sans': string[]; 29 | 'geist-mono': string[]; 30 | }; 31 | screens: { 32 | 'max-sm': { 33 | max: string; 34 | }; 35 | 'max-md': { 36 | max: string; 37 | }; 38 | 'max-lg': { 39 | max: string; 40 | }; 41 | 'max-xl': { 42 | max: string; 43 | }; 44 | }; 45 | }; 46 | }; 47 | plugins: { 48 | handler: import("tailwindcss/types/config.js").PluginCreator; 49 | config?: Partial; 50 | }[]; 51 | }; 52 | -------------------------------------------------------------------------------- /dist/shadcn-ui/preset-quick.js: -------------------------------------------------------------------------------- 1 | import defaultTheme from 'tailwindcss/defaultTheme.js'; 2 | import ui from '../index.js'; 3 | export default function (options = {}) { 4 | return { 5 | darkMode: 'class', 6 | theme: { 7 | extend: { 8 | colors: { 9 | background: 'hsl(var(--background))', 10 | foreground: 'hsl(var(--foreground))', 11 | muted: 'hsl(var(--muted))', 12 | 'muted-foreground': 'hsl(var(--muted-foreground))', 13 | card: 'hsl(var(--card))', 14 | 'card-foreground': 'hsl(var(--card-foreground))', 15 | popover: 'hsl(var(--popover))', 16 | 'popover-foreground': 'hsl(var(--popover-foreground))', 17 | border: 'hsl(var(--border))', 18 | input: 'hsl(var(--input))', 19 | primary: 'hsl(var(--primary))', 20 | 'primary-foreground': 'hsl(var(--primary-foreground))', 21 | secondary: 'hsl(var(--secondary))', 22 | 'secondary-foreground': 'hsl(var(--secondary-foreground))', 23 | accent: 'hsl(var(--accent))', 24 | 'accent-foreground': 'hsl(var(--accent-foreground))', 25 | destructive: 'hsl(var(--destructive))', 26 | 'destructive-foreground': 'hsl(var(--destructive-foreground))', 27 | ring: 'hsl(var(--ring))' 28 | }, 29 | fontFamily: { 30 | 'geist-sans': ['Geist Sans', ...defaultTheme.fontFamily.sans], 31 | 'geist-mono': ['Geist Mono', ...defaultTheme.fontFamily.mono] 32 | }, 33 | screens: { 34 | 'max-sm': { max: '640px' }, 35 | 'max-md': { max: '768px' }, 36 | 'max-lg': { max: '1024px' }, 37 | 'max-xl': { max: '1280px' } 38 | } 39 | } 40 | }, 41 | plugins: [ui(options)] 42 | }; 43 | } 44 | -------------------------------------------------------------------------------- /dist/types.d.ts: -------------------------------------------------------------------------------- 1 | export interface RecursiveKeyValuePair { 2 | [key: string]: V | RecursiveKeyValuePair; 3 | } 4 | export type CSSRuleObject = RecursiveKeyValuePair; 5 | export type Colors = { 6 | '--background': string; 7 | '--foreground': string; 8 | '--muted': string; 9 | '--muted-foreground': string; 10 | '--popover': string; 11 | '--popover-foreground': string; 12 | '--card': string; 13 | '--card-foreground': string; 14 | '--border': string; 15 | '--input': string; 16 | '--primary': string; 17 | '--primary-foreground': string; 18 | '--secondary': string; 19 | '--secondary-foreground': string; 20 | '--accent': string; 21 | '--accent-foreground': string; 22 | '--destructive': string; 23 | '--destructive-foreground': string; 24 | '--ring': string; 25 | }; 26 | export type Palette = { 27 | [key: string]: Colors; 28 | }; 29 | export type Options = { 30 | preflight?: boolean; 31 | customPalette?: Palette; 32 | extensions?: Extensions; 33 | }; 34 | declare const components: readonly ["accordion", "alert", "animation", "badge", "breadcrumb", "button", "card", "chart", "cmd", "comment", "container", "cover", "date", "divider", "dotnav", "drop", "form", "heading", "icon", "label", "leader", "lightbox", "link", "list", "modal", "nav", "notification", "offcanvas", "pagination", "sizing", "slider", "sortable", "spinner", "stepper", "sticky", "svg", "switcher", "tab", "table", "theme-switcher", "thumbnav", "tooltip", "utility", "media", "print"]; 35 | export type ComponentKey = (typeof components)[number] | string; 36 | export type Component = { 37 | [key: string]: CSSRuleObject; 38 | }; 39 | export type Components = { 40 | [K in ComponentKey]: Component; 41 | } & { 42 | [key: string]: Component; 43 | }; 44 | export type Context = { 45 | defaults: { 46 | ':root': CSSRuleObject; 47 | '.dark': CSSRuleObject; 48 | [key: string]: CSSRuleObject; 49 | }; 50 | palettes: CSSRuleObject; 51 | components: Components; 52 | }; 53 | export type Extension = (context: Context, config: ExtensionConfig) => Context; 54 | export type ExtensionConfig = Record; 55 | export type Extensions = [Function, ExtensionConfig][]; 56 | export {}; 57 | -------------------------------------------------------------------------------- /dist/types.js: -------------------------------------------------------------------------------- 1 | const components = [ 2 | 'accordion', 3 | 'alert', 4 | 'animation', 5 | 'badge', 6 | 'breadcrumb', 7 | 'button', 8 | 'card', 9 | 'chart', 10 | 'cmd', 11 | 'comment', 12 | 'container', 13 | 'cover', 14 | 'date', 15 | 'divider', 16 | 'dotnav', 17 | 'drop', 18 | 'form', 19 | 'heading', 20 | 'icon', 21 | 'label', 22 | 'leader', 23 | 'lightbox', 24 | 'link', 25 | 'list', 26 | 'modal', 27 | 'nav', 28 | 'notification', 29 | 'offcanvas', 30 | 'pagination', 31 | 'sizing', 32 | 'slider', 33 | 'sortable', 34 | 'spinner', 35 | 'stepper', 36 | 'sticky', 37 | 'svg', 38 | 'switcher', 39 | 'tab', 40 | 'table', 41 | 'theme-switcher', 42 | 'thumbnav', 43 | 'tooltip', 44 | 'utility', 45 | 'media', 46 | 'print' 47 | ]; 48 | export {}; 49 | -------------------------------------------------------------------------------- /postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('tailwindcss'), 4 | require('autoprefixer'), 5 | require('postcss-combine-duplicated-selectors')({ 6 | removeDuplicatedProperties: true 7 | }) 8 | ] 9 | }; 10 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 30 | %sveltekit.head% 31 | 32 | 33 |
%sveltekit.body%
34 | 35 | 36 | -------------------------------------------------------------------------------- /src/css/app.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /src/franken/test-item.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
  • 6 | 7 | {title} 8 | 9 |
    10 | {@render children()} 11 |
    12 |
    • 13 | -------------------------------------------------------------------------------- /src/franken/test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
      6 | {@render children()} 7 |
    8 | -------------------------------------------------------------------------------- /src/lib/bin.ts: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | import init from './cli/init/index.js'; 4 | 5 | const args = process.argv.slice(2); 6 | 7 | switch (args[0]) { 8 | case 'init': 9 | init(process.argv.slice(3)); 10 | break; 11 | 12 | default: 13 | console.error(`Invalid command: ${args[0]}`); 14 | break; 15 | } 16 | -------------------------------------------------------------------------------- /src/lib/cli/helpers/common.ts: -------------------------------------------------------------------------------- 1 | import uniq from 'lodash/uniq.js'; 2 | 3 | export function parseArgs( 4 | args: string[], 5 | safelist: string[], 6 | map: { [key: string]: string } 7 | ): string[] { 8 | const result: string[] = []; 9 | const invalidCommands: string[] = []; 10 | 11 | args.forEach((arg) => { 12 | if (/^-[^-]/.test(arg)) { 13 | for (let i = 1; i < arg.length; i++) { 14 | const char = arg[i]; 15 | const mappedArg = map[char]; 16 | if (mappedArg && safelist.includes(mappedArg)) { 17 | result.push(mappedArg); 18 | } else { 19 | invalidCommands.push(`-${char}`); 20 | } 21 | } 22 | } else if (safelist.includes(arg)) { 23 | result.push(arg); 24 | } else { 25 | invalidCommands.push(arg); 26 | } 27 | }); 28 | 29 | if (invalidCommands.length > 0) { 30 | console.error(`Invalid command ${invalidCommands.join(' ')}`); 31 | process.exit(1); 32 | } 33 | 34 | return uniq(result); 35 | } 36 | -------------------------------------------------------------------------------- /src/lib/cli/init/index.ts: -------------------------------------------------------------------------------- 1 | import { existsSync, copyFileSync } from 'fs'; 2 | import { join, dirname } from 'path'; 3 | import { parseArgs } from '$lib/cli/helpers/common.js'; 4 | import { fileURLToPath } from 'url'; 5 | 6 | const __filename = fileURLToPath(import.meta.url); 7 | const __dirname = dirname(__filename); 8 | 9 | const extensions = ['js', 'cjs', 'ts']; 10 | 11 | function copy(stub: string, filename: string) { 12 | copyFileSync(join(__dirname, 'stubs', stub), join(process.cwd(), filename)); 13 | 14 | console.log('Created config file:', filename); 15 | } 16 | 17 | export default function (args: string[]) { 18 | const map: { [key: string]: string } = { p: '--postcss', f: '--force' }; 19 | const safelist = ['-p', '--postcss', '-f', '--force']; 20 | 21 | args = parseArgs(args, safelist, map); 22 | 23 | if (extensions.some((extension) => existsSync(`tailwind.config.${extension}`))) { 24 | console.error('tailwind.config.js already exists'); 25 | } else { 26 | (() => { 27 | copy('tailwind.config.js', 'tailwind.config.js'); 28 | })(); 29 | } 30 | 31 | if (args.includes('--postcss')) { 32 | if (extensions.some((extension) => existsSync(`postcss.config.${extension}`))) { 33 | console.error('postcss.config.js already exists'); 34 | return; 35 | } 36 | 37 | copy('postcss.config.cjs', 'postcss.config.cjs'); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/lib/cli/init/stubs/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('tailwindcss'), 4 | require('franken-ui/postcss/combine-duplicated-selectors')({ 5 | removeDuplicatedProperties: true 6 | }) 7 | ] 8 | }; 9 | -------------------------------------------------------------------------------- /src/lib/cli/init/stubs/tailwind.config.js: -------------------------------------------------------------------------------- 1 | import franken from 'franken-ui/shadcn-ui/preset-quick'; 2 | 3 | /** @type {import('tailwindcss').Config} */ 4 | export default { 5 | presets: [franken()], 6 | content: [], 7 | safelist: [ 8 | { 9 | pattern: /^uk-/ 10 | }, 11 | 'ProseMirror', 12 | 'ProseMirror-focused', 13 | 'tiptap', 14 | 'mr-2', 15 | 'mt-2', 16 | 'opacity-50' 17 | ], 18 | theme: { 19 | extend: {} 20 | }, 21 | plugins: [] 22 | }; 23 | -------------------------------------------------------------------------------- /src/lib/components/accordion.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-accordion-title': { 3 | // Layout 4 | display: 'var(--uk-accordion-title-display, flex)', 5 | justifyContent: 'var(--uk-accordion-title-justify, space-between)', 6 | alignItems: 'var(--uk-accordion-title-align, start)', 7 | overflow: 'var(--uk-accordion-title-overflow, hidden)', 8 | padding: 'var(--uk-accordion-title-padding, 1rem 0 1rem 0)', 9 | fontWeight: 'var(--uk-accordion-title-font, 500)' 10 | }, 11 | '.uk-accordion-title:hover': { 12 | textDecoration: 'var(--uk-accordion-title-hover-decoration, underline)' 13 | }, 14 | '.uk-accordion-icon': { 15 | flex: 'var(--uk-accordion-icon-flex, none)', 16 | transition: 'var(--uk-accordion-icon-transition, 300ms transform)', 17 | color: 'var(--uk-accordion-icon-color, hsl(var(--muted-foreground)))' 18 | }, 19 | '.uk-open > .uk-accordion-title > .uk-accordion-icon': { 20 | transform: 'rotate(180deg)' 21 | }, 22 | '.uk-accordion-content': { 23 | display: 'var(--uk-accordion-content-display, flow-root)', 24 | padding: 'var(--uk-accordion-content-padding, 0 0 1rem 0)' 25 | }, 26 | '.uk-accordion-content[hidden]': { 27 | display: 'none' 28 | }, 29 | '.uk-accordion > li': { 30 | borderWidth: 'var(--uk-accordion-item-border-width, 0 0 1px 0)', 31 | borderStyle: 'var(--uk-accordion-item-border-style, solid)', 32 | borderColor: 'var(--uk-accordion-item-border-color, hsl(var(--border)))' 33 | } 34 | }; 35 | -------------------------------------------------------------------------------- /src/lib/components/alert.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-alert': { 3 | // Layout 4 | position: 'var(--uk-alert-position, relative)', 5 | padding: 'var(--uk-alert-padding, 1rem 2rem 1rem 1rem)', 6 | 7 | // Visual 8 | backgroundColor: 'var(--uk-alert-bg, hsl(var(--muted) / .5))', 9 | color: 'var(--uk-alert-color, hsl(var(--foreground)))', 10 | borderRadius: 'var(--uk-alert-radius, var(--uk-global-radius))', 11 | borderWidth: 'var(--uk-alert-border-width, 1px)', 12 | borderStyle: 'var(--uk-alert-border-style, solid)', 13 | borderColor: 'var(--uk-alert-border-color, hsl(var(--border)))' 14 | }, 15 | '.uk-alert-close': { 16 | // Layout 17 | position: 'var(--uk-alert-close-position, absolute)', 18 | inset: 'var(--uk-alert-close-inset, 1rem 1rem auto auto)' 19 | }, 20 | '.uk-alert-destructive': { 21 | '--uk-alert-bg': 'hsl(var(--destructive))', 22 | '--uk-alert-color': 'hsl(var(--destructive-foreground))', 23 | '--uk-alert-border-color': 'hsl(var(--destructive))' 24 | }, 25 | '.uk-alert a:not([class])': { 26 | // Typography 27 | fontWeight: 'var(--uk-alert-link-font-weight, 500)', 28 | textDecorationLine: 'var(--uk-alert-link-decoration-line, underline)', 29 | textUnderlineOffset: 'var(--uk-alert-link-underline-offset, 4px)' 30 | }, 31 | '.uk-alert-title': { 32 | // Typography 33 | fontWeight: 'var(--uk-alert-title-font-weight, 500)', 34 | lineHeight: 'var(--uk-alert-title-leading, none)', 35 | letterSpacing: 'var(--uk-alert-title-tracking, -0.025em)' // Using Tailwind-like naming 36 | } 37 | }; 38 | -------------------------------------------------------------------------------- /src/lib/components/avatar.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-avatar': { 3 | backgroundColor: 'hsl(var(--background))', 4 | borderRadius: 'var(--uk-avatar-radius, var(--uk-global-radius))', 5 | position: 'relative', 6 | display: 'inline-flex', 7 | height: 'var(--uk-avatar-height, 2.5rem)', 8 | width: 'var(--uk-avatar-width, 2.5rem)', 9 | alignItems: 'center', 10 | justifyContent: 'center' 11 | }, 12 | '.uk-avatar-image': { 13 | height: '100%', 14 | width: '100%', 15 | overflow: 'hidden' 16 | }, 17 | '.uk-avatar.uk-avatar-rounded': { 18 | borderRadius: '9999px' 19 | }, 20 | '.uk-avatar.uk-avatar-rounded img, .uk-avatar.uk-avatar-rounded .uk-avatar-text': { 21 | borderRadius: '9999px' 22 | }, 23 | '.uk-avatar.uk-avatar-bordered': { 24 | borderWidth: 'var(--uk-avatar-bordered-border-width, 0.125rem)', 25 | borderColor: 'hsl(var(--border))', 26 | padding: 'var(--uk-avatar-bordered-padding, 0.25rem)' 27 | }, 28 | '.uk-avatar img': { 29 | borderRadius: 'var(--uk-avatar-inner-radius, var(--uk-global-radius-s))', 30 | height: '100%', 31 | width: '100%', 32 | objectFit: 'cover' 33 | }, 34 | '.uk-avatar-dot::after, .uk-avatar-dot-top::after, .uk-avatar-dot-top-right::after, .uk-avatar-dot-right::after, .uk-avatar-dot-bottom-right::after, .uk-avatar-dot-bottom::after, .uk-avatar-dot-bottom-left::after, .uk-avatar-dot-left::after, .uk-avatar-dot-top-left::after': 35 | { 36 | content: "''", 37 | position: 'absolute', 38 | height: 'var(--uk-avatar-dot-size, 0.875rem)', 39 | width: 'var(--uk-avatar-dot-size, 0.875rem)', 40 | borderRadius: '9999px', 41 | borderWidth: 'var(--uk-avatar-dot-border-width, 0.125rem)', 42 | borderColor: 'hsl(var(--background))', 43 | backgroundColor: 'var(--uk-avatar-dot-bg, hsl(var(--primary)))', 44 | transform: 'translate(0, 0)', 45 | zIndex: 'var(--uk-avatar-dot-z-index, 10)' 46 | }, 47 | '.uk-avatar-dot::after, .uk-avatar-dot-bottom-right::after': { 48 | bottom: '0', 49 | right: '0', 50 | transform: 'translate(25%, 25%)' 51 | }, 52 | '.uk-avatar-dot-top::after': { 53 | top: '0', 54 | left: '50%', 55 | transform: 'translate(-50%, -50%)' 56 | }, 57 | '.uk-avatar-dot-top-right::after': { 58 | top: '0', 59 | right: '0', 60 | transform: 'translate(25%, -25%)' 61 | }, 62 | '.uk-avatar-dot-right::after': { 63 | top: '50%', 64 | right: '0', 65 | transform: 'translate(50%, -50%)' 66 | }, 67 | '.uk-avatar-dot-bottom::after': { 68 | bottom: '0', 69 | left: '50%', 70 | transform: 'translate(-50%, 50%)' 71 | }, 72 | '.uk-avatar-dot-bottom-left::after': { 73 | bottom: '0', 74 | left: '0', 75 | transform: 'translate(-25%, 25%)' 76 | }, 77 | '.uk-avatar-dot-left::after': { 78 | top: '50%', 79 | left: '0', 80 | transform: 'translate(-50%, -50%)' 81 | }, 82 | '.uk-avatar-dot-top-left::after': { 83 | top: '0', 84 | left: '0', 85 | transform: 'translate(-25%, -25%)' 86 | }, 87 | '.uk-avatar-text': { 88 | height: '100%', 89 | width: '100%', 90 | display: 'flex', 91 | justifyContent: 'center', 92 | alignItems: 'center', 93 | borderRadius: 'var(--uk-avatar-inner-radius, var(--uk-global-radius-s))' 94 | } 95 | }; 96 | -------------------------------------------------------------------------------- /src/lib/components/badge.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-badge': { 3 | // Layout 4 | display: 'var(--uk-badge-display, inline-flex)', 5 | justifyContent: 'var(--uk-badge-justify-content, center)', 6 | alignItems: 'var(--uk-badge-align-items, center)', 7 | height: 'var(--uk-badge-height, 1.25rem)', 8 | minWidth: 'var(--uk-badge-min-width, 1.25rem)', 9 | padding: 'var(--uk-badge-padding, 0 0.375rem)', 10 | 11 | // Typography 12 | fontSize: 'var(--uk-badge-font-size, var(--uk-global-font-size-s))', 13 | lineHeight: 'var(--uk-badge-leading, var(--uk-global-leading-s))', 14 | fontWeight: 'var(--uk-badge-font-weight, 600)', 15 | 16 | // Visual 17 | borderRadius: 'var(--uk-badge-radius, 500px)', 18 | boxShadow: 'var(--uk-badge-box-shadow, var(--uk-global-shadow))', 19 | border: 'var(--uk-badge-border, 1px solid hsl(var(--border)))', 20 | backgroundColor: 'var(--uk-badge-bg, transparent)', 21 | color: 'var(--uk-badge-color, hsl(var(--foreground)))' 22 | 23 | // States 24 | }, 25 | '.uk-badge:hover': { 26 | transitionProperty: 'var(--uk-badge-hover-transition-property, background-color)', 27 | transitionDuration: 'var(--uk-badge-hover-transition-duration, 150ms)', 28 | transitionTimingFunction: 'var(--uk-badge-hover-transition-timing, ease-in-out)', 29 | opacity: 'var(--uk-badge-hover-opacity, 0.8)' 30 | }, 31 | '.uk-badge-primary': { 32 | '--uk-badge-border': '1px solid hsl(var(--primary))', 33 | '--uk-badge-bg': 'hsl(var(--primary))', 34 | '--uk-badge-color': 'hsl(var(--primary-foreground))' 35 | }, 36 | '.uk-badge-secondary': { 37 | '--uk-badge-border': '1px solid hsl(var(--secondary))', 38 | '--uk-badge-bg': 'hsl(var(--secondary))', 39 | '--uk-badge-color': 'hsl(var(--secondary-foreground))' 40 | }, 41 | '.uk-badge-destructive': { 42 | '--uk-badge-border': '1px solid hsl(var(--destructive))', 43 | '--uk-badge-bg': 'hsl(var(--destructive))', 44 | '--uk-badge-color': 'hsl(var(--destructive-foreground))' 45 | } 46 | }; 47 | -------------------------------------------------------------------------------- /src/lib/components/breadcrumb.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-breadcrumb > *': { 3 | // Layout 4 | display: 'var(--uk-breadcrumb-display, contents)' 5 | }, 6 | '.uk-breadcrumb > * > *': { 7 | // Layout 8 | display: 'var(--uk-breadcrumb-item-display, inline-flex)', 9 | alignItems: 'var(--uk-breadcrumb-item-align, center)', 10 | 11 | // Typography 12 | color: 'var(--uk-breadcrumb-item-color, hsl(var(--muted-foreground)))' 13 | }, 14 | '.uk-breadcrumb > * > :hover': { 15 | // Typography 16 | textDecoration: 'var(--uk-breadcrumb-item-hover-decoration, none)', 17 | color: 'var(--uk-breadcrumb-item-hover-color, hsl(var(--foreground)))', 18 | 19 | // Hover-only transition 20 | transitionProperty: 'var(--uk-breadcrumb-item-hover-transition-property, color)', 21 | transitionDuration: 'var(--uk-breadcrumb-item-hover-transition-duration, 150ms)', 22 | transitionTimingFunction: 'var(--uk-breadcrumb-item-hover-transition-timing, ease-in-out)' 23 | }, 24 | '.uk-breadcrumb > :last-child > span, .uk-breadcrumb > :last-child > a:not([href])': { 25 | // Typography 26 | fontWeight: 'var(--uk-breadcrumb-active-font-weight, 500)', 27 | color: 'var(--uk-breadcrumb-active-color, hsl(var(--foreground)))' 28 | }, 29 | '.uk-breadcrumb > :nth-child(n + 2):not(.uk-first-column)::before': { 30 | // Content 31 | content: 'var(--uk-breadcrumb-divider, "/")', 32 | display: 'var(--uk-breadcrumb-divider-display, inline-block)', 33 | 34 | // Layout 35 | margin: 'var(--uk-breadcrumb-divider-margin, 0 0.75rem 0 0.5rem)', 36 | 37 | // Typography 38 | color: 'var(--uk-breadcrumb-divider-color, hsl(var(--muted-foreground)))' 39 | }, 40 | '.uk-breadcrumb > .uk-disabled > *': { 41 | // Visual 42 | opacity: 'var(--uk-breadcrumb-disabled-opacity, 0.5)', 43 | pointerEvents: 'none' // static no need to make it a variable 44 | } 45 | }; 46 | -------------------------------------------------------------------------------- /src/lib/components/card.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-card': { 3 | position: 'relative', // obvious value, no need for var 4 | boxSizing: 'border-box', // obvious value, no need for var 5 | border: 'var(--uk-card-border, 1px solid hsl(var(--border)))', 6 | borderRadius: 'var(--uk-card-radius, var(--uk-global-radius))', 7 | boxShadow: 'var(--uk-card-shadow, var(--uk-global-shadow))', 8 | backgroundColor: 'var(--uk-card-bg, hsl(var(--card)))', 9 | color: 'var(--uk-card-color, hsl(var(--card-foreground)))' 10 | }, 11 | 12 | '.uk-card-body, .uk-card-header, .uk-card-footer': { 13 | padding: 'var(--uk-card-padding, 1rem)' 14 | }, 15 | 16 | '.uk-card-body > :last-child, .uk-card-header > :last-child, .uk-card-footer > :last-child': { 17 | marginBottom: 'var(--uk-card-last-child-margin, 0)' 18 | }, 19 | 20 | '.uk-card-title': { 21 | fontSize: 'var(--uk-card-title-font-size, 1.125rem)', 22 | fontWeight: 'var(--uk-card-title-weight, 600)', 23 | lineHeight: 'var(--uk-card-title-height, 1)', 24 | letterSpacing: 'var(--uk-card-title-tracking, -0.025em)' 25 | }, 26 | 27 | // Variants can be simplified 28 | '.uk-card-primary': { 29 | '--uk-card-border': '1px solid transparent', 30 | '--uk-card-bg': 'hsl(var(--primary))', 31 | '--uk-card-color': 'hsl(var(--primary-foreground))' 32 | }, 33 | 34 | '.uk-card-secondary': { 35 | '--uk-card-border': '1px solid transparent', 36 | '--uk-card-bg': 'hsl(var(--secondary))', 37 | '--uk-card-color': 'hsl(var(--secondary-foreground))' 38 | }, 39 | 40 | '.uk-card-destructive': { 41 | '--uk-card-border': '1px solid transparent', 42 | '--uk-card-bg': 'hsl(var(--destructive))', 43 | '--uk-card-color': 'hsl(var(--destructive-foreground))' 44 | }, 45 | 46 | // Spacing adjustments remain the same 47 | '.uk-card-header + .uk-card-body, .uk-card-body + .uk-card-footer': { 48 | paddingTop: 'var(--uk-card-adjacent-padding, 0)' 49 | }, 50 | 51 | '.uk-card-header ~ .uk-card-footer': { 52 | paddingTop: 'var(--uk-card-header-footer-padding, 0)' 53 | } 54 | }; 55 | -------------------------------------------------------------------------------- /src/lib/components/cmd.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-cmd-header': { 3 | display: 'flex', // obvious - standard header layout 4 | alignItems: 'center', // obvious - standard header layout 5 | gap: 'var(--uk-cmd-header-gap, 0.5rem)', 6 | padding: 'var(--uk-cmd-header-padding, 0 0.75rem)' 7 | }, 8 | 9 | '.uk-cmd-header-input': { 10 | flex: '1', // obvious - should take remaining space 11 | padding: 'var(--uk-cmd-header-input-padding, 0.75rem 0)' 12 | }, 13 | 14 | '.uk-cmd-header-input input': { 15 | width: '100%', // obvious - should fill container 16 | backgroundColor: 'transparent' // obvious - input should be transparent 17 | }, 18 | '.uk-cmd-header-input input:focus': { 19 | outline: 'none' 20 | }, 21 | '.uk-cmd-header-input input::placeholder': { 22 | color: 'var(--uk-cmd-input-placeholder-color, hsl(var(--muted-foreground)))' 23 | }, 24 | 25 | '.uk-cmd-header-icon': { 26 | width: 'var(--uk-cmd-header-icon-size, 1rem)', 27 | height: 'var(--uk-cmd-header-icon-size, 1rem)', 28 | flex: 'none', // obvious - icon shouldn't grow/shrink 29 | color: 'var(--uk-cmd-header-icon-color, hsl(var(--muted-foreground)))' 30 | }, 31 | 32 | '.uk-cmd-header-esc': { 33 | flex: 'none' // obvious - escape button shouldn't grow/shrink 34 | }, 35 | 36 | '.uk-cmd-body': { 37 | maxHeight: 'var(--uk-cmd-body-max-height, 20rem)' 38 | }, 39 | 40 | '.uk-cmd-item-wrapper': { 41 | display: 'flex', // obvious - standard item layout 42 | flex: '1', // obvious - should take full width 43 | alignItems: 'center' // obvious - vertical alignment 44 | }, 45 | 46 | '.uk-cmd-item-icon': { 47 | marginRight: 'var(--uk-cmd-item-icon-margin, 0.5rem)', 48 | width: 'var(--uk-cmd-item-icon-size, 1rem)', 49 | height: 'var(--uk-cmd-item-icon-size, 1rem)', 50 | flex: 'none' // obvious - icon shouldn't grow/shrink 51 | }, 52 | 53 | '.uk-cmd-item-text': { 54 | flex: '1' // obvious - should take remaining space 55 | } 56 | }; 57 | -------------------------------------------------------------------------------- /src/lib/components/comment.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-comment-body': { 3 | display: 'flow-root', // obvious - standard block formatting context 4 | overflowWrap: 'break-word', // obvious - prevent overflow 5 | wordWrap: 'break-word' // obvious - prevent overflow 6 | }, 7 | '.uk-comment-header': { 8 | display: 'flow-root', // obvious - standard block formatting context 9 | marginBottom: 'var(--uk-comment-header-margin, 1.25rem)' 10 | }, 11 | '.uk-comment-body > :last-child, .uk-comment-header > :last-child': { 12 | marginBottom: '0' // obvious - remove margin from last child 13 | }, 14 | // Typography 15 | '.uk-comment-title': { 16 | fontSize: 'var(--uk-comment-title-font-size, 1rem)', 17 | fontWeight: 'var(--uk-comment-title-font-weight, 500)' 18 | }, 19 | '.uk-comment-meta': { 20 | fontSize: 'var(--uk-comment-meta-font-size, var(--uk-global-font-size-s))', 21 | lineHeight: 'var(--uk-comment-meta-leading, var(--uk-global-leading-s))', 22 | marginTop: 'var(--uk-comment-meta-margin-top, 0.25rem)' 23 | }, 24 | '.uk-comment-list > :nth-child(n + 2)': { 25 | marginTop: 'var(--uk-comment-list-gap, 0.75rem)' 26 | }, 27 | // Nested comments 28 | '.uk-comment-list .uk-comment ~ ul': { 29 | marginInlineStart: 'var(--uk-comment-nested-margin, 1.5rem)', 30 | marginTop: 'var(--uk-comment-nested-margin-top, 1.5rem)', 31 | borderInlineStartWidth: 'var(--uk-comment-nested-border-width, 1px)', 32 | borderInlineStartStyle: 'var(--uk-comment-nested-border-style, solid)', 33 | borderInlineStartColor: 'var(--uk-comment-nested-border-color, hsl(var(--border)))' 34 | }, 35 | '.uk-comment-list .uk-comment ~ ul > :nth-child(n + 2)': { 36 | marginTop: 'var(--uk-comment-nested-item-gap, 1.5rem)' 37 | }, 38 | '.uk-comment-primary': { 39 | borderRadius: 'var(--uk-comment-primary-radius, var(--uk-global-radius))', 40 | backgroundColor: 'var(--uk-comment-primary-bg, hsl(var(--primary)))', 41 | color: 'var(--uk-comment-primary-color, hsl(var(--primary-foreground)))' 42 | }, 43 | '.uk-comment': { 44 | padding: 'var(--uk-comment-padding, 0.75rem)' 45 | }, 46 | // Avatar 47 | '.uk-comment-avatar': { 48 | height: 'var(--uk-comment-avatar-size, 2.5rem)', 49 | width: 'var(--uk-comment-avatar-size, 2.5rem)', 50 | overflow: 'hidden', // obvious - contain image 51 | borderRadius: 'var(--uk-comment-avatar-radius, 9999px)', 52 | backgroundColor: 'var(--uk-comment-avatar-bg, hsl(var(--muted)))' 53 | }, 54 | '.uk-comment-avatar img': { 55 | height: '100%', // obvious - fill container 56 | width: '100%', // obvious - fill container 57 | objectFit: 'cover' // obvious - standard image cover 58 | }, 59 | '.uk-comment-list .uk-comment ~ ul > li': { 60 | marginLeft: 'var(--uk-comment-nested-item-margin, 0.75rem)', 61 | marginInlineStart: 'var(--uk-comment-nested-item-margin, 0.75rem)' 62 | } 63 | }; 64 | -------------------------------------------------------------------------------- /src/lib/components/container.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-container': { 3 | display: 'var(--uk-container-display, flow-root)', 4 | boxSizing: 'var(--uk-container-box-sizing, content-box)', 5 | maxWidth: 'var(--uk-container-max-width, 1200px)', 6 | marginLeft: 'var(--uk-container-margin-x, auto)', 7 | marginRight: 'var(--uk-container-margin-x, auto)', 8 | paddingLeft: 'var(--uk-container-padding-x, 1rem)', 9 | paddingRight: 'var(--uk-container-padding-x, 1rem)' 10 | }, 11 | '.uk-container > :last-child': { 12 | marginBottom: 'var(--uk-container-last-child-margin, 0)' 13 | }, 14 | '.uk-container .uk-container': { 15 | paddingLeft: 'var(--uk-nested-container-padding-x, 0)', 16 | paddingRight: 'var(--uk-nested-container-padding-x, 0)' 17 | }, 18 | '.uk-container-xs': { 19 | maxWidth: 'var(--uk-container-xs-max-width, 750px)' 20 | }, 21 | '.uk-container-sm': { 22 | maxWidth: 'var(--uk-container-sm-max-width, 900px)' 23 | }, 24 | '.uk-container-lg': { 25 | maxWidth: 'var(--uk-container-lg-max-width, 1400px)' 26 | }, 27 | '.uk-container-xl': { 28 | maxWidth: 'var(--uk-container-xl-max-width, 1600px)' 29 | }, 30 | '.uk-container-expand': { 31 | maxWidth: 'var(--uk-container-expand-max-width, none)' 32 | }, 33 | '.uk-container-expand-left': { 34 | marginLeft: 'var(--uk-container-expand-left-margin, 0)' 35 | }, 36 | '.uk-container-expand-right': { 37 | marginRight: 'var(--uk-container-expand-right-margin, 0)' 38 | }, 39 | '.uk-container-item-padding-remove-left, .uk-container-item-padding-remove-right': { 40 | width: 'var(--uk-container-item-padding-remove-width, calc(100% + 1rem))' 41 | }, 42 | '.uk-container-item-padding-remove-left': { 43 | marginLeft: 'var(--uk-container-item-padding-remove-left-margin, -1rem)' 44 | }, 45 | '.uk-container-item-padding-remove-right': { 46 | marginRight: 'var(--uk-container-item-padding-remove-right-margin, -1rem)' 47 | } 48 | }; 49 | -------------------------------------------------------------------------------- /src/lib/components/cover.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '[uk-cover]:where(canvas, iframe, svg), [data-uk-cover]:where(canvas, iframe, svg)': { 3 | maxWidth: 'none', 4 | position: 'absolute', 5 | left: '50%', 6 | top: '50%', 7 | '--uk-position-translate-x': '-50%', 8 | '--uk-position-translate-y': '-50%', 9 | transform: 'translate(var(--uk-position-translate-x), var(--uk-position-translate-y))' 10 | }, 11 | 'iframe[uk-cover], iframe[data-uk-cover]': { 12 | pointerEvents: 'none' 13 | }, 14 | '[uk-cover]:where(img, video), [data-uk-cover]:where(img, video)': { 15 | position: 'absolute', 16 | top: '0', 17 | left: '0', 18 | width: '100%', 19 | height: '100%', 20 | boxSizing: 'border-box', 21 | objectFit: 'cover', 22 | objectPosition: 'center' 23 | }, 24 | '.uk-cover-container': { 25 | overflow: 'hidden', 26 | position: 'relative' 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /src/lib/components/divider.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | "[class*='uk-divider']": { 3 | border: 'none', // Static - core reset 4 | height: 'var(--uk-divider-height, 1px)' 5 | }, 6 | 7 | '.uk-hr': { 8 | borderColor: 'var(--uk-hr-color, hsl(var(--border)))' 9 | }, 10 | 11 | '.uk-divider-icon': { 12 | position: 'relative', // Static - core positioning 13 | height: 'var(--uk-divider-icon-height, 1.25rem)', 14 | backgroundImage: 'var(--uk-divider-icon-image)', 15 | backgroundRepeat: 'no-repeat', // Static - icon behavior 16 | backgroundPosition: '50% 50%' // Static - icon centering 17 | }, 18 | 19 | '.uk-divider-icon::before, .uk-divider-icon::after': { 20 | content: '""', // Static - pseudo element 21 | position: 'absolute', // Static - core positioning 22 | top: '50%', // Static - vertical centering 23 | maxWidth: 'calc(50% - (3.5rem / 2))', // Static - line width calculation 24 | borderBottom: 'var(--uk-divider-icon-line-border, 1px solid hsl(var(--border)))' 25 | }, 26 | 27 | '.uk-divider-icon::before': { 28 | right: 'calc(50% + (3.5rem / 2))', // Static - line positioning 29 | width: '100%' // Static - full width 30 | }, 31 | 32 | '.uk-divider-icon::after': { 33 | left: 'calc(50% + (3.5rem / 2))', // Static - line positioning 34 | width: '100%' // Static - full width 35 | }, 36 | 37 | '.uk-divider-sm': { 38 | lineHeight: '0' // Static - remove line spacing 39 | }, 40 | 41 | '.uk-divider-sm::after': { 42 | content: '""', // Static - pseudo element 43 | display: 'inline-block', // Static - layout behavior 44 | width: 'var(--uk-divider-sm-width, 100px)', 45 | maxWidth: '100%', // Static - responsive behavior 46 | borderTop: 'var(--uk-divider-sm-border, 1px solid hsl(var(--border)))', 47 | verticalAlign: 'top', // Static - alignment 48 | borderBottom: 'var(--uk-divider-sm-border, 1px solid hsl(var(--border)))' 49 | }, 50 | 51 | '.uk-divider-vertical': { 52 | width: 'max-content', // Static - content fitting 53 | height: 'var(--uk-divider-vertical-height, 100px)', 54 | marginLeft: 'auto', // Static - horizontal centering 55 | marginRight: 'auto', // Static - horizontal centering 56 | borderLeft: 'var(--uk-divider-vertical-border, 1px solid hsl(var(--border)))', 57 | borderBottom: 'var(--uk-divider-vertical-border, 1px solid hsl(var(--border)))' 58 | } 59 | }; 60 | -------------------------------------------------------------------------------- /src/lib/components/dotnav.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | // Base dotnav styles 3 | '.uk-dotnav': { 4 | display: 'flex', // Removed variable - fundamental layout 5 | flexWrap: 'wrap', // Removed variable - fundamental layout 6 | marginLeft: 'var(--uk-dotnav-margin-left, -0.75rem)' 7 | }, 8 | 9 | // Dotnav items 10 | '.uk-dotnav > *': { 11 | flex: 'none', // Removed variable - fundamental layout 12 | paddingLeft: 'var(--uk-dotnav-item-padding, 0.75rem)' 13 | }, 14 | 15 | // Dotnav dots 16 | '.uk-dotnav > * > *': { 17 | // Layout 18 | display: 'block', // Removed variable - fundamental layout 19 | boxSizing: 'border-box', // Removed variable - fundamental box model 20 | width: 'var(--uk-dotnav-dot-size, 10px)', 21 | height: 'var(--uk-dotnav-dot-size, 10px)', // Using same variable for consistent sizing 22 | 23 | // Visual 24 | border: 'var(--uk-dotnav-dot-border, 1px solid hsl(var(--primary)))', // Combined border properties 25 | borderRadius: '50%', // Removed variable - fundamental shape for dots 26 | backgroundColor: 'var(--uk-dotnav-dot-bg, transparent)', 27 | 28 | // Accessibility 29 | textIndent: '100%', // Removed variable - fundamental accessibility 30 | overflow: 'hidden', // Removed variable - fundamental accessibility 31 | whiteSpace: 'nowrap', // Removed variable - fundamental text behavior 32 | 33 | // Transitions 34 | transition: '0.2s ease-in-out', // Removed variable - fundamental transition 35 | transitionProperty: 'background-color, border-color' // Removed variable - fundamental properties 36 | }, 37 | 38 | // States 39 | '.uk-dotnav > * > :hover': { 40 | borderColor: 'var(--uk-dotnav-dot-hover-border, transparent)', 41 | backgroundColor: 'var(--uk-dotnav-dot-hover-bg, hsl(var(--primary)))' 42 | }, 43 | 44 | '.uk-dotnav > * > :active': { 45 | borderColor: 'var(--uk-dotnav-dot-active-border, transparent)', 46 | backgroundColor: 'var(--uk-dotnav-dot-active-bg, hsl(var(--primary)))' 47 | }, 48 | 49 | '.uk-dotnav > .uk-active > *': { 50 | borderColor: 'var(--uk-dotnav-dot-current-border, transparent)', 51 | backgroundColor: 'var(--uk-dotnav-dot-current-bg, hsl(var(--primary)))' 52 | }, 53 | 54 | // Vertical variant 55 | '.uk-dotnav-vertical': { 56 | flexDirection: 'column', // Removed variable - fundamental layout 57 | marginLeft: '0', // Removed variable - fundamental reset 58 | marginTop: 'var(--uk-dotnav-vertical-margin-top, -0.75rem)' 59 | }, 60 | 61 | '.uk-dotnav-vertical > *': { 62 | paddingLeft: '0', // Removed variable - fundamental reset 63 | paddingTop: 'var(--uk-dotnav-vertical-item-padding-top, 0.75rem)' 64 | } 65 | }; 66 | -------------------------------------------------------------------------------- /src/lib/components/form/custom-select.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-custom-select-search': { 3 | // Layout 4 | display: 'var(--uk-custom-select-search-display, flex)', 5 | alignItems: 'var(--uk-custom-select-search-align, center)', 6 | padding: 'var(--uk-custom-select-search-padding, 0 0.75rem)' 7 | }, 8 | 9 | '.uk-custom-select-search svg': { 10 | // Layout 11 | margin: 'var(--uk-custom-select-search-icon-margin, 0 0.5rem 0 0)', 12 | // Visual 13 | opacity: 'var(--uk-custom-select-search-icon-opacity, 0.5)' 14 | }, 15 | 16 | '.uk-custom-select-search input': { 17 | // Layout 18 | width: 'var(--uk-custom-select-search-input-width, 100%)', 19 | padding: 'var(--uk-custom-select-search-input-padding, 0.75rem 0)', 20 | // Visual 21 | backgroundColor: 'transparent', 22 | outline: 'none', 23 | 24 | '&::placeholder': { 25 | color: 'var(--uk-custom-select-search-placeholder-color, hsl(var(--muted-foreground)))' 26 | } 27 | }, 28 | 29 | '.uk-custom-select-options': { 30 | // Layout 31 | maxHeight: 'var(--uk-custom-select-options-max-height, 10rem)' 32 | }, 33 | 34 | '.uk-custom-select-item-wrapper': { 35 | // Layout 36 | display: 'var(--uk-custom-select-item-wrapper-display, flex)', 37 | flex: 'var(--uk-custom-select-item-wrapper-flex, 1)', 38 | alignItems: 'var(--uk-custom-select-item-wrapper-align, center)' 39 | }, 40 | 41 | '.uk-custom-select-item-icon': { 42 | // Layout 43 | margin: 'var(--uk-custom-select-item-icon-margin, 0 0.5rem 0 0)', 44 | flexShrink: 'var(--uk-custom-select-item-icon-shrink, 0)' 45 | }, 46 | 47 | '.uk-custom-select-item-text': { 48 | // Layout 49 | flex: 'var(--uk-custom-select-item-text-flex, 1)' 50 | }, 51 | 52 | '.uk-custom-select-item-check': { 53 | // Layout 54 | margin: 'var(--uk-custom-select-item-check-margin, 0 0 0 0.5rem)', 55 | flexShrink: 'var(--uk-custom-select-item-check-shrink, 0)' 56 | } 57 | }; 58 | -------------------------------------------------------------------------------- /src/lib/components/form/keyval.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-keyval': { 3 | borderRadius: 'var(--uk-global-radius)', 4 | boxShadow: 'var(--uk-global-shadow)', 5 | borderWidth: '1px', 6 | borderColor: 'hsl(var(--border))' 7 | }, 8 | '.uk-keyval-value-wrapper': { width: '100%' }, 9 | '.uk-keyval-actions': { 10 | display: 'flex', 11 | flexWrap: 'nowrap', 12 | columnGap: '0.5rem' 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /src/lib/components/form/rte.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '.tiptap p.is-editor-empty:first-child::before': { 3 | content: 'attr(data-placeholder)', 4 | pointerEvents: 'none', 5 | cssFloat: 'left', 6 | height: '0px', 7 | color: 'hsl(var(--muted-foreground))' 8 | }, 9 | '.ProseMirror': { 10 | overflow: 'auto', 11 | borderWidth: '1px', 12 | borderColor: 'hsl(var(--input))', 13 | backgroundColor: 'transparent', 14 | padding: '0.5rem', 15 | color: 'hsl(var(--foreground))' 16 | }, 17 | '.ProseMirror p:first-child': { marginTop: '0px' }, 18 | '.ProseMirror p:last-child': { marginBottom: '0px' }, 19 | '.ProseMirror-focused': { 20 | outlineWidth: 'var(--uk-form-focus-outline-width, 0)', 21 | outlineStyle: 'var(--uk-form-focus-outline-style, none)', 22 | outlineOffset: 'var(--uk-form-focus-outline-offset, 0px)', 23 | boxShadow: 24 | 'var(--uk-form-focus-shadow, 0 0 0 0 transparent, 0 0 0 1px hsl(var(--ring)), 0 0 #0000)', 25 | transitionProperty: 'var(--uk-form-focus-transition-property, box-shadow)', 26 | transitionDuration: 'var(--uk-form-focus-transition-duration, 150ms)', 27 | transitionTimingFunction: 'var(--uk-form-focus-transition-timing, ease-in-out)' 28 | }, 29 | '.uk-rte': { 30 | boxShadow: 'var(--uk-global-shadow)', 31 | borderRadius: 'var(--uk-global-radius)' 32 | }, 33 | '.uk-rte-header': { 34 | borderTopLeftRadius: 'var(--uk-global-radius)', 35 | borderTopRightRadius: 'var(--uk-global-radius)', 36 | display: 'flex', 37 | flexWrap: 'nowrap', 38 | overflow: 'hidden', 39 | borderWidth: '1px', 40 | borderBottomWidth: '0px', 41 | borderColor: 'hsl(var(--border))', 42 | padding: '0.5rem' 43 | }, 44 | '.uk-rte-toolbar': { 45 | marginBottom: '-2.5rem', 46 | display: 'flex', 47 | width: '100%', 48 | columnGap: '0.75rem', 49 | overflowX: 'scroll', 50 | paddingBottom: '2.5rem' 51 | }, 52 | '.uk-rte-toolbar-group': { display: 'flex', gap: '0.25rem' }, 53 | '.uk-rte-toolbar-group button.uk-active': { 54 | backgroundColor: 'hsl(var(--muted))', 55 | color: 'hsl(var(--muted-foreground))' 56 | }, 57 | '.uk-rte-toolbar-group a': { cursor: 'pointer' }, 58 | '.uk-rte-footer': { 59 | borderBottomRightRadius: 'var(--uk-global-radius)', 60 | borderBottomLeftRadius: 'var(--uk-global-radius)', 61 | borderWidth: '1px', 62 | borderTopWidth: '0px', 63 | borderColor: 'hsl(var(--border))', 64 | padding: '0.5rem', 65 | fontSize: '0.75rem', 66 | lineHeight: '1rem' 67 | }, 68 | '.uk-rte-link-close': { 69 | position: 'absolute', 70 | right: '0.5rem', 71 | top: '0.5rem' 72 | } 73 | }; 74 | -------------------------------------------------------------------------------- /src/lib/components/form/tag.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-input-tag': { 3 | // Reset 4 | backgroundColor: 'transparent', 5 | 6 | // Layout 7 | display: 'var(--uk-input-tag-display, flex)', 8 | minHeight: 'var(--uk-input-tag-min-height, 2.5rem)', 9 | padding: 'var(--uk-input-tag-padding, 0.5rem)', 10 | gap: 'var(--uk-input-tag-gap, 0.25rem)', 11 | flexWrap: 'var(--uk-input-tag-wrap, wrap)', 12 | alignItems: 'var(--uk-input-tag-align, center)', 13 | 14 | // Visual 15 | boxShadow: 'var(--uk-input-tag-shadow, var(--uk-form-input-shadow))', 16 | borderRadius: 'var(--uk-input-tag-radius, var(--uk-form-input-radius))', 17 | borderWidth: 'var(--uk-input-tag-border-width, 1px)', 18 | borderStyle: 'var(--uk-input-tag-border-style, solid)', 19 | borderColor: 'var(--uk-input-tag-border-color, hsl(var(--input)))', 20 | 21 | // Theme 22 | '--focus-shadow-color': 'hsl(var(--ring))', 23 | 24 | // Focus state 25 | '&:has(input:focus)': { 26 | outlineWidth: 'var(--uk-input-tag-focus-outline-width, 2px)', 27 | outlineStyle: 'var(--uk-input-tag-focus-outline-style, solid)', 28 | outlineColor: 'var(--uk-input-tag-focus-outline-color, transparent)', 29 | outlineOffset: 'var(--uk-input-tag-focus-outline-offset, 2px)', 30 | boxShadow: 31 | 'var(--uk-input-tag-focus-shadow, 0 0 0 0 transparent, 0 0 0 1px var(--focus-shadow-color), 0 0 #0000)' 32 | } 33 | }, 34 | 35 | '.uk-input-tag.uk-disabled': { 36 | opacity: 'var(--uk-input-tag-disabled-opacity, 0.5)' 37 | }, 38 | 39 | '.uk-input-tag input': { 40 | // Reset 41 | backgroundColor: 'transparent', 42 | outline: 'none', 43 | 44 | // Layout 45 | minHeight: 'var(--uk-input-tag-input-min-height, 1.75rem)', 46 | flex: 'var(--uk-input-tag-input-flex, 1)', 47 | padding: 'var(--uk-input-tag-input-padding, 0 0.25rem)', 48 | 49 | // Typography 50 | color: 'var(--uk-input-tag-input-color, hsl(var(--foreground)))', 51 | '&::placeholder': { 52 | color: 'var(--uk-input-tag-placeholder-color, hsl(var(--muted-foreground)))' 53 | } 54 | }, 55 | 56 | '.uk-input-tag.uk-form-destructive': { 57 | '--focus-shadow-color': 'hsl(var(--destructive))' 58 | } 59 | }; 60 | -------------------------------------------------------------------------------- /src/lib/components/icon.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | // Base icon styles 3 | '.uk-icon': { 4 | display: 'inline-flex', // Removed variable - fundamental layout 5 | color: 'var(--uk-icon-color, inherit)', 6 | fill: 'var(--uk-icon-fill, currentcolor)' 7 | }, 8 | 9 | // Button behavior 10 | 'button.uk-icon:not(:disabled)': { 11 | cursor: 'pointer' // Removed variable - fundamental button behavior 12 | }, 13 | 14 | // Browser reset - keep static vendor prefix rule as is 15 | '.uk-icon::-moz-focus-inner': { 16 | border: '0', 17 | padding: '0' 18 | }, 19 | 20 | // SVG fill and stroke handling 21 | ".uk-icon:not(.uk-preserve) [fill*='#']:not(.uk-preserve)": { 22 | fill: 'var(--uk-icon-fill-color, currentcolor)' 23 | }, 24 | 25 | ".uk-icon:not(.uk-preserve) [stroke*='#']:not(.uk-preserve)": { 26 | stroke: 'var(--uk-icon-stroke-color, currentcolor)' 27 | }, 28 | 29 | // Icon positioning 30 | '.uk-icon > *': { 31 | transform: 'var(--uk-icon-transform, translate(0, 0))' 32 | }, 33 | 34 | // Image icons 35 | '.uk-icon-image': { 36 | // Dimensions 37 | width: 'var(--uk-icon-image-size, 1.25rem)', 38 | height: 'var(--uk-icon-image-size, 1.25rem)', // Using same variable for consistent sizing 39 | 40 | // Keep static properties that don't need customization 41 | backgroundPosition: '50% 50%', 42 | backgroundRepeat: 'no-repeat', 43 | backgroundSize: 'contain', 44 | verticalAlign: 'middle', 45 | objectFit: 'scale-down', 46 | maxWidth: 'none' 47 | } 48 | }; 49 | -------------------------------------------------------------------------------- /src/lib/components/label.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-label': { 3 | // Layout 4 | display: 'inline-flex', // Removed variable - fundamental layout 5 | alignItems: 'center', // Removed variable - fundamental layout 6 | padding: 'var(--uk-label-padding, 0.125rem 0.625rem)', 7 | 8 | // Typography 9 | fontSize: 'var(--uk-label-font-size, var(--uk-global-font-size-s))', 10 | lineHeight: 'var(--uk-label-leading, var(--uk-global-leading-s))', 11 | fontWeight: 'var(--uk-label-font-weight, 600)', 12 | 13 | // Visual 14 | borderRadius: 'var(--uk-label-radius, var(--uk-global-radius))', 15 | boxShadow: 'var(--uk-label-shadow, var(--uk-global-shadow))', 16 | border: 'var(--uk-label-border, 1px solid hsl(var(--border)))', 17 | backgroundColor: 'var(--uk-label-bg, transparent)', 18 | color: 'var(--uk-label-color, hsl(var(--foreground)))' 19 | }, 20 | 21 | '.uk-label:hover': { 22 | transitionProperty: 'background-color', // Removed variable - fundamental transition 23 | transitionDuration: 'var(--uk-label-hover-duration, 150ms)', 24 | transitionTimingFunction: 'ease-in-out', // Removed variable - fundamental timing 25 | opacity: 'var(--uk-label-hover-opacity, 0.8)' 26 | }, 27 | 28 | // Variants using CSS variable reassignment pattern 29 | '.uk-label-primary': { 30 | '--uk-label-border': '1px solid hsl(var(--primary))', 31 | '--uk-label-bg': 'hsl(var(--primary))', 32 | '--uk-label-color': 'hsl(var(--primary-foreground))' 33 | }, 34 | 35 | '.uk-label-secondary': { 36 | '--uk-label-border': '1px solid hsl(var(--secondary))', 37 | '--uk-label-bg': 'hsl(var(--secondary))', 38 | '--uk-label-color': 'hsl(var(--secondary-foreground))' 39 | }, 40 | 41 | '.uk-label-destructive': { 42 | '--uk-label-border': '1px solid hsl(var(--destructive))', 43 | '--uk-label-bg': 'hsl(var(--destructive))', 44 | '--uk-label-color': 'hsl(var(--destructive-foreground))' 45 | } 46 | }; 47 | -------------------------------------------------------------------------------- /src/lib/components/leader.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-leader': { 3 | overflow: 'hidden' // Fundamental - required for text truncation 4 | }, 5 | 6 | '.uk-leader-fill::after': { 7 | // Layout 8 | display: 'inline-block', // Fundamental - required for content placement 9 | marginLeft: 'var(--uk-leader-spacing, 1rem)', // Keep as variable for spacing customization 10 | width: '0', // Fundamental - required for dynamic filling 11 | 12 | // Content 13 | content: 'attr(data-fill)', // Fundamental - required for leader dots 14 | whiteSpace: 'nowrap' // Fundamental - required for proper filling 15 | }, 16 | 17 | '.uk-leader-fill.uk-leader-hide::after': { 18 | display: 'none' // Fundamental - required for hiding behavior 19 | } 20 | }; 21 | -------------------------------------------------------------------------------- /src/lib/components/lightbox.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-lightbox': { 3 | // Fundamental overlay positioning 4 | display: 'none', 5 | position: 'fixed', 6 | top: '0', 7 | right: '0', 8 | bottom: '0', 9 | left: '0', 10 | 11 | // Customizable properties 12 | zIndex: 'var(--uk-lightbox-z-index, 1010)', 13 | opacity: '0', 14 | transition: 'var(--uk-lightbox-transition, opacity 0.15s linear)', 15 | touchAction: 'var(--uk-lightbox-touch-action, pinch-zoom)', 16 | background: 'var(--uk-lightbox-bg, hsl(var(--background)))' 17 | }, 18 | 19 | '.uk-lightbox.uk-open': { 20 | display: 'block', // Fundamental state 21 | opacity: '1' // Fundamental state 22 | }, 23 | 24 | '.uk-lightbox-page': { 25 | overflow: 'hidden' // Fundamental behavior 26 | }, 27 | 28 | '.uk-lightbox-items > *': { 29 | // Fundamental positioning 30 | position: 'absolute', 31 | top: '0', 32 | right: '0', 33 | bottom: '0', 34 | left: '0', 35 | display: 'none', 36 | justifyContent: 'center', 37 | alignItems: 'flex-start', 38 | 39 | // Customizable properties 40 | willChange: 'var(--uk-lightbox-will-change, transform, opacity)', 41 | overflow: 'var(--uk-lightbox-items-overflow, auto)' 42 | }, 43 | 44 | '.uk-lightbox-items > .uk-active': { 45 | display: 'flex' // Fundamental state 46 | }, 47 | 48 | '.uk-lightbox-items-fit > *': { 49 | alignItems: 'center' // Fundamental alignment 50 | }, 51 | 52 | '.uk-lightbox-items-fit > * > *': { 53 | maxWidth: '100vw', // Fundamental constraint 54 | maxHeight: '100vh' // Fundamental constraint 55 | }, 56 | 57 | '.uk-lightbox-items-fit > * > :not(iframe)': { 58 | width: 'auto', // Fundamental sizing 59 | height: 'auto' // Fundamental sizing 60 | }, 61 | 62 | '.uk-lightbox-items.uk-lightbox-items-fit .uk-lightbox-zoom:hover': { 63 | cursor: 'zoom-in' // Fundamental behavior 64 | }, 65 | 66 | '.uk-lightbox-items:not(.uk-lightbox-items-fit) .uk-lightbox-zoom:hover': { 67 | cursor: 'zoom-out' // Fundamental behavior 68 | }, 69 | 70 | '.uk-lightbox-thumbnav-vertical :where(img, video)': { 71 | maxWidth: 'var(--uk-lightbox-thumb-max-width, 100px)' 72 | }, 73 | 74 | '.uk-lightbox-thumbnav:not(.uk-lightbox-thumbnav-vertical) :where(img, video)': { 75 | maxHeight: 'var(--uk-lightbox-thumb-max-height, 100px)' 76 | }, 77 | 78 | '.uk-lightbox-thumbnav:empty, .uk-lightbox-dotnav:empty': { 79 | display: 'none' // Fundamental state 80 | }, 81 | 82 | '.uk-lightbox-caption': { 83 | backgroundColor: 'var(--uk-lightbox-caption-bg, hsl(var(--secondary)))', 84 | padding: 'var(--uk-lightbox-caption-padding, 1rem)', 85 | color: 'var(--uk-lightbox-caption-color, hsl(var(--secondary-foreground)))' 86 | }, 87 | 88 | '.uk-lightbox-caption:empty': { 89 | display: 'none' // Fundamental state 90 | }, 91 | 92 | '.uk-lightbox-iframe': { 93 | width: 'var(--uk-lightbox-iframe-width, 80%)', 94 | height: 'var(--uk-lightbox-iframe-height, 80%)' 95 | } 96 | }; 97 | -------------------------------------------------------------------------------- /src/lib/components/link.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | // Muted variant 3 | 'a.uk-link-muted, .uk-link-muted a, .uk-link-toggle .uk-link-muted': { 4 | fontWeight: 'var(--uk-link-muted-font-weight, 500)', 5 | color: 'var(--uk-link-muted-color, hsl(var(--muted-foreground)))', 6 | textDecorationLine: 'underline', // Fundamental link behavior 7 | textUnderlineOffset: 'var(--uk-link-underline-offset, 4px)' 8 | }, 9 | 10 | // Text variant hover state 11 | 'a.uk-link-text:hover, .uk-link-text a:hover, .uk-link-toggle:hover .uk-link-text': { 12 | textDecorationLine: 'underline', // Fundamental link behavior 13 | textUnderlineOffset: 'var(--uk-link-underline-offset, 4px)' 14 | }, 15 | 16 | // Reset variant (no variables needed - purpose is to reset) 17 | 'a.uk-link-reset, .uk-link-reset a': { 18 | textDecoration: 'none !important', // Fundamental reset 19 | fontWeight: '400 !important' // Fundamental reset 20 | }, 21 | 22 | // Toggle variant (no variables needed - functional class) 23 | '.uk-link-toggle': { 24 | textDecoration: 'none !important' // Fundamental behavior 25 | }, 26 | 27 | // Base link style 28 | '.uk-link': { 29 | fontWeight: 'var(--uk-link-font-weight, 500)', 30 | textDecorationLine: 'underline', // Fundamental link behavior 31 | textUnderlineOffset: 'var(--uk-link-underline-offset, 4px)' 32 | } 33 | }; 34 | -------------------------------------------------------------------------------- /src/lib/components/list.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-list > *': { 3 | MozColumnBreakInside: 'avoid', 4 | breakInside: 'avoid-column' 5 | }, 6 | '.uk-list > * > :last-child': { marginBottom: '0' }, 7 | '.uk-list > :nth-child(n+2), .uk-list > * > ul': { 8 | marginTop: 'var(--uk-list-item-margin-top, 0.5rem)' 9 | }, 10 | '.uk-list-disc, .uk-list-circle, .uk-list-square, .uk-list-decimal, .uk-list-hyphen': { 11 | paddingLeft: 'var(--uk-list-indent, 32px)' 12 | }, 13 | '.uk-list-disc': { listStyleType: 'disc' }, 14 | '.uk-list-circle': { listStyleType: 'circle' }, 15 | '.uk-list-square': { listStyleType: 'square' }, 16 | '.uk-list-decimal': { listStyleType: 'decimal' }, 17 | '.uk-list-hyphen': { listStyleType: "'–  '" }, 18 | '.uk-list-muted > ::marker': { 19 | color: 'var(--uk-list-marker-muted-color, hsl(var(--muted-foreground)))' 20 | }, 21 | '.uk-list-primary > ::marker': { 22 | color: 'var(--uk-list-marker-primary-color, hsl(var(--primary)))' 23 | }, 24 | '.uk-list-secondary > ::marker': { 25 | color: 'var(--uk-list-marker-secondary-color, hsl(var(--secondary-foreground)))' 26 | }, 27 | '.uk-list-bullet > *': { 28 | position: 'relative', 29 | paddingLeft: 'var(--uk-list-bullet-indent, 32px)' 30 | }, 31 | '.uk-list-bullet > ::before': { 32 | content: '""', 33 | position: 'absolute', 34 | top: '0', 35 | left: '0', 36 | width: 'var(--uk-list-bullet-width, 32px)', 37 | height: 'var(--uk-list-bullet-height, 1.5em)', 38 | backgroundImage: 'var(--uk-list-bullet-image)', 39 | backgroundRepeat: 'no-repeat', 40 | backgroundPosition: '50% 50%' 41 | }, 42 | '.uk-list-divider > :nth-child(n+2)': { 43 | marginTop: 'var(--uk-list-divider-item-margin-top, 0.5rem)', 44 | borderTopWidth: 'var(--uk-list-divider-border-width, 1px)', 45 | borderColor: 'var(--uk-list-divider-border-color, hsl(var(--border)))', 46 | paddingTop: 'var(--uk-list-divider-item-padding-top, 0.5rem)' 47 | }, 48 | '.uk-list-striped > *': { padding: 'var(--uk-list-striped-item-padding, 0.5rem)' }, 49 | '.uk-list-striped > *:nth-of-type(odd)': { 50 | borderTopWidth: 'var(--uk-list-striped-border-width, 1px)', // Shorthand variable 51 | borderBottomWidth: 'var(--uk-list-striped-border-width, 1px)', // Shorthand variable 52 | borderColor: 'var(--uk-list-striped-border-color, hsl(var(--border)))' 53 | }, 54 | '.uk-list-striped > :nth-of-type(odd)': { 55 | backgroundColor: 'var(--uk-list-striped-background-color, hsl(var(--muted) / 0.5))' 56 | }, 57 | '.uk-list-striped > :nth-child(n+2)': { marginTop: '0' } 58 | }; 59 | -------------------------------------------------------------------------------- /src/lib/components/placeholder.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | // Placeholder 3 | '.uk-placeholder': { 4 | marginBottom: 'var(--uk-placeholder-margin-bottom, 1.25rem)', 5 | padding: 'var(--uk-placeholder-padding, 2rem 2rem)', 6 | background: 'var(--uk-placeholder-background, transparent)', 7 | border: 'var(--uk-placeholder-border, 1px dashed)', // Shorthand variable for border 8 | borderColor: 'var(--uk-placeholder-border-color, hsl(var(--border)))' // borderColor is already using a variable, encapsulate it too for component level customization 9 | }, 10 | '.uk-placeholder > :last-child': { 11 | marginBottom: '0' // obvious value, keep static 12 | } 13 | }; 14 | -------------------------------------------------------------------------------- /src/lib/components/print.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '@media print': { 3 | '*,*::before,*::after': { 4 | background: 'transparent !important', 5 | color: 'black !important', 6 | boxShadow: 'none !important', 7 | textShadow: 'none !important' 8 | }, 9 | 'a,a:visited': { 10 | textDecoration: 'underline' 11 | }, 12 | 'pre,blockquote': { 13 | border: '1px solid #999', 14 | pageBreakInside: 'avoid' 15 | }, 16 | thead: { 17 | display: 'table-header-group' 18 | }, 19 | 'tr,img': { 20 | pageBreakInside: 'avoid' 21 | }, 22 | img: { 23 | maxWidth: '100% !important' 24 | }, 25 | '@page': { 26 | margin: '0.5cm' 27 | }, 28 | 'p,h2,h3': { 29 | orphans: '3', 30 | widows: '3' 31 | }, 32 | 'h2,h3': { 33 | pageBreakAfter: 'avoid' 34 | } 35 | } 36 | }; 37 | -------------------------------------------------------------------------------- /src/lib/components/progress.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | // Progress 3 | '.uk-progress': { 4 | verticalAlign: 'baseline', // obvious value 5 | display: 'block', // obvious value 6 | width: '100%', // obvious value 7 | border: '0', // obvious value 8 | marginBottom: 'var(--uk-progress-margin-bottom, 1.25rem)', 9 | height: 'var(--uk-progress-height, 1rem)', 10 | borderRadius: 'var(--uk-progress-radius, 500px)', 11 | overflow: 'hidden', // obvious value 12 | backgroundColor: 'var(--uk-progress-track-color, hsl(var(--primary) / 0.2))' // Renamed for clarity - track color 13 | }, 14 | '.uk-progress::-webkit-progress-bar': { 15 | backgroundColor: 'transparent' // browser specific, obvious value 16 | }, 17 | '.uk-progress::-webkit-progress-value': { 18 | transition: 'var(--uk-progress-transition, width 0.6s ease)', // Shorthand variable for transition 19 | backgroundColor: 'var(--uk-progress-value-color, hsl(var(--primary)))' // Renamed for clarity - value color 20 | }, 21 | '.uk-progress::-moz-progress-bar': { 22 | transition: 'var(--uk-progress-transition, width 0.6s ease)', // Reusing the same variable for consistency 23 | backgroundColor: 'var(--uk-progress-value-color, hsl(var(--primary)))' // Reusing the same variable for consistency 24 | } 25 | }; 26 | -------------------------------------------------------------------------------- /src/lib/components/sortable.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-sortable': { 3 | position: 'relative' // obvious value, required for positioning sortable items 4 | }, 5 | '.uk-sortable > :last-child': { 6 | marginBottom: '0' // obvious value, remove bottom margin from last child 7 | }, 8 | '.uk-sortable-drag': { 9 | position: 'fixed !important', // important for dragging functionality, obvious value 10 | zIndex: 'var(--uk-sortable-drag-z-index, 1050) !important', // Customizable z-index, important for stacking above other elements 11 | pointerEvents: 'none' // obvious value, prevent interaction with dragged element 12 | }, 13 | '.uk-sortable-placeholder': { 14 | opacity: 'var(--uk-sortable-placeholder-opacity, 0)', // Customizable placeholder opacity, default to fully transparent 15 | pointerEvents: 'none' // obvious value, placeholder should not be interactive 16 | }, 17 | '.uk-sortable-empty': { 18 | minHeight: 'var(--uk-sortable-empty-min-height, 3.5rem)' // Customizable minimum height for empty sortable area 19 | }, 20 | '.uk-sortable-handle:hover': { 21 | cursor: 'var(--uk-sortable-handle-hover-cursor, move)' // Customizable cursor on handle hover, default to 'move' 22 | } 23 | }; 24 | -------------------------------------------------------------------------------- /src/lib/components/spinner.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-spinner > *': { 3 | animation: 'uk-spinner-rotate 1.4s linear infinite' 4 | }, 5 | '@keyframes uk-spinner-rotate': { 6 | '0%': { 7 | transform: 'rotate(0deg)' 8 | }, 9 | '100%': { 10 | transform: 'rotate(270deg)' 11 | } 12 | }, 13 | '.uk-spinner > * > *': { 14 | strokeDasharray: '88px', 15 | strokeDashoffset: '0', 16 | transformOrigin: 'center', 17 | animation: 'uk-spinner-dash 1.4s ease-in-out infinite', 18 | strokeWidth: '1', 19 | strokeLinecap: 'round' 20 | }, 21 | '@keyframes uk-spinner-dash': { 22 | '0%': { 23 | strokeDashoffset: '88px' 24 | }, 25 | '50%': { 26 | strokeDashoffset: '22px', 27 | transform: 'rotate(135deg)' 28 | }, 29 | '100%': { 30 | strokeDashoffset: '88px', 31 | transform: 'rotate(450deg)' 32 | } 33 | }, 34 | '.uk-spinner': {} 35 | }; 36 | -------------------------------------------------------------------------------- /src/lib/components/sticky.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-sticky': { 3 | position: 'relative', 4 | zIndex: '980', 5 | boxSizing: 'border-box' 6 | }, 7 | '.uk-sticky-fixed': { 8 | margin: '0 !important', 9 | WebkitBackfaceVisibility: 'hidden', 10 | backfaceVisibility: 'hidden' 11 | }, 12 | ".uk-sticky[class*='uk-anmt-']": { 13 | animationDuration: '0.2s' 14 | }, 15 | '.uk-sticky.uk-anmt-reverse': { 16 | animationDuration: '0.2s' 17 | }, 18 | '.uk-sticky-placeholder': { 19 | pointerEvents: 'none' 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/lib/components/svg.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | ".uk-svg, .uk-svg:not(.uk-preserve) [fill*='#']:not(.uk-preserve)": { 3 | fill: 'currentcolor' 4 | }, 5 | ".uk-svg:not(.uk-preserve) [stroke*='#']:not(.uk-preserve)": { 6 | stroke: 'currentcolor' 7 | }, 8 | '.uk-svg': { 9 | transform: 'translate(0, 0)' 10 | } 11 | }; 12 | -------------------------------------------------------------------------------- /src/lib/components/switcher.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-switcher > :not(.uk-active)': { 3 | display: 'none' 4 | } 5 | }; 6 | -------------------------------------------------------------------------------- /src/lib/components/tag.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | // Tags 3 | '.uk-tag': { 4 | // Layout 5 | display: 'var(--uk-tag-display, inline-flex)', 6 | alignItems: 'var(--uk-tag-align, center)', 7 | minHeight: 'var(--uk-tag-height, 1.75rem)', 8 | padding: 'var(--uk-tag-padding, 0.25rem 0.5rem)', 9 | gap: 'var(--uk-tag-gap, 0.5rem)', 10 | 11 | // Typography 12 | fontSize: 'var(--uk-tag-font-size, var(--uk-global-font-size-s))', 13 | lineHeight: 'var(--uk-tag-leading, var(--uk-global-leading-s))', 14 | 15 | // Visual 16 | borderRadius: 'var(--uk-tag-radius, var(--uk-global-radius-s))', 17 | backgroundColor: 'var(--uk-tag-bg, transparent)', 18 | color: 'var(--uk-tag-color, hsl(var(--foreground)))', 19 | 20 | // Reset transition 21 | transition: 'none' 22 | }, 23 | 24 | '.uk-tag:hover': { 25 | transitionProperty: 'background-color', // Removed variable - fundamental transition 26 | transitionDuration: 'var(--uk-tag-hover-duration, 150ms)', 27 | transitionTimingFunction: 'ease-in-out', // Removed variable - fundamental timing 28 | opacity: 'var(--uk-tag-hover-opacity, 0.8)' 29 | }, 30 | 31 | // Variants 32 | '.uk-tag-primary': { 33 | '--uk-tag-bg': 'hsl(var(--primary))', 34 | '--uk-tag-color': 'hsl(var(--primary-foreground))' 35 | }, 36 | '.uk-tag-primary:hover': { 37 | '--uk-tag-bg': 'hsl(var(--primary) / 0.8)' 38 | }, 39 | '.uk-tag-secondary': { 40 | '--uk-tag-bg': 'hsl(var(--secondary))', 41 | '--uk-tag-color': 'hsl(var(--secondary-foreground))' 42 | }, 43 | '.uk-tag-secondary:hover': { 44 | '--uk-tag-bg': 'hsl(var(--secondary) / 0.8)' 45 | }, 46 | '.uk-tag-destructive': { 47 | '--uk-tag-bg': 'hsl(var(--destructive))', 48 | '--uk-tag-color': 'hsl(var(--destructive-foreground))' 49 | }, 50 | '.uk-tag-destructive:hover': { 51 | '--uk-tag-bg': 'hsl(var(--destructive) / 0.8)' 52 | } 53 | }; 54 | -------------------------------------------------------------------------------- /src/lib/components/thumbnav.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-thumbnav': { 3 | display: 'flex', // obvious value, layout property 4 | flexWrap: 'wrap', // obvious value, layout property 5 | margin: '0', // reset, obvious value 6 | padding: '0', // reset, obvious value 7 | listStyle: 'none', // reset, obvious value for lists 8 | marginLeft: 'var(--uk-thumbnav-margin-horizontal, -1rem)' // Customizable horizontal margin for spacing 9 | }, 10 | '.uk-thumbnav > *': { 11 | paddingLeft: 'var(--uk-thumbnav-item-padding-horizontal, 1rem)' // Customizable horizontal padding for item spacing, consistent with container margin 12 | }, 13 | '.uk-thumbnav > * > *': { 14 | display: 'inline-block', // obvious value, layout property 15 | position: 'relative' // obvious value, for positioning pseudo-element 16 | }, 17 | '.uk-thumbnav > * > *::after': { 18 | content: "''", // required for pseudo-element, obvious value 19 | position: 'absolute', // required for overlay, obvious value 20 | top: '0', // position fill, obvious value 21 | bottom: '0', // position fill, obvious value 22 | left: '0', // position fill, obvious value 23 | right: '0', // position fill, obvious value 24 | backgroundImage: 25 | 'var(--uk-thumbnav-overlay-background, linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4)))', // Customizable overlay gradient 26 | transition: 'var(--uk-thumbnav-overlay-transition, opacity 0.1s ease-in-out)' // Customizable overlay transition 27 | }, 28 | '.uk-thumbnav > * > :hover::after': { 29 | opacity: 'var(--uk-thumbnav-overlay-hover-opacity, 0)' // Customizable overlay opacity on hover 30 | }, 31 | '.uk-thumbnav > .uk-active > *::after': { 32 | opacity: 'var(--uk-thumbnav-overlay-active-opacity, 0)' // Customizable overlay opacity on active state 33 | }, 34 | '.uk-thumbnav-vertical': { 35 | flexDirection: 'column', // obvious value, layout change for vertical 36 | marginLeft: 'var(--uk-thumbnav-vertical-margin-horizontal, 0)', // Customizable horizontal margin reset for vertical layout 37 | marginTop: 'var(--uk-thumbnav-margin-vertical, -1rem)' // Customizable vertical margin for vertical spacing 38 | }, 39 | '.uk-thumbnav-vertical > *': { 40 | paddingLeft: '0', // reset horizontal padding for vertical layout, obvious value 41 | paddingTop: 'var(--uk-thumbnav-item-padding-vertical, 1rem)' // Customizable vertical padding for item spacing in vertical layout 42 | } 43 | }; 44 | -------------------------------------------------------------------------------- /src/lib/components/tooltip.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '.uk-tooltip': { 3 | // Layout 4 | display: 'none', // Removed variable - fundamental behavior 5 | position: 'absolute', // Removed variable - fundamental positioning 6 | zIndex: 'var(--uk-tooltip-z-index, 1030)', 7 | top: 'var(--uk-tooltip-top, 0)', 8 | maxWidth: 'var(--uk-tooltip-max-width, 208px)', 9 | padding: 'var(--uk-tooltip-padding, 0.375rem 0.75rem)', 10 | 11 | // Typography 12 | fontSize: 'var(--uk-tooltip-font-size, var(--uk-global-font-size-s))', 13 | lineHeight: 'var(--uk-tooltip-leading, var(--uk-global-leading-s))', 14 | 15 | // Visual 16 | borderRadius: 'var(--uk-tooltip-radius, var(--uk-global-radius))', 17 | backgroundColor: 'var(--uk-tooltip-bg, hsl(var(--primary)))', 18 | color: 'var(--uk-tooltip-color, hsl(var(--primary-foreground)))', 19 | 20 | // Position offset variables - keep as is per rule #4 21 | '--uk-position-offset': '10px', 22 | '--uk-position-viewport-offset': '8px' 23 | }, 24 | 25 | '.uk-tooltip.uk-active': { 26 | display: 'block' // Removed variable - fundamental behavior 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /src/lib/merger.ts: -------------------------------------------------------------------------------- 1 | import merge from 'lodash/merge.js'; 2 | import type { Components, CSSRuleObject } from './types.js'; 3 | 4 | export default (options: { palettes: CSSRuleObject; components: Components }): CSSRuleObject => { 5 | const { palettes, components } = options; 6 | 7 | const rules: CSSRuleObject = {}; 8 | 9 | for (const key in components) { 10 | if (Object.prototype.hasOwnProperty.call(components, key)) { 11 | merge(rules, components[key]); 12 | } 13 | } 14 | 15 | return { ...palettes, ...rules }; 16 | }; 17 | -------------------------------------------------------------------------------- /src/lib/plugin-vite.ts: -------------------------------------------------------------------------------- 1 | import type { ResolvedConfig } from 'vite'; 2 | import fs, { readFileSync } from 'fs'; 3 | import path from 'path'; 4 | import merge from 'lodash/merge.js'; 5 | import { fileURLToPath } from 'url'; 6 | import { preflight } from './components/index.js'; 7 | import { defaults, palettes, components } from './context.js'; 8 | import postcssJs from 'postcss-js'; 9 | import postcss from 'postcss'; 10 | import type { Context, CSSRuleObject, Options } from './types.js'; 11 | import merger from './merger.js'; 12 | 13 | function css(rules: { [key: string]: any }): string { 14 | const processor = postcss([]); 15 | 16 | return processor.process(rules, { parser: postcssJs.parse }).css; 17 | } 18 | 19 | export default function customPalettePlugin(options: Options): any { 20 | let config: ResolvedConfig; 21 | 22 | return { 23 | name: 'vite-plugin-franken', 24 | configResolved(resolvedConfig: ResolvedConfig) { 25 | config = resolvedConfig; 26 | 27 | try { 28 | const pkgJson = JSON.parse(readFileSync('package.json', 'utf-8')); 29 | 30 | const tailwindVersion = 31 | pkgJson.dependencies?.tailwindcss || pkgJson.devDependencies?.tailwindcss; 32 | 33 | if (tailwindVersion?.startsWith('^4.') && options?.preflight) { 34 | console.warn( 35 | '\n[@franken-ui/ui] Warning: Tailwind CSS v4 detected in your project.' + 36 | '\nYou may want to disable preflight in Franken UI since Tailwind v4' + 37 | '\nalready includes modern CSS reset styles.\n' 38 | ); 39 | } 40 | } catch (error) {} 41 | }, 42 | buildStart() { 43 | let rules = options?.preflight ? { ...preflight } : {}; 44 | 45 | let context: Context = { 46 | defaults, 47 | palettes: palettes(options), 48 | components 49 | }; 50 | 51 | if (options.extensions) { 52 | for (const [plugin, config] of options.extensions) { 53 | context = plugin(context, config); 54 | } 55 | } 56 | 57 | // merged rules of palettes and components 58 | const r: CSSRuleObject = merger({ 59 | palettes: context.palettes, 60 | components: context.components 61 | }); 62 | 63 | rules = merge(rules, context.defaults, r); 64 | 65 | const __dirname = path.dirname(fileURLToPath(import.meta.url)); 66 | const outputPath = path.join(__dirname, '/css/franken-ui.css'); 67 | 68 | fs.mkdirSync(path.dirname(outputPath), { recursive: true }); 69 | fs.writeFileSync(outputPath, css(rules)); 70 | } 71 | }; 72 | } 73 | -------------------------------------------------------------------------------- /src/lib/postcss/combine-duplicated-selectors.cjs: -------------------------------------------------------------------------------- 1 | module.exports = require('postcss-combine-duplicated-selectors'); 2 | -------------------------------------------------------------------------------- /src/lib/postcss/sort-media-queries.cjs: -------------------------------------------------------------------------------- 1 | module.exports = require('postcss-sort-media-queries'); 2 | -------------------------------------------------------------------------------- /src/lib/shadcn-ui/preset-quick.ts: -------------------------------------------------------------------------------- 1 | import defaultTheme from 'tailwindcss/defaultTheme.js'; 2 | import ui from '../index.js'; 3 | import type { Options } from '../types.js'; 4 | 5 | export default function (options: Options = {}) { 6 | return { 7 | darkMode: 'class', 8 | theme: { 9 | extend: { 10 | colors: { 11 | background: 'hsl(var(--background))', 12 | foreground: 'hsl(var(--foreground))', 13 | muted: 'hsl(var(--muted))', 14 | 'muted-foreground': 'hsl(var(--muted-foreground))', 15 | card: 'hsl(var(--card))', 16 | 'card-foreground': 'hsl(var(--card-foreground))', 17 | popover: 'hsl(var(--popover))', 18 | 'popover-foreground': 'hsl(var(--popover-foreground))', 19 | border: 'hsl(var(--border))', 20 | input: 'hsl(var(--input))', 21 | primary: 'hsl(var(--primary))', 22 | 'primary-foreground': 'hsl(var(--primary-foreground))', 23 | secondary: 'hsl(var(--secondary))', 24 | 'secondary-foreground': 'hsl(var(--secondary-foreground))', 25 | accent: 'hsl(var(--accent))', 26 | 'accent-foreground': 'hsl(var(--accent-foreground))', 27 | destructive: 'hsl(var(--destructive))', 28 | 'destructive-foreground': 'hsl(var(--destructive-foreground))', 29 | ring: 'hsl(var(--ring))' 30 | }, 31 | fontFamily: { 32 | 'geist-sans': ['Geist Sans', ...defaultTheme.fontFamily.sans], 33 | 'geist-mono': ['Geist Mono', ...defaultTheme.fontFamily.mono] 34 | }, 35 | screens: { 36 | 'max-sm': { max: '640px' }, 37 | 'max-md': { max: '768px' }, 38 | 'max-lg': { max: '1024px' }, 39 | 'max-xl': { max: '1280px' } 40 | } 41 | } 42 | }, 43 | plugins: [ui(options)] 44 | }; 45 | } 46 | -------------------------------------------------------------------------------- /src/lib/types.ts: -------------------------------------------------------------------------------- 1 | export interface RecursiveKeyValuePair { 2 | [key: string]: V | RecursiveKeyValuePair; 3 | } 4 | 5 | export type CSSRuleObject = RecursiveKeyValuePair; 6 | 7 | export type Colors = { 8 | '--background': string; 9 | '--foreground': string; 10 | '--muted': string; 11 | '--muted-foreground': string; 12 | '--popover': string; 13 | '--popover-foreground': string; 14 | '--card': string; 15 | '--card-foreground': string; 16 | '--border': string; 17 | '--input': string; 18 | '--primary': string; 19 | '--primary-foreground': string; 20 | '--secondary': string; 21 | '--secondary-foreground': string; 22 | '--accent': string; 23 | '--accent-foreground': string; 24 | '--destructive': string; 25 | '--destructive-foreground': string; 26 | '--ring': string; 27 | }; 28 | 29 | export type Palette = { 30 | [key: string]: Colors; 31 | }; 32 | 33 | export type Options = { 34 | preflight?: boolean; 35 | customPalette?: Palette; 36 | extensions?: Extensions; 37 | }; 38 | 39 | const components = [ 40 | 'accordion', 41 | 'alert', 42 | 'animation', 43 | 'badge', 44 | 'breadcrumb', 45 | 'button', 46 | 'card', 47 | 'chart', 48 | 'cmd', 49 | 'comment', 50 | 'container', 51 | 'cover', 52 | 'date', 53 | 'divider', 54 | 'dotnav', 55 | 'drop', 56 | 'form', 57 | 'heading', 58 | 'icon', 59 | 'label', 60 | 'leader', 61 | 'lightbox', 62 | 'link', 63 | 'list', 64 | 'modal', 65 | 'nav', 66 | 'notification', 67 | 'offcanvas', 68 | 'pagination', 69 | 'sizing', 70 | 'slider', 71 | 'sortable', 72 | 'spinner', 73 | 'stepper', 74 | 'sticky', 75 | 'svg', 76 | 'switcher', 77 | 'tab', 78 | 'table', 79 | 'theme-switcher', 80 | 'thumbnav', 81 | 'tooltip', 82 | 'utility', 83 | 'media', 84 | 'print' 85 | ] as const; 86 | 87 | export type ComponentKey = (typeof components)[number] | string; 88 | 89 | export type Component = { [key: string]: CSSRuleObject }; 90 | 91 | export type Components = { 92 | [K in ComponentKey]: Component; 93 | } & { [key: string]: Component }; 94 | 95 | export type Context = { 96 | defaults: { ':root': CSSRuleObject; '.dark': CSSRuleObject; [key: string]: CSSRuleObject }; 97 | palettes: CSSRuleObject; 98 | components: Components; 99 | }; 100 | 101 | export type Extension = (context: Context, config: ExtensionConfig) => Context; 102 | 103 | export type ExtensionConfig = Record; 104 | 105 | export type Extensions = [Function, ExtensionConfig][]; 106 | -------------------------------------------------------------------------------- /src/routes/+layout.js: -------------------------------------------------------------------------------- 1 | export const prerender = true; 2 | -------------------------------------------------------------------------------- /src/routes/+page.svelte: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/franken-ui/ui/a93d3fdfbd4a57d85fd14d6f040cb3f4d94be9d7/src/routes/+page.svelte -------------------------------------------------------------------------------- /static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/franken-ui/ui/a93d3fdfbd4a57d85fd14d6f040cb3f4d94be9d7/static/favicon.png -------------------------------------------------------------------------------- /static/fonts/Geist/Mono.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/franken-ui/ui/a93d3fdfbd4a57d85fd14d6f040cb3f4d94be9d7/static/fonts/Geist/Mono.woff2 -------------------------------------------------------------------------------- /static/fonts/Geist/Sans.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/franken-ui/ui/a93d3fdfbd4a57d85fd14d6f040cb3f4d94be9d7/static/fonts/Geist/Sans.woff2 -------------------------------------------------------------------------------- /static/fonts/Geist/style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Geist Sans'; 3 | src: url('/fonts/Geist/Sans.woff2') format('woff2'); 4 | font-display: swap; 5 | } 6 | @font-face { 7 | font-family: 'Geist Mono'; 8 | src: url('/fonts/Geist/Mono.woff2') format('woff2'); 9 | font-display: swap; 10 | } 11 | -------------------------------------------------------------------------------- /static/images/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/franken-ui/ui/a93d3fdfbd4a57d85fd14d6f040cb3f4d94be9d7/static/images/avatar.jpg -------------------------------------------------------------------------------- /static/images/dark.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/franken-ui/ui/a93d3fdfbd4a57d85fd14d6f040cb3f4d94be9d7/static/images/dark.jpg -------------------------------------------------------------------------------- /static/images/icons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /static/images/image-type.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/franken-ui/ui/a93d3fdfbd4a57d85fd14d6f040cb3f4d94be9d7/static/images/image-type.avif -------------------------------------------------------------------------------- /static/images/image-type.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/franken-ui/ui/a93d3fdfbd4a57d85fd14d6f040cb3f4d94be9d7/static/images/image-type.jpeg -------------------------------------------------------------------------------- /static/images/image-type.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/franken-ui/ui/a93d3fdfbd4a57d85fd14d6f040cb3f4d94be9d7/static/images/image-type.webp -------------------------------------------------------------------------------- /static/images/light.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/franken-ui/ui/a93d3fdfbd4a57d85fd14d6f040cb3f4d94be9d7/static/images/light.jpg -------------------------------------------------------------------------------- /static/images/photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/franken-ui/ui/a93d3fdfbd4a57d85fd14d6f040cb3f4d94be9d7/static/images/photo.jpg -------------------------------------------------------------------------------- /static/images/photo2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/franken-ui/ui/a93d3fdfbd4a57d85fd14d6f040cb3f4d94be9d7/static/images/photo2.jpg -------------------------------------------------------------------------------- /static/images/photo3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/franken-ui/ui/a93d3fdfbd4a57d85fd14d6f040cb3f4d94be9d7/static/images/photo3.jpg -------------------------------------------------------------------------------- /static/images/size-h.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/franken-ui/ui/a93d3fdfbd4a57d85fd14d6f040cb3f4d94be9d7/static/images/size-h.jpg -------------------------------------------------------------------------------- /static/images/size-v.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/franken-ui/ui/a93d3fdfbd4a57d85fd14d6f040cb3f4d94be9d7/static/images/size-v.jpg -------------------------------------------------------------------------------- /static/images/size1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/franken-ui/ui/a93d3fdfbd4a57d85fd14d6f040cb3f4d94be9d7/static/images/size1.jpg -------------------------------------------------------------------------------- /static/images/size2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/franken-ui/ui/a93d3fdfbd4a57d85fd14d6f040cb3f4d94be9d7/static/images/size2.jpg -------------------------------------------------------------------------------- /static/images/slider1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/franken-ui/ui/a93d3fdfbd4a57d85fd14d6f040cb3f4d94be9d7/static/images/slider1.jpg -------------------------------------------------------------------------------- /static/images/slider2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/franken-ui/ui/a93d3fdfbd4a57d85fd14d6f040cb3f4d94be9d7/static/images/slider2.jpg -------------------------------------------------------------------------------- /static/images/slider3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/franken-ui/ui/a93d3fdfbd4a57d85fd14d6f040cb3f4d94be9d7/static/images/slider3.jpg -------------------------------------------------------------------------------- /static/images/slider4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/franken-ui/ui/a93d3fdfbd4a57d85fd14d6f040cb3f4d94be9d7/static/images/slider4.jpg -------------------------------------------------------------------------------- /static/images/slider5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/franken-ui/ui/a93d3fdfbd4a57d85fd14d6f040cb3f4d94be9d7/static/images/slider5.jpg -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from '@sveltejs/adapter-static'; 2 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; 3 | 4 | /** @type {import('@sveltejs/kit').Config} */ 5 | const config = { 6 | // Consult https://kit.svelte.dev/docs/integrations#preprocessors 7 | // for more information about preprocessors 8 | preprocess: vitePreprocess(), 9 | 10 | kit: { 11 | // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. 12 | // If your environment is not supported or you settled on a specific environment, switch out the adapter. 13 | // See https://kit.svelte.dev/docs/adapters for more information about adapters. 14 | adapter: adapter(), 15 | alias: { 16 | 'css/*': './src/css/*', 17 | 'franken/*': './src/franken/*', 18 | 'uikit-util': './src/lib/uikit/js/util/index.js' 19 | } 20 | } 21 | }; 22 | 23 | export default config; 24 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | import franken from './src/lib/shadcn-ui/preset-quick'; 2 | 3 | /** @type {import('tailwindcss').Config} */ 4 | export default { 5 | presets: [ 6 | franken({ 7 | customPalette: { 8 | '.uk-theme-emerald': { 9 | '--background': '160.1 100% 95%', 10 | '--foreground': '160.1 5% 10%', 11 | '--card': '160.1 50% 90%', 12 | '--card-foreground': '160.1 5% 15%', 13 | '--popover': '160.1 100% 95%', 14 | '--popover-foreground': '160.1 100% 10%', 15 | '--primary': '160.1 84.1% 39.4%', 16 | '--primary-foreground': '0 0% 100%', 17 | '--secondary': '160.1 30% 70%', 18 | '--secondary-foreground': '0 0% 0%', 19 | '--muted': '122.1 30% 85%', 20 | '--muted-foreground': '160.1 5% 40%', 21 | '--accent': '122.1 30% 80%', 22 | '--accent-foreground': '160.1 5% 15%', 23 | '--destructive': '0 100% 50%', 24 | '--destructive-foreground': '160.1 5% 90%', 25 | '--border': '160.1 30% 63%', 26 | '--input': '160.1 30% 50%', 27 | '--ring': '160.1 84.1% 39.4%' 28 | }, 29 | '.dark.uk-theme-emerald': { 30 | '--background': '160.1 50% 10%', 31 | '--foreground': '160.1 5% 90%', 32 | '--card': '160.1 50% 10%', 33 | '--card-foreground': '160.1 5% 90%', 34 | '--popover': '160.1 50% 5%', 35 | '--popover-foreground': '160.1 5% 90%', 36 | '--primary': '160.1 84.1% 39.4%', 37 | '--primary-foreground': '0 0% 100%', 38 | '--secondary': '160.1 30% 20%', 39 | '--secondary-foreground': '0 0% 100%', 40 | '--muted': '122.1 30% 25%', 41 | '--muted-foreground': '160.1 5% 63%', 42 | '--accent': '122.1 30% 25%', 43 | '--accent-foreground': '160.1 5% 90%', 44 | '--destructive': '0 100% 50%', 45 | '--destructive-foreground': '160.1 5% 90%', 46 | '--border': '160.1 30% 50%', 47 | '--input': '160.1 30% 50%', 48 | '--ring': '160.1 84.1% 39.4%' 49 | } 50 | } 51 | }) 52 | ], 53 | content: ['./src/**/*.{html,js,svelte,ts}'], 54 | safelist: [ 55 | { 56 | pattern: /^uk-/ 57 | } 58 | ], 59 | theme: { 60 | extend: {} 61 | }, 62 | plugins: [] 63 | }; 64 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | import { defineConfig } from 'vite'; 3 | import path from 'path'; 4 | import franken from './src/lib/plugin-vite.js'; 5 | 6 | export default defineConfig({ 7 | plugins: [ 8 | sveltekit(), 9 | franken({ 10 | preflight: true 11 | }) 12 | ], 13 | resolve: { 14 | alias: { 15 | 'uikit-util': path.resolve(__dirname, 'src/lib/uikit/js/util/index.js') 16 | } 17 | } 18 | }); 19 | --------------------------------------------------------------------------------