plasma-svelte 0.0.1 → 0.1.0

package/README.md

@@ -1,65 +1,99 @@
-# Svelte library
+# ⚡ plasma-svelte
 
-Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
+A sleek, lightweight, and modern Svelte 5 UI component library built for rapid UI development and fluid design systems.
 
-Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+> [!WARNING]
+> **✨ Vibe Code Notice**
+> This library is vibe-coded! It is experimental, rapidly evolving, and built with pure vibes and speed in mind. Use it as your will, adapt it to your needs, fork it, or hack away on it freely.
 
-## Creating a project
+---
 
-If you're seeing this, you've probably already done this step. Congrats!
+## Features
 
-```sh
-# create a new project in the current directory
-npx sv create
+- 🚀 **Svelte 5 Ready**: Built natively with Svelte 5 runes and modern component patterns.
+- 🎨 **Design Tokens & Themeable**: Powered by a robust CSS variable token system (`token.css` + `base.css`).
+- 🧩 **Extensive Component Suite**: Buttons, Cards, Badges, Modals, Drawers, Date/Time Pickers, Tables, Tabs, and layout primitives.
+- 📖 **Storybook Integrated**: Interactive documentation and component exploration out of the box.
+- 📦 **Zero-Config Export**: Full TypeScript types (`.d.ts`) and modern ESM module exports.
 
-# create a new project in my-app
-npx sv create my-app
-```
+---
+
+## Quick Start
 
-To recreate this project with the same configuration:
+### 1. Install
 
-```sh
-# recreate this project
-pnpm dlx sv@0.17.0 create --template library --types ts --add storybook --install pnpm plasma-svelte
+```bash
+npm install plasma-svelte
+# or
+pnpm add plasma-svelte
+# or
+yarn add plasma-svelte
 ```
 
-## Developing
+### 2. Import Styles
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+Include the library's design tokens and base stylesheet in your root layout (`+layout.svelte`) or entry point (`app.ts` / `main.ts`):
 
-```sh
-npm run dev
+```svelte
+<script lang="ts">
+  import "plasma-svelte/style.css";
+</script>
 
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+<slot />
 ```
 
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+> **Note**: You can also import individual sub-styles if you manage your own reset:
+> ```ts
+> import "plasma-svelte/style/token.css";
+> import "plasma-svelte/style/base.css";
+> ```
+
+### 3. Use Components
+
+```svelte
+<script lang="ts">
+  import { Button, Badge, Card } from 'plasma-svelte';
+</script>
+
+<Card hoverable={true} padding="lg">
+  <Badge variant="primary" dot={true}>Active</Badge>
+  <h2>Welcome to Plasma</h2>
+  <p>Streamlined UI components for Svelte 5.</p>
+  <Button variant="primary">Get Started</Button>
+</Card>
+```
+
+---
+
+## Development & Storybook
 
-## Building
+### Start Storybook
 
-To build your library:
+Explore and interact with components in isolated stories:
 
-```sh
-npm pack
+```bash
+npm run storybook
 ```
 
-To create a production version of your showcase app:
+### Run Dev Server
 
-```sh
-npm run build
+```bash
+npm run dev
 ```
 
-You can preview the production build with `npm run preview`.
+### Build & Package
+
+Package the library for distribution (generates types & compiles to `./dist`):
 
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+```bash
+npm run prepack
+# or full build
+npm run build
+```
 
-## Publishing
+---
 
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+## License
 
-To publish your library to [npm](https://www.npmjs.com):
+Use as your will! Distributed under the MIT License or your choice of terms.
 
-```sh
-npm publish
-```

package/dist/accordion/Accordion.svelte

@@ -1,28 +1,24 @@
 <script lang="ts">
-  import type { Snippet } from "svelte";
-  import type { HTMLAttributes } from "svelte/elements";
+	import type { Snippet } from 'svelte'
+	import type { HTMLAttributes } from 'svelte/elements'
 
-  interface Props extends HTMLAttributes<HTMLDivElement> {
-    children?: Snippet;
-  }
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children?: Snippet
+	}
 
-  let {
-    children,
-    class: customClass = "",
-    ...restProps
-  }: Props = $props();
+	let { children, class: customClass = '', ...restProps }: Props = $props()
 </script>
 
 <div class="plasma-accordion-group {customClass}" {...restProps}>
-  {@render children?.()}
+	{@render children?.()}
 </div>
 
 <style>
-  .plasma-accordion-group {
-    display: flex;
-    flex-direction: column;
-    gap: var(--plasma-space-sm);
-    width: 100%;
-    box-sizing: border-box;
-  }
+	.plasma-accordion-group {
+		display: flex;
+		flex-direction: column;
+		gap: var(--plasma-space-sm);
+		width: 100%;
+		box-sizing: border-box;
+	}
 </style>

package/dist/accordion/Accordion.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { Snippet } from "svelte";
-import type { HTMLAttributes } from "svelte/elements";
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
     children?: Snippet;
 }

package/dist/accordion/AccordionItem.svelte

@@ -1,193 +1,184 @@
 <script lang="ts">
-  import type { Snippet } from "svelte";
-  import type { HTMLAttributes } from "svelte/elements";
-
-  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "ontoggle"> {
-    title?: string;
-    open?: boolean;
-    disabled?: boolean;
-    icon?: Snippet;
-    header?: Snippet;
-    children?: Snippet;
-    ontoggle?: (isOpen: boolean) => void;
-  }
-
-
-  let {
-    title = "",
-    open = $bindable(false),
-    disabled = false,
-    icon,
-    header,
-    children,
-    ontoggle,
-    class: customClass = "",
-    id,
-    ...restProps
-  }: Props = $props();
-
-  function toggle() {
-    if (disabled) return;
-    open = !open;
-    ontoggle?.(open);
-  }
+	import type { Snippet } from 'svelte'
+	import type { HTMLAttributes } from 'svelte/elements'
+
+	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'ontoggle'> {
+		title?: string
+		open?: boolean
+		disabled?: boolean
+		icon?: Snippet
+		header?: Snippet
+		children?: Snippet
+		ontoggle?: (isOpen: boolean) => void
+	}
+
+	let {
+		title = '',
+		open = $bindable(false),
+		disabled = false,
+		icon,
+		header,
+		children,
+		ontoggle,
+		class: customClass = '',
+		id,
+		...restProps
+	}: Props = $props()
+
+	function toggle() {
+		if (disabled) return
+		open = !open
+		ontoggle?.(open)
+	}
 </script>
 
 <div
-  class="plasma-accordion-item {customClass}"
-  class:plasma-accordion-item--open={open}
-  class:plasma-accordion-item--disabled={disabled}
-  {...restProps}
+	class="plasma-accordion-item {customClass}"
+	class:plasma-accordion-item--open={open}
+	class:plasma-accordion-item--disabled={disabled}
+	{...restProps}
 >
-  <button
-    {id}
-    type="button"
-    aria-expanded={open}
-    {disabled}
-    onclick={toggle}
-    class="plasma-accordion-header"
-  >
-    {#if icon}
-      <span class="plasma-accordion-icon">
-        {@render icon()}
-      </span>
-    {/if}
-
-    <span class="plasma-accordion-title">
-      {#if header}
-        {@render header()}
-      {:else}
-        {title}
-      {/if}
-    </span>
-
-    <span class="plasma-accordion-chevron">
-      <svg
-        aria-hidden="true"
-        viewBox="0 0 16 16"
-        width="12"
-        height="12"
-        fill="currentColor"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
-        />
-      </svg>
-    </span>
-  </button>
-
-  <div class="plasma-accordion-collapse" class:plasma-accordion-collapse--open={open}>
-    <div class="plasma-accordion-content">
-      {#if children}
-        {@render children()}
-      {/if}
-    </div>
-  </div>
+	<button
+		{id}
+		type="button"
+		aria-expanded={open}
+		{disabled}
+		onclick={toggle}
+		class="plasma-accordion-header"
+	>
+		{#if icon}
+			<span class="plasma-accordion-icon"> {@render icon()} </span>
+		{/if}
+
+		<span class="plasma-accordion-title">
+			{#if header}
+				{@render header()}
+			{:else}
+				{title}
+			{/if}
+		</span>
+
+		<span class="plasma-accordion-chevron">
+			<svg aria-hidden="true" viewBox="0 0 16 16" width="12" height="12" fill="currentColor">
+				<path
+					fill-rule="evenodd"
+					d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
+				/>
+			</svg>
+		</span>
+	</button>
+
+	<div class="plasma-accordion-collapse" class:plasma-accordion-collapse--open={open}>
+		<div class="plasma-accordion-content">
+			{#if children}
+				{@render children()}
+			{/if}
+		</div>
+	</div>
 </div>
 
 <style>
-  .plasma-accordion-item {
-    border: 1px solid var(--plasma-color-border);
-    border-radius: var(--plasma-radius-lg);
-    background-color: var(--plasma-color-surface);
-    overflow: hidden;
-    transition: var(--plasma-transition-fast);
-  }
-
-  .plasma-accordion-item:hover:not(.plasma-accordion-item--disabled) {
-    border-color: var(--plasma-color-border-hover);
-  }
-
-  .plasma-accordion-item--open {
-    border-color: var(--plasma-color-border-hover);
-  }
-
-  .plasma-accordion-item--disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  /* --------------------------------------------------------------------------
+	.plasma-accordion-item {
+		border: 1px solid var(--plasma-color-border);
+		border-radius: var(--plasma-radius-lg);
+		background-color: var(--plasma-color-surface);
+		overflow: hidden;
+		transition: var(--plasma-transition-fast);
+	}
+
+	.plasma-accordion-item:hover:not(.plasma-accordion-item--disabled) {
+		border-color: var(--plasma-color-border-hover);
+	}
+
+	.plasma-accordion-item--open {
+		border-color: var(--plasma-color-border-hover);
+	}
+
+	.plasma-accordion-item--disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	/* --------------------------------------------------------------------------
      Header Trigger Button
      -------------------------------------------------------------------------- */
-  .plasma-accordion-header {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    padding: var(--plasma-space-md) var(--plasma-space-lg);
-    background: transparent;
-    border: none;
-    outline: none;
-    font-family: var(--plasma-font-sans);
-    font-size: var(--plasma-font-size-base);
-    color: var(--plasma-color-text);
-    cursor: pointer;
-    user-select: none;
-    text-align: left;
-    gap: var(--plasma-space-sm);
-    transition: var(--plasma-transition-fast);
-  }
-
-  .plasma-accordion-header:hover:not(:disabled) {
-    background-color: var(--plasma-color-surface-hover);
-  }
-
-  .plasma-accordion-header:focus-visible {
-    outline: 2px solid var(--plasma-color-highlight);
-    outline-offset: -2px;
-  }
-
-  .plasma-accordion-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--plasma-color-highlight);
-    flex-shrink: 0;
-  }
-
-  .plasma-accordion-title {
-    flex: 1;
-    font-weight: var(--plasma-font-weight-medium);
-  }
-
-  .plasma-accordion-chevron {
-    display: inline-flex;
-    align-items: center;
-    color: var(--plasma-color-text-muted);
-    transition: transform var(--plasma-duration-base) var(--plasma-ease-default);
-    flex-shrink: 0;
-  }
-
-  .plasma-accordion-item--open .plasma-accordion-chevron {
-    transform: rotate(90deg);
-  }
-
-  /* --------------------------------------------------------------------------
+	.plasma-accordion-header {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		padding: var(--plasma-space-md) var(--plasma-space-lg);
+		background: transparent;
+		border: none;
+		outline: none;
+		font-family: var(--plasma-font-sans);
+		font-size: var(--plasma-font-size-base);
+		color: var(--plasma-color-text);
+		cursor: pointer;
+		user-select: none;
+		text-align: left;
+		gap: var(--plasma-space-sm);
+		transition: var(--plasma-transition-fast);
+	}
+
+	.plasma-accordion-header:hover:not(:disabled) {
+		background-color: var(--plasma-color-surface-hover);
+	}
+
+	.plasma-accordion-header:focus-visible {
+		outline: 2px solid var(--plasma-color-highlight);
+		outline-offset: -2px;
+	}
+
+	.plasma-accordion-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--plasma-color-highlight);
+		flex-shrink: 0;
+	}
+
+	.plasma-accordion-title {
+		flex: 1;
+		font-weight: var(--plasma-font-weight-medium);
+	}
+
+	.plasma-accordion-chevron {
+		display: inline-flex;
+		align-items: center;
+		color: var(--plasma-color-text-muted);
+		transition: transform var(--plasma-duration-base) var(--plasma-ease-default);
+		flex-shrink: 0;
+	}
+
+	.plasma-accordion-item--open .plasma-accordion-chevron {
+		transform: rotate(90deg);
+	}
+
+	/* --------------------------------------------------------------------------
      Collapsible Content Area (CSS Grid Height Transition)
      -------------------------------------------------------------------------- */
-  .plasma-accordion-collapse {
-    display: grid;
-    grid-template-rows: 0fr;
-    transition: grid-template-rows var(--plasma-duration-base) var(--plasma-ease-default);
-  }
-
-  .plasma-accordion-collapse--open {
-    grid-template-rows: 1fr;
-    border-top: 1px solid var(--plasma-color-border-subtle);
-  }
-
-  .plasma-accordion-content {
-    overflow: hidden;
-    padding: 0 var(--plasma-space-lg);
-    font-size: var(--plasma-font-size-sm);
-    color: var(--plasma-color-text-muted);
-    line-height: var(--plasma-line-height-base);
-    background-color: var(--plasma-color-surface-sunken);
-    transition: padding var(--plasma-duration-base) var(--plasma-ease-default);
-  }
-
-  .plasma-accordion-collapse--open .plasma-accordion-content {
-    padding: var(--plasma-space-md) var(--plasma-space-lg);
-  }
+	.plasma-accordion-collapse {
+		display: grid;
+		grid-template-rows: 0fr;
+		transition: grid-template-rows var(--plasma-duration-base) var(--plasma-ease-default);
+	}
+
+	.plasma-accordion-collapse--open {
+		grid-template-rows: 1fr;
+		border-top: 1px solid var(--plasma-color-border-subtle);
+	}
+
+	.plasma-accordion-content {
+		overflow: hidden;
+		padding: 0 var(--plasma-space-lg);
+		font-size: var(--plasma-font-size-sm);
+		color: var(--plasma-color-text-muted);
+		line-height: var(--plasma-line-height-base);
+		background-color: var(--plasma-color-surface-sunken);
+		transition: padding var(--plasma-duration-base) var(--plasma-ease-default);
+	}
+
+	.plasma-accordion-collapse--open .plasma-accordion-content {
+		padding: var(--plasma-space-md) var(--plasma-space-lg);
+	}
 </style>

package/dist/accordion/AccordionItem.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { Snippet } from "svelte";
-import type { HTMLAttributes } from "svelte/elements";
-interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "ontoggle"> {
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'ontoggle'> {
     title?: string;
     open?: boolean;
     disabled?: boolean;