Skip to content

Commit

Permalink
Merge pull request #26 from kampsy/dev
Browse files Browse the repository at this point in the history 
Dev
  • Loading branch information
@kampsy
kampsy authored Dec 1, 2024
2 parents d00cf4a + 9920499 commit cee42c4
Show file tree
Hide file tree
Showing 9 changed files with 905 additions and 465 deletions.
18 changes: 9 additions & 9 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,29 +51,29 @@
"svelte": "^5.0.0-next.1"
},
"devDependencies": {
"@playwright/test": "^1.48.2",
"@playwright/test": "^1.49.0",
"@semantic-release/exec": "^6.0.3",
"@sveltejs/adapter-auto": "^3.3.1",
"@sveltejs/kit": "^2.8.1",
"@sveltejs/kit": "^2.9.0",
"@sveltejs/package": "^2.3.7",
"@sveltejs/vite-plugin-svelte": "4.0.0-next.6",
"@types/eslint": "^8.56.12",
"autoprefixer": "^10.4.20",
"eslint": "^9.15.0",
"eslint": "^9.16.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.46.0",
"eslint-plugin-svelte": "^2.46.1",
"globals": "^15.12.0",
"highlight.js": "^11.10.0",
"postcss": "^8.4.49",
"prettier": "^3.3.3",
"prettier-plugin-svelte": "^3.2.8",
"prettier": "^3.4.1",
"prettier-plugin-svelte": "^3.3.2",
"publint": "^0.1.16",
"semantic-release": "^24.2.0",
"svelte": "^5.2.2",
"svelte-check": "^4.0.9",
"svelte": "^5.3.0",
"svelte-check": "^4.1.0",
"tailwindcss": "^3.4.15",
"tslib": "^2.8.1",
"typescript": "^5.6.3",
"typescript": "^5.7.2",
"typescript-eslint": "8.0.0-alpha.39",
"vite": "^5.4.11",
"vitest": "^1.6.0"
Expand Down
638 changes: 319 additions & 319 deletions pnpm-lock.yaml
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions src/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,10 @@
}

.ui-scrollbar::-webkit-scrollbar-thumb {
@apply bg-kui-light-gray-200 dark:bg-kui-dark-gray-400 rounded-full;
@apply bg-kui-light-gray-600 dark:bg-kui-dark-gray-600 rounded-full;
}

.ui-scrollbar::-webkit-scrollbar-thumb:hover {
@apply bg-kui-light-gray-300 dark:bg-kui-dark-gray-500;
@apply bg-kui-light-gray-700 dark:bg-kui-dark-gray-700;
}

11 changes: 11 additions & 0 deletions src/docs/ui/hr.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<script lang="ts">
type propsT = {
class?: string;
};
let { class: klass = "" }: propsT = $props();
</script>

<section class="{klass}">
<div class="w-full border-t border-kui-light-gray-200 dark:border-kui-dark-gray-400"></div>
</section>
10 changes: 5 additions & 5 deletions src/docs/utils/data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,15 @@ export const asideData: Array<AsideT> = [
},
{
name: 'installation',
url: '/installation',
url: '/installation'
},
{
name: 'colors',
url: '/colors',
badge: {
name: 'updated',
variant: 'purple'
}
},
{
name: 'colors',
url: '/colors'
}
]

Expand Down
19 changes: 18 additions & 1 deletion src/lib/input/input.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,26 @@
import type { Component } from 'svelte';
import Error from '$lib/icons/error.svelte';
import { randomString } from '$lib/utils/random.js';
import type { HTMLAttributes } from 'svelte/elements';
type propsT = {
type?: 'text' | 'number' | 'email' | 'password' | undefined;
type?:
| 'text'
| 'number'
| 'email'
| 'password'
| 'search'
| 'time'
| 'date'
| 'datetime-local'
| 'file'
| 'image'
| 'tel'
| 'color'
| 'url'
| 'week'
| 'month'
| undefined;
id?: string | undefined;
name?: string | undefined;
value?: string | undefined;
Expand Down
2 changes: 1 addition & 1 deletion src/lib/tooltip/tooltip.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@
</script>

<span>
<div class="group relative inline-block cursor-pointer text-kui-light-gray-1000 dark:text-kui-dark-gray-1000 {klass}">
<div class="group relative cursor-pointer text-kui-light-gray-1000 dark:text-kui-dark-gray-1000 {klass}">
{#if children}
{@render children()}
{/if}
Expand Down
198 changes: 82 additions & 116 deletions src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,42 +10,7 @@
</script>

<svelte:head>
<!-- Primary Meta Tags -->
<title>Kampsy UI</title>
<meta name="title" content="Kampsy-ui | A Svelte 5 component library" />
<meta
name="description"
content="Kampsy-ui - A Svelte 5 component library, thoughtfully designed to deliver consistent and cohesive web experiences."
/>

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://ui.kampsy.xyz" />
<meta property="og:title" content="Kampsy-ui | A Svelte 5 component library" />
<meta
property="og:description"
content="Kampsy-ui - A Svelte 5 component library, thoughtfully designed to deliver consistent and cohesive web experiences."
/>
<meta
property="og:image"
content="https://ucarecdn.com/91722eb1-c95a-42b2-b851-cdfe01a9bdf7/-/preview/1200x628/"
/>

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://ui.kampsy.xyz" />
<meta property="twitter:title" content="Kampsy-ui | A Svelte 5 component library" />
<meta
property="twitter:description"
content="Kampsy-ui - A Svelte 5 component library, thoughtfully designed to deliver consistent and cohesive web experiences."
/>
<meta
property="twitter:image"
content="https://ucarecdn.com/91722eb1-c95a-42b2-b851-cdfe01a9bdf7/-/preview/1200x628/"
/>

<!-- Meta Tags Generated with https://metatags.io -->
<meta name="robots" content="noindex,nofollow" />
<title>Kampsy-ui</title>
</svelte:head>

{#snippet foundation()}
Expand All @@ -58,7 +23,7 @@
<p
class="first-letter:capitalize text-kui-light-gray-900 dark:text-kui-dark-gray-900 text-[16px] lg:text-[20px] font-normal leading-[24px] lg:leading-[30px] tracking-normal lg:tracking-[-0.33px]"
>
A Svelte 5 component library, inspired by Vercel's Geist, thoughtfully designed to deliver
A Svelte 5 component library, inspired by Vercel's Geist, is thoughtfully designed to provide
consistent and cohesive web experiences.
</p>
</Row>
Expand Down Expand Up @@ -115,7 +80,86 @@
</div>
</a>
</div>

<div class="border-b border-kui-light-gray-200 dark:border-kui-dark-gray-400">
<a
href="/colors"
class="w-full h-full group block p-[32px] transition-colors hover:bg-kui-light-bg dark:hover:bg-kui-dark-bg"
>
<div class="flex justify-between">
<div
class="bg-background-200 border border-kui-light-gray-alpha-400 dark:border-kui-dark-gray-alpha-400 flex h-[96px] w-[32px] items-center justify-center overflow-hidden rounded-full"
>
<div
class="h-[72px] w-2 rounded-full bg-kui-light-gray-800 dark:bg-kui-dark-gray-800"
></div>
</div>
<div
class="bg-background-200 border border-kui-light-gray-alpha-400 dark:border-kui-dark-gray-alpha-400 flex h-[96px] w-[32px] items-center justify-center overflow-hidden rounded-full"
>
<div
class="h-[72px] w-2 rounded-full bg-kui-light-blue-800 dark:bg-kui-dark-blue-800"
></div>
</div>
<div
class="bg-background-200 border border-kui-light-gray-alpha-400 dark:border-kui-dark-gray-alpha-400 flex h-[96px] w-[32px] items-center justify-center overflow-hidden rounded-full"
>
<div
class="h-[72px] w-2 rounded-full bg-kui-light-purple-800 dark:bg-kui-dark-purple-800"
></div>
</div>
<div
class="bg-background-200 border border-kui-light-gray-alpha-400 dark:border-kui-dark-gray-alpha-400 flex h-[96px] w-[32px] items-center justify-center overflow-hidden rounded-full"
>
<div
class="h-[72px] w-2 rounded-full bg-kui-light-pink-800 dark:bg-kui-dark-pink-800"
></div>
</div>
<div
class="bg-background-200 border border-kui-light-gray-alpha-400 dark:border-kui-dark-gray-alpha-400 flex h-[96px] w-[32px] items-center justify-center overflow-hidden rounded-full"
>
<div
class="h-[72px] w-2 rounded-full bg-kui-light-red-800 dark:bg-kui-dark-red-800"
></div>
</div>
<div
class="bg-background-200 border border-kui-light-gray-alpha-400 dark:border-kui-dark-gray-alpha-400 flex h-[96px] w-[32px] items-center justify-center overflow-hidden rounded-full"
>
<div
class="h-[72px] w-2 rounded-full bg-kui-light-amber-800 dark:bg-kui-dark-amber-800"
></div>
</div>
<div
class="bg-background-200 border border-kui-light-gray-alpha-400 dark:border-kui-dark-gray-alpha-400 flex h-[96px] w-[32px] items-center justify-center overflow-hidden rounded-full"
>
<div
class="h-[72px] w-2 rounded-full bg-kui-light-green-800 dark:bg-kui-dark-green-800"
></div>
</div>
<div
class="bg-background-200 border border-kui-light-gray-alpha-400 dark:border-kui-dark-gray-alpha-400 flex h-[96px] w-[32px] items-center justify-center overflow-hidden rounded-full"
>
<div
class="h-[72px] w-2 rounded-full bg-kui-light-teal-800 dark:bg-kui-dark-teal-800"
></div>
</div>
</div>
<div class="mt-[32px] w-full h-[48px]">
<p
class="first-letter:capitalize text-base text-kui-light-gray-1000 dark:text-kui-dark-gray-1000 font-semibold leading-6 tracking-[-0.32px]"
>
colors
</p>
<p
class="first-letter:capitalize text-sm text-kui-light-gray-900 dark:text-kui-dark-gray-900 leading-6"
>
a high contrast accessible color system.
</p>
</div>
</a>
</div>

<!--<div class="border-b border-kui-light-gray-200 dark:border-kui-dark-gray-400">
<a
href="#/"
class="w-full h-full group block p-[32px] transition-colors hover:bg-kui-light-bg dark:hover:bg-kui-dark-bg"
Expand Down Expand Up @@ -552,85 +596,7 @@
</p>
</div>
</a>
</div>

<div class="border-b border-r border-kui-light-gray-200 dark:border-kui-dark-gray-400">
<a
href="/colors"
class="w-full h-full group block p-[32px] transition-colors hover:bg-kui-light-bg dark:hover:bg-kui-dark-bg"
>
<div class="flex justify-between">
<div
class="bg-background-200 border border-kui-light-gray-alpha-400 dark:border-kui-dark-gray-alpha-400 flex h-[96px] w-[32px] items-center justify-center overflow-hidden rounded-full"
>
<div
class="h-[72px] w-2 rounded-full bg-kui-light-gray-800 dark:bg-kui-dark-gray-800"
></div>
</div>
<div
class="bg-background-200 border border-kui-light-gray-alpha-400 dark:border-kui-dark-gray-alpha-400 flex h-[96px] w-[32px] items-center justify-center overflow-hidden rounded-full"
>
<div
class="h-[72px] w-2 rounded-full bg-kui-light-blue-800 dark:bg-kui-dark-blue-800"
></div>
</div>
<div
class="bg-background-200 border border-kui-light-gray-alpha-400 dark:border-kui-dark-gray-alpha-400 flex h-[96px] w-[32px] items-center justify-center overflow-hidden rounded-full"
>
<div
class="h-[72px] w-2 rounded-full bg-kui-light-purple-800 dark:bg-kui-dark-purple-800"
></div>
</div>
<div
class="bg-background-200 border border-kui-light-gray-alpha-400 dark:border-kui-dark-gray-alpha-400 flex h-[96px] w-[32px] items-center justify-center overflow-hidden rounded-full"
>
<div
class="h-[72px] w-2 rounded-full bg-kui-light-pink-800 dark:bg-kui-dark-pink-800"
></div>
</div>
<div
class="bg-background-200 border border-kui-light-gray-alpha-400 dark:border-kui-dark-gray-alpha-400 flex h-[96px] w-[32px] items-center justify-center overflow-hidden rounded-full"
>
<div
class="h-[72px] w-2 rounded-full bg-kui-light-red-800 dark:bg-kui-dark-red-800"
></div>
</div>
<div
class="bg-background-200 border border-kui-light-gray-alpha-400 dark:border-kui-dark-gray-alpha-400 flex h-[96px] w-[32px] items-center justify-center overflow-hidden rounded-full"
>
<div
class="h-[72px] w-2 rounded-full bg-kui-light-amber-800 dark:bg-kui-dark-amber-800"
></div>
</div>
<div
class="bg-background-200 border border-kui-light-gray-alpha-400 dark:border-kui-dark-gray-alpha-400 flex h-[96px] w-[32px] items-center justify-center overflow-hidden rounded-full"
>
<div
class="h-[72px] w-2 rounded-full bg-kui-light-green-800 dark:bg-kui-dark-green-800"
></div>
</div>
<div
class="bg-background-200 border border-kui-light-gray-alpha-400 dark:border-kui-dark-gray-alpha-400 flex h-[96px] w-[32px] items-center justify-center overflow-hidden rounded-full"
>
<div
class="h-[72px] w-2 rounded-full bg-kui-light-teal-800 dark:bg-kui-dark-teal-800"
></div>
</div>
</div>
<div class="mt-[32px] w-full h-[48px]">
<p
class="first-letter:capitalize text-base text-kui-light-gray-1000 dark:text-kui-dark-gray-1000 font-semibold leading-6 tracking-[-0.32px]"
>
colors
</p>
<p
class="first-letter:capitalize text-sm text-kui-light-gray-900 dark:text-kui-dark-gray-900 leading-6"
>
a high contrast accessible color system.
</p>
</div>
</a>
</div>
</div>-->
</section>
{/snippet}

Expand Down
Loading

0 comments on commit cee42c4

Please sign in to comment.