apps-docs 0.0.1

package/README.md

@@ -0,0 +1,46 @@
+# Astro Starter Kit: Basics
+
+```sh
+bun create astro@latest -- --template basics
+```
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+/
+├── public/
+│   └── favicon.svg
+├── src
+│   ├── assets
+│   │   └── astro.svg
+│   ├── components
+│   │   └── Welcome.astro
+│   ├── layouts
+│   │   └── Layout.astro
+│   └── pages
+│       └── index.astro
+└── package.json
+```
+
+To learn more about the folder structure of an Astro project, refer to [our guide on project structure](https://docs.astro.build/en/basics/project-structure/).
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `bun install`             | Installs dependencies                            |
+| `bun dev`             | Starts local dev server at `localhost:4321`      |
+| `bun build`           | Build your production site to `./dist/`          |
+| `bun preview`         | Preview your build locally, before deploying     |
+| `bun astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `bun astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

package/astro.config.mjs

@@ -0,0 +1,31 @@
+// @ts-check
+import { defineConfig } from "astro/config";
+import svelte from "@astrojs/svelte";
+import mdx from "@astrojs/mdx";
+import tailwindcss from "@tailwindcss/vite";
+import { fileURLToPath } from "url";
+import path from "path";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default defineConfig({
+  integrations: [svelte(), mdx()],
+  vite: {
+    plugins: [tailwindcss()],
+    ssr: {
+      noExternal: ["@kori-ui/svelte", "@kori-ui/utilities", "@kori-ui/styles"]
+    },
+    server: {
+      fs: {
+        allow: [path.resolve(__dirname, "../../")]
+      }
+    },
+    resolve: {
+      alias: {
+        "@examples": path.resolve(__dirname, "./src/examples"),
+        "@components": path.resolve(__dirname, "./src/components")
+      }
+    }
+  }
+});

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "apps-docs",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/mdx": "^4.3.13",
+    "@astrojs/svelte": "^7.2.5",
+    "@kori-ui/styles": "^0.0.2-alpha.1",
+    "@kori-ui/svelte": "^0.0.2-alpha.1",
+    "@tailwindcss/vite": "^4.1.18",
+    "astro": "^5.16.11",
+    "svelte": "^5.46.4",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3"
+  },
+  "devDependencies": {
+    "svelte-preprocess": "^6.0.3"
+  }
+}

package/public/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>

package/src/assets/astro.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="115" height="48"><path fill="#17191E" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="url(#a)" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="#17191E" d="M.02 30.31s4.02-1.95 8.05-1.95l3.04-9.4c.11-.45.44-.76.82-.76.37 0 .7.31.82.76l3.04 9.4c4.77 0 8.05 1.95 8.05 1.95L17 11.71c-.2-.56-.53-.91-.98-.91H7.83c-.44 0-.76.35-.97.9L.02 30.31Zm42.37-5.97c0 1.64-2.05 2.62-4.88 2.62-1.85 0-2.5-.45-2.5-1.41 0-1 .8-1.49 2.65-1.49 1.67 0 3.09.03 4.73.23v.05Zm.03-2.04a21.37 21.37 0 0 0-4.37-.36c-5.32 0-7.82 1.25-7.82 4.18 0 3.04 1.71 4.2 5.68 4.2 3.35 0 5.63-.84 6.46-2.92h.14c-.03.5-.05 1-.05 1.4 0 1.07.18 1.16 1.06 1.16h4.15a16.9 16.9 0 0 1-.36-4c0-1.67.06-2.93.06-4.62 0-3.45-2.07-5.64-8.56-5.64-2.8 0-5.9.48-8.26 1.19.22.93.54 2.83.7 4.06 2.04-.96 4.95-1.37 7.2-1.37 3.11 0 3.97.71 3.97 2.15v.57Zm11.37 3c-.56.07-1.33.07-2.12.07-.83 0-1.6-.03-2.12-.1l-.02.58c0 2.85 1.87 4.52 8.45 4.52 6.2 0 8.2-1.64 8.2-4.55 0-2.74-1.33-4.09-7.2-4.39-4.58-.2-4.99-.7-4.99-1.28 0-.66.59-1 3.65-1 3.18 0 4.03.43 4.03 1.35v.2a46.13 46.13 0 0 1 4.24.03l.02-.55c0-3.36-2.8-4.46-8.2-4.46-6.08 0-8.13 1.49-8.13 4.39 0 2.6 1.64 4.23 7.48 4.48 4.3.14 4.77.62 4.77 1.28 0 .7-.7 1.03-3.71 1.03-3.47 0-4.35-.48-4.35-1.47v-.13Zm19.82-12.05a17.5 17.5 0 0 1-6.24 3.48c.03.84.03 2.4.03 3.24l1.5.02c-.02 1.63-.04 3.6-.04 4.9 0 3.04 1.6 5.32 6.58 5.32 2.1 0 3.5-.23 5.23-.6a43.77 43.77 0 0 1-.46-4.13c-1.03.34-2.34.53-3.78.53-2 0-2.82-.55-2.82-2.13 0-1.37 0-2.65.03-3.84 2.57.02 5.13.07 6.64.11-.02-1.18.03-2.9.1-4.04-2.2.04-4.65.07-6.68.07l.07-2.93h-.16Zm13.46 6.04a767.33 767.33 0 0 1 .07-3.18H82.6c.07 1.96.07 3.98.07 6.92 0 2.95-.03 4.99-.07 6.93h5.18c-.09-1.37-.11-3.68-.11-5.65 0-3.1 1.26-4 4.12-4 1.33 0 2.28.16 3.1.46.03-1.16.26-3.43.4-4.43-.86-.25-1.81-.41-2.96-.41-2.46-.03-4.26.98-5.1 3.38l-.17-.02Zm22.55 3.65c0 2.5-1.8 3.66-4.64 3.66-2.81 0-4.61-1.1-4.61-3.66s1.82-3.52 4.61-3.52c2.82 0 4.64 1.03 4.64 3.52Zm4.71-.11c0-4.96-3.87-7.18-9.35-7.18-5.5 0-9.23 2.22-9.23 7.18 0 4.94 3.49 7.59 9.21 7.59 5.77 0 9.37-2.65 9.37-7.6Z"/><defs><linearGradient id="a" x1="6.33" x2="19.43" y1="40.8" y2="34.6" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient></defs></svg>

package/src/assets/background.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="1024" fill="none"><path fill="url(#a)" fill-rule="evenodd" d="M-217.58 475.75c91.82-72.02 225.52-29.38 341.2-44.74C240 415.56 372.33 315.14 466.77 384.9c102.9 76.02 44.74 246.76 90.31 366.31 29.83 78.24 90.48 136.14 129.48 210.23 57.92 109.99 169.67 208.23 155.9 331.77-13.52 121.26-103.42 264.33-224.23 281.37-141.96 20.03-232.72-220.96-374.06-196.99-151.7 25.73-172.68 330.24-325.85 315.72-128.6-12.2-110.9-230.73-128.15-358.76-12.16-90.14 65.87-176.25 44.1-264.57-26.42-107.2-167.12-163.46-176.72-273.45-10.15-116.29 33.01-248.75 124.87-320.79Z" clip-rule="evenodd" style="opacity:.154"/><path fill="url(#b)" fill-rule="evenodd" d="M1103.43 115.43c146.42-19.45 275.33-155.84 413.5-103.59 188.09 71.13 409 212.64 407.06 413.88-1.94 201.25-259.28 278.6-414.96 405.96-130 106.35-240.24 294.39-405.6 265.3-163.7-28.8-161.93-274.12-284.34-386.66-134.95-124.06-436-101.46-445.82-284.6-9.68-180.38 247.41-246.3 413.54-316.9 101.01-42.93 207.83 21.06 316.62 6.61Z" clip-rule="evenodd" style="opacity:.154"/><defs><linearGradient id="b" x1="373" x2="1995.44" y1="1100" y2="118.03" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient><linearGradient id="a" x1="107.37" x2="1130.66" y1="1993.35" y2="1026.31" gradientUnits="userSpaceOnUse"><stop stop-color="#3245FF"/><stop offset="1" stop-color="#BC52EE"/></linearGradient></defs></svg>

package/src/components/ComponentExample.astro

@@ -0,0 +1,66 @@
+---
+import { Code } from 'astro:components';
+
+interface Props {
+  code: string;
+}
+
+const { code } = Astro.props;
+---
+
+<div class="relative flex flex-col overflow-hidden rounded-xl border border-zinc-900 bg-zinc-950 my-6 group/example">
+  <button 
+    class="copy-button absolute top-3 right-3 z-20 p-2 rounded-lg border border-zinc-800 bg-zinc-950 text-zinc-400 opacity-0 group-hover/example:opacity-100 transition-all hover:bg-zinc-900 hover:text-white"
+    data-code={code}
+    title="Copy code"
+  >
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="copy-icon"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="check-icon hidden text-green-500"><polyline points="20 6 9 17 4 12"></polyline></svg>
+  </button>
+
+  <div class="flex min-h-[200px] items-center justify-center p-12 bg-[radial-gradient(#18181b_1px,transparent_1px)] [background-size:20px_20px]">
+    <slot />
+  </div>
+
+  <details class="border-t border-zinc-900 bg-zinc-900/20">
+    <summary class="flex items-center justify-end px-4 py-2 cursor-pointer list-none select-none">
+      <span class="text-[10px] uppercase tracking-widest text-zinc-500 hover:text-white transition-colors font-bold">
+        View Code
+      </span>
+    </summary>
+    <div class="p-4 bg-[#0d1117] border-t border-zinc-900 overflow-hidden text-sm code-container">
+      <Code code={code} lang="svelte" theme="github-dark" />
+    </div>
+  </details>
+</div>
+
+<script>
+  const copyButtons = document.querySelectorAll('.copy-button');
+
+  copyButtons.forEach(button => {
+    button.addEventListener('click', () => {
+      const code = button.getAttribute('data-code');
+      const copyIcon = button.querySelector('.copy-icon');
+      const checkIcon = button.querySelector('.check-icon');
+
+      if (code) {
+        navigator.clipboard.writeText(code).then(() => {
+          copyIcon?.classList.add('hidden');
+          checkIcon?.classList.remove('hidden');
+
+          setTimeout(() => {
+            copyIcon?.classList.remove('hidden');
+            checkIcon?.classList.add('hidden');
+          }, 2000);
+        });
+      }
+    });
+  });
+</script>
+
+<style is:global>
+  @reference "../styles/global.css";
+  .code-container pre {
+    @apply text-sm !m-0 !bg-transparent !p-0 !border-none !shadow-none !ring-0 !leading-relaxed;
+  }
+</style>

package/src/components/ExternalLinks.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { Button } from "@kori-ui/svelte";
+
+  interface Props {
+    githubUrl?: string;
+    styleUrl?: string;
+  }
+
+  let { githubUrl = "https://github.com/jaftdelgado/kori-ui", styleUrl }: Props = $props();
+
+  const openLink = (url: string) => {
+    window.open(url, "_blank", "noopener,noreferrer");
+  };
+</script>
+
+<div class="flex flex-wrap gap-3 my-6">
+  {#if githubUrl}
+    <Button variant="secondary" size="sm" onclick={() => openLink(githubUrl)}>
+      <span class="flex items-center gap-2">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          ><path
+            d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.28 1.15-.28 2.35 0 3.5-.73 1.02-1.08 2.25-1 3.5 0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
+          ></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg
+        >
+        View Source
+      </span>
+    </Button>
+  {/if}
+
+  {#if styleUrl}
+    <Button variant="ghost" size="sm" onclick={() => openLink(styleUrl)}>
+      <span class="flex items-center gap-2 text-zinc-400">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          ><path
+            d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
+          ></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line
+            x1="12"
+            y1="22.08"
+            x2="12"
+            y2="12"
+          ></line></svg
+        >
+        Styles
+      </span>
+    </Button>
+  {/if}
+</div>

package/src/components/Icon.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { icons, type IconName } from "../resources/icons";
+
+  interface Props {
+    name: IconName;
+    size?: number | string;
+    class?: string;
+  }
+
+  let { name, size = 16, class: className }: Props = $props();
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={className}
+>
+  <path d={icons[name]} />
+</svg>

package/src/components/Showcase.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { SegmentedControl } from "@kori-ui/svelte";
+  interface Props {
+    options: any[];
+    value: string;
+    size?: "md" | "lg";
+  }
+
+  let { options, value = $bindable(), size = "md" }: Props = $props();
+</script>
+
+<SegmentedControl bind:value {options} {size} />

package/src/components/Sidebar.astro

@@ -0,0 +1,58 @@
+---
+const posts = await Astro.glob("../pages/docs/components/*.mdx");
+
+const components = posts.map((post) => {
+  const url = post.url;
+  const name = post.frontmatter.title?.split('|')[0].trim() || 
+               url?.split('/').pop()?.replace(/-/g, ' ');
+  
+  return { name, url };
+});
+
+const { pathname } = Astro.url;
+const normalizePath = (path: string) => path.replace(/\/$/, "");
+---
+
+<nav class="space-y-8">
+  <div>
+    <h4 class="text-xs font-bold mb-4 text-orange-500 uppercase tracking-widest px-2">
+      General
+    </h4>
+    <ul class="space-y-1">
+      <li>
+        <a 
+          href="/docs/introduction" 
+          class={`block px-3 py-2 text-sm rounded-md transition-colors ${
+            normalizePath(pathname) === "/docs/introduction" 
+            ? "bg-orange-500/10 text-orange-500 font-medium" 
+            : "text-zinc-400 hover:text-white hover:bg-zinc-900"
+          }`}
+        >
+          Introducción
+        </a>
+      </li>
+    </ul>
+  </div>
+
+  <div>
+    <h4 class="text-xs font-semibold mb-4 text-secondaryText uppercase px-2">
+      Componentes
+    </h4>
+    <ul>
+      {components.sort((a, b) => a.name.localeCompare(b.name)).map((comp) => (
+        <li>
+          <a 
+            href={comp.url} 
+            class={` px-4 h-9 items-center inline-flex text-sm rounded-xl  transition-colors ${
+              normalizePath(pathname) === normalizePath(comp.url || "") 
+              ? "bg-secondaryControl text-primaryText font-medium" 
+              : "text-secondaryText hover:text-primaryText"
+            }`}
+          >
+            {comp.name}
+          </a>
+        </li>
+      ))}
+    </ul>
+  </div>
+</nav>

package/src/components/TableOfContents.astro

@@ -0,0 +1,34 @@
+---
+interface Props {
+  headings: { depth: number; slug: string; text: string }[];
+}
+
+const { headings } = Astro.props;
+const filteredHeadings = headings.filter((h) => h.depth > 1 && h.depth < 4);
+---
+
+{
+  filteredHeadings.length > 0 && (
+    <div class="sticky top-0">
+      <h4 class="text-[10px] font-bold mb-5 text-zinc-500 uppercase tracking-[0.2em]">
+        On this page
+      </h4>
+      <nav class="flex flex-col border-l border-zinc-900">
+        {filteredHeadings.map((h) => (
+          <a
+            href={`#${h.slug}`}
+            class:list={[
+              "text-sm transition-all duration-200 hover:text-orange-500 border-l -ml-px py-1.5",
+              {
+                "pl-6 text-zinc-500 border-transparent": h.depth === 3,
+                "pl-4 text-zinc-400 border-transparent hover:border-orange-500": h.depth === 2,
+              },
+            ]}
+          >
+            {h.text}
+          </a>
+        ))}
+      </nav>
+    </div>
+  )
+}

package/src/components/Welcome.astro

@@ -0,0 +1,210 @@
+---
+import astroLogo from '../assets/astro.svg';
+import background from '../assets/background.svg';
+---
+
+<div id="container">
+	<img id="background" src={background.src} alt="" fetchpriority="high" />
+	<main>
+		<section id="hero">
+			<a href="https://astro.build"
+				><img src={astroLogo.src} width="115" height="48" alt="Astro Homepage" /></a
+			>
+			<h1>
+				To get started, open the <code><pre>src/pages</pre></code> directory in your project.
+			</h1>
+			<section id="links">
+				<a class="button" href="https://docs.astro.build">Read our docs</a>
+				<a href="https://astro.build/chat"
+					>Join our Discord <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"
+						><path
+							fill="currentColor"
+							d="M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.11 0A72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21a105.73 105.73 0 0 0 32.17 16.15 77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1 105.25 105.25 0 0 0 32.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15ZM42.45 65.69C36.18 65.69 31 60 31 53s5-12.74 11.43-12.74S54 46 53.89 53s-5.05 12.69-11.44 12.69Zm42.24 0C78.41 65.69 73.25 60 73.25 53s5-12.74 11.44-12.74S96.23 46 96.12 53s-5.04 12.69-11.43 12.69Z"
+						></path></svg
+					>
+				</a>
+			</section>
+		</section>
+	</main>
+
+	<a href="https://astro.build/blog/astro-5/" id="news" class="box">
+		<svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"
+			><path
+				d="M24.667 12c1.333 1.414 2 3.192 2 5.334 0 4.62-4.934 5.7-7.334 12C18.444 28.567 18 27.456 18 26c0-4.642 6.667-7.053 6.667-14Zm-5.334-5.333c1.6 1.65 2.4 3.43 2.4 5.333 0 6.602-8.06 7.59-6.4 17.334C13.111 27.787 12 25.564 12 22.666c0-4.434 7.333-8 7.333-16Zm-6-5.333C15.111 3.555 16 5.556 16 7.333c0 8.333-11.333 10.962-5.333 22-3.488-.774-6-4-6-8 0-8.667 8.666-10 8.666-20Z"
+				fill="#111827"></path></svg
+		>
+		<h2>What's New in Astro 5.0?</h2>
+		<p>
+			From content layers to server islands, click to learn more about the new features and
+			improvements in Astro 5.0
+		</p>
+	</a>
+</div>
+
+<style>
+	#background {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: -1;
+		filter: blur(100px);
+	}
+
+	#container {
+		font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
+		height: 100%;
+	}
+
+	main {
+		height: 100%;
+		display: flex;
+		justify-content: center;
+	}
+
+	#hero {
+		display: flex;
+		align-items: start;
+		flex-direction: column;
+		justify-content: center;
+		padding: 16px;
+	}
+
+	h1 {
+		font-size: 22px;
+		margin-top: 0.25em;
+	}
+
+	#links {
+		display: flex;
+		gap: 16px;
+	}
+
+	#links a {
+		display: flex;
+		align-items: center;
+		padding: 10px 12px;
+		color: #111827;
+		text-decoration: none;
+		transition: color 0.2s;
+	}
+
+	#links a:hover {
+		color: rgb(78, 80, 86);
+	}
+
+	#links a svg {
+		height: 1em;
+		margin-left: 8px;
+	}
+
+	#links a.button {
+		color: white;
+		background: linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%);
+		box-shadow:
+			inset 0 0 0 1px rgba(255, 255, 255, 0.12),
+			inset 0 -2px 0 rgba(0, 0, 0, 0.24);
+		border-radius: 10px;
+	}
+
+	#links a.button:hover {
+		color: rgb(230, 230, 230);
+		box-shadow: none;
+	}
+
+	pre {
+		font-family:
+			ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono',
+			monospace;
+		font-weight: normal;
+		background: linear-gradient(14deg, #d83333 0%, #f041ff 100%);
+		-webkit-background-clip: text;
+		-webkit-text-fill-color: transparent;
+		background-clip: text;
+		margin: 0;
+	}
+
+	h2 {
+		margin: 0 0 1em;
+		font-weight: normal;
+		color: #111827;
+		font-size: 20px;
+	}
+
+	p {
+		color: #4b5563;
+		font-size: 16px;
+		line-height: 24px;
+		letter-spacing: -0.006em;
+		margin: 0;
+	}
+
+	code {
+		display: inline-block;
+		background:
+			linear-gradient(66.77deg, #f3cddd 0%, #f5cee7 100%) padding-box,
+			linear-gradient(155deg, #d83333 0%, #f041ff 18%, #f5cee7 45%) border-box;
+		border-radius: 8px;
+		border: 1px solid transparent;
+		padding: 6px 8px;
+	}
+
+	.box {
+		padding: 16px;
+		background: rgba(255, 255, 255, 1);
+		border-radius: 16px;
+		border: 1px solid white;
+	}
+
+	#news {
+		position: absolute;
+		bottom: 16px;
+		right: 16px;
+		max-width: 300px;
+		text-decoration: none;
+		transition: background 0.2s;
+		backdrop-filter: blur(50px);
+	}
+
+	#news:hover {
+		background: rgba(255, 255, 255, 0.55);
+	}
+
+	@media screen and (max-height: 368px) {
+		#news {
+			display: none;
+		}
+	}
+
+	@media screen and (max-width: 768px) {
+		#container {
+			display: flex;
+			flex-direction: column;
+		}
+
+		#hero {
+			display: block;
+			padding-top: 10%;
+		}
+
+		#links {
+			flex-wrap: wrap;
+		}
+
+		#links a.button {
+			padding: 14px 18px;
+		}
+
+		#news {
+			right: 16px;
+			left: 16px;
+			bottom: 2.5rem;
+			max-width: 100%;
+		}
+
+		h1 {
+			line-height: 1.5;
+		}
+	}
+</style>

package/src/examples/button/ButtonContent.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Button } from "@kori-ui/svelte";
+  import Icon from "@components/Icon.svelte";
+</script>
+
+<div class="flex flex-wrap items-center gap-4">
+  <Button variant="secondary">
+    {#snippet startContent()}
+      <Icon name="arrowLeft" />
+    {/snippet}
+    Go Back
+  </Button>
+
+  <Button>
+    Save Changes
+    {#snippet endContent()}
+      <Icon name="check" />
+    {/snippet}
+  </Button>
+</div>

package/src/examples/button/ButtonSizes.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { Button } from "@kori-ui/svelte";
+</script>
+
+<div class="flex flex-wrap items-center gap-4">
+  <Button size="sm">Small</Button>
+  <Button size="md">Medium</Button>
+  <Button size="lg">Large</Button>
+</div>

package/src/examples/button/ButtonUsage.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import { Button } from "@kori-ui/svelte";
+</script>
+
+<Button on:click={() => console.log("Click!")}>Default Button</Button>

package/src/examples/button/ButtonVariants.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { Button } from "@kori-ui/svelte";
+</script>
+
+<div class="flex flex-wrap items-center gap-4">
+  <Button variant="primary">Primary</Button>
+  <Button variant="secondary">Secondary</Button>
+  <Button variant="ghost">Ghost</Button>
+</div>

package/src/layouts/DocsLayout.astro

@@ -0,0 +1,50 @@
+---
+import "../styles/global.css";
+import Sidebar from "@components/Sidebar.astro";
+import TableOfContents from "@components/TableOfContents.astro";
+
+interface Props {
+  title?: string;
+  headings?: { depth: number; slug: string; text: string }[];
+}
+
+const { title = "Kori UI Docs", headings = [] } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{title}</title>
+  </head>
+  <body class="bg-zinc-950 text-zinc-100 antialiased overflow-hidden">
+    <nav class="fixed top-0 z-50 w-full h-16 border-b border-zinc-900 bg-zinc-950/80 backdrop-blur-md px-6 flex items-center justify-between">
+      <div class="flex items-center gap-2">
+        <div class="w-8 h-8 bg-orange-500 rounded-lg shadow-lg shadow-orange-500/20"></div>
+        <span class="font-bold text-xl tracking-tighter text-white uppercase">KORI UI</span>
+      </div>
+      <div class="flex items-center gap-4">
+        <a href="https://github.com/jaftdelgado/kori-ui" target="_blank" class="text-sm text-zinc-400 hover:text-white transition-colors">GitHub</a>
+      </div>
+    </nav>
+
+    <div class="flex pt-16 h-screen">
+      <aside class="hidden md:flex flex-col w-72 overflow-y-auto p-6 shrink-0">
+        <Sidebar />
+      </aside>
+
+      <main class="flex-1 overflow-y-auto p-8 md:p-12 custom-scrollbar relative scroll-smooth prose-content">
+        <div class="max-w-2xl mx-auto w-full">
+          <slot />
+        </div>
+      </main>
+
+      <aside class="hidden lg:flex flex-col w-72 overflow-y-auto p-8 shrink-0">
+        <TableOfContents headings={headings} />
+      </aside>
+    </div>
+  </body>
+</html>

package/src/layouts/Layout.astro

@@ -0,0 +1,32 @@
+---
+import "../styles/global.css";
+
+interface Props {
+	title?: string;
+}
+
+const { title = "Kori UI Docs" } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="generator" content={Astro.generator} />
+		<title>{title}</title>
+	</head>
+	<body >
+		<slot />
+	</body>
+</html>
+
+<style>
+	html,
+	body {
+		margin: 0;
+		width: 100%;
+		height: 100%;
+	}
+</style>

package/src/pages/docs/components/button.mdx

@@ -0,0 +1,68 @@
+---
+layout: ../../../layouts/DocsLayout.astro
+title: "Button | Kori UI"
+---
+
+import ComponentExample from "@components/ComponentExample.astro";
+
+import ButtonUsage from "@examples/button/ButtonUsage.svelte";
+import ButtonUsageCode from "@examples/button/ButtonUsage.svelte?raw";
+
+import ButtonVariants from "@examples/button/ButtonVariants.svelte";
+import ButtonVariantsCode from "@examples/button/ButtonVariants.svelte?raw";
+
+import ButtonSizes from "@examples/button/ButtonSizes.svelte";
+import ButtonSizesCode from "@examples/button/ButtonSizes.svelte?raw";
+
+import ButtonContent from "@examples/button/ButtonContent.svelte";
+import ButtonContentCode from "@examples/button/ButtonContent.svelte?raw";
+
+import ExternalLinks from "@components/ExternalLinks.svelte";
+
+# Button
+
+Interactive element that allows action to be taken and desicions to be made with a click.
+
+<ExternalLinks
+  client:load
+  githubUrl="https://github.com/jaftdelgado/kori-ui/blob/main/packages/components/button/src/lib/Button.svelte"
+  styleUrl="https://github.com/jaftdelgado/kori-ui/blob/main/packages/components/button/src/lib/button.css"
+/>
+
+<ComponentExample code={ButtonUsageCode}>
+  <ButtonUsage client:load />
+</ComponentExample>
+
+## Examples
+
+### Variants
+
+<ComponentExample code={ButtonVariantsCode}>
+  <ButtonVariants client:load />
+</ComponentExample>
+
+### Sizes
+
+<ComponentExample code={ButtonSizesCode}>
+  <ButtonSizes client:load />
+</ComponentExample>
+
+### Start & End Content
+
+<ComponentExample code={ButtonContentCode}>
+  <ButtonContent client:load />
+</ComponentExample>
+
+---
+
+## API Reference
+
+The `Button` component accepts the following properties through Svelte 5 runes.
+
+| Prop           | Type                                  | Default     | Description                              |
+| :------------- | :------------------------------------ | :---------- | :--------------------------------------- |
+| `variant`      | `'primary' \| 'secondary' \| 'ghost'` | `'primary'` | Defines the visual style of the button.  |
+| `size`         | `'sm' \| 'md' \| 'lg'`                | `'md'`      | Sets the vertical scale and padding.     |
+| `disabled`     | `boolean`                             | `false`     | Prevents user interaction when true.     |
+| `startContent` | `Snippet \| Component \| string`      | `undefined` | Content placed before the label (icons). |
+| `endContent`   | `Snippet \| Component \| string`      | `undefined` | Content placed after the label (icons).  |

package/src/pages/docs/components/segmented-control.mdx

@@ -0,0 +1,19 @@
+---
+layout: ../../../layouts/DocsLayout.astro
+title: "Segmented Control | Kori UI"
+---
+
+import Showcase from "../../../components/Showcase.svelte";
+
+# Segmented Control
+
+Aquí puedes ver el componente funcionando:
+
+<Showcase
+  client:load
+  value="test"
+  options={[
+    { value: "test", label: "Test" },
+    { value: "demo", label: "Demo" }
+  ]}
+/>

package/src/pages/index.astro

@@ -0,0 +1,8 @@
+---
+import Welcome from '../components/Welcome.astro';
+import Layout from '../layouts/Layout.astro';
+---
+
+<Layout>
+	<Welcome />
+</Layout>

package/src/resources/icons.ts

@@ -0,0 +1,12 @@
+export const icons = {
+  arrowLeft: "M19 12H5m7 7-7-7 7-7",
+  check: "M20 6 9 17l-5-5",
+  chevronRight: "m9 18 6-6-6-6",
+  externalLink: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6m4-7h6v6m-11 5L22 2",
+  github:
+    "M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.28 1.15-.28 2.35 0 3.5-.73 1.02-1.08 2.25-1 3.5 0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4M9 18c-4.51 2-5-2-7-2",
+  print:
+    "M10.75 2.5h-5.5a.75.75 0 0 0-.75.75V4h7v-.75a.75.75 0 0 0-.75-.75M13 4v-.75A2.25 2.25 0 0 0 10.75 1h-5.5A2.25 2.25 0 0 0 3 3.25V4a3 3 0 0 0-3 3v2a3 3 0 0 0 3 3h1v1a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-1h1a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3m-9 6v.5H3A1.5 1.5 0 0 1 1.5 9V7A1.5 1.5 0 0 1 3 5.5h10A1.5 1.5 0 0 1 14.5 7v2a1.5 1.5 0 0 1-1.5 1.5h-1V10a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2m6-.5H6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5m2.5-1a1 1 0 1 0 0-2a1 1 0 0 0 0 2"
+} as const;
+
+export type IconName = keyof typeof icons;

package/src/styles/global.css

@@ -0,0 +1,16 @@
+@import "tailwindcss";
+@import "@kori-ui/styles";
+
+@import "./typography.css";
+
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
+
+@theme {
+  --font-sans:
+    "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+:root {
+  font-family: var(--font-sans);
+}

package/src/styles/typography.css

@@ -0,0 +1,38 @@
+.prose-content {
+  & h1 {
+    @apply text-primaryText text-4xl font-semibold mb-8 tracking-tighter;
+  }
+
+  & h2 {
+    @apply text-2xl font-medium mb-4 mt-16 text-zinc-100 pb-2 tracking-tight;
+  }
+
+  & h3 {
+    @apply text-xl font-medium mb-2 mt-10 tracking-tight;
+  }
+
+  & p {
+    @apply text-zinc-400 leading-relaxed mb-5 text-[15px];
+  }
+
+  & pre {
+    @apply p-4 rounded-xl border border-zinc-800 bg-zinc-900/50 my-6 overflow-x-auto;
+  }
+
+  & code:not(pre code) {
+    @apply bg-zinc-800 text-zinc-200 px-1.5 py-0.5 rounded text-sm font-mono;
+  }
+
+  & ul,
+  & ol {
+    @apply mb-5 ml-6 text-zinc-400 space-y-2;
+  }
+
+  & ul {
+    @apply list-disc;
+  }
+
+  & li strong {
+    @apply text-zinc-200;
+  }
+}

package/svelte.config.js

@@ -0,0 +1,5 @@
+import { vitePreprocess } from "@astrojs/svelte";
+
+export default {
+  preprocess: vitePreprocess()
+};

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@examples/*": ["src/examples/*"],
+      "@components/*": ["src/components/*"]
+    }
+  },
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}