plasma-svelte 0.0.1

package/README.md

@@ -0,0 +1,65 @@
+# Svelte library
+
+Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
+
+Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+To recreate this project with the same configuration:
+
+```sh
+# recreate this project
+pnpm dlx sv@0.17.0 create --template library --types ts --add storybook --install pnpm plasma-svelte
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```sh
+npm pack
+```
+
+To create a production version of your showcase app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+
+## 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/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```sh
+npm publish
+```

package/dist/accordion/Accordion.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    children?: Snippet;
+  }
+
+  let {
+    children,
+    class: customClass = "",
+    ...restProps
+  }: Props = $props();
+</script>
+
+<div class="plasma-accordion-group {customClass}" {...restProps}>
+  {@render children?.()}
+</div>
+
+<style>
+  .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

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    children?: Snippet;
+}
+declare const Accordion: import("svelte").Component<Props, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/accordion/AccordionItem.svelte

@@ -0,0 +1,193 @@
+<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);
+  }
+</script>
+
+<div
+  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>
+</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;
+  }
+
+  /* --------------------------------------------------------------------------
+     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);
+  }
+
+  /* --------------------------------------------------------------------------
+     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);
+  }
+</style>

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

@@ -0,0 +1,14 @@
+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;
+}
+declare const AccordionItem: import("svelte").Component<Props, {}, "open">;
+type AccordionItem = ReturnType<typeof AccordionItem>;
+export default AccordionItem;

package/dist/avatar/Avatar.svelte

@@ -0,0 +1,178 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+  type AvatarShape = "circle" | "rounded";
+  type AvatarStatus = "online" | "away" | "busy" | "offline";
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    src?: string;
+    alt?: string;
+    name?: string;
+    initials?: string;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    status?: AvatarStatus;
+  }
+
+  let {
+    src,
+    alt = "Avatar",
+    name = "",
+    initials = "",
+    size = "md",
+    shape = "circle",
+    status,
+    class: customClass = "",
+    ...restProps
+  }: Props = $props();
+
+  let hasImageError = $state(false);
+
+  const displayInitials = $derived(
+    initials
+      ? initials
+      : name
+        ? name
+            .split(" ")
+            .map((part) => part[0])
+            .slice(0, 2)
+            .join("")
+            .toUpperCase()
+        : "",
+  );
+</script>
+
+<div
+  class="plasma-avatar plasma-avatar--{size} plasma-avatar--{shape} {customClass}"
+  {...restProps}
+>
+  {#if src && !hasImageError}
+    <img
+      {src}
+      {alt}
+      onerror={() => (hasImageError = true)}
+      class="plasma-avatar-img"
+    />
+  {:else if displayInitials}
+    <span class="plasma-avatar-initials">{displayInitials}</span>
+  {:else}
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 16 16"
+      width="60%"
+      height="60%"
+      fill="currentColor"
+      class="plasma-avatar-fallback-icon"
+    >
+      <path
+        d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"
+      />
+    </svg>
+  {/if}
+
+  {#if status}
+    <span class="plasma-avatar-status plasma-avatar-status--{status}"></span>
+  {/if}
+</div>
+
+<style>
+  .plasma-avatar {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--plasma-color-highlight-soft);
+    color: var(--plasma-color-highlight);
+    border: 1px solid var(--plasma-color-border-subtle);
+    font-family: var(--plasma-font-sans);
+    font-weight: var(--plasma-font-weight-bold);
+    user-select: none;
+    flex-shrink: 0;
+    box-sizing: border-box;
+  }
+
+  .plasma-avatar--circle {
+    border-radius: var(--plasma-radius-full);
+  }
+
+  .plasma-avatar--rounded {
+    border-radius: var(--plasma-radius-md);
+  }
+
+  .plasma-avatar-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: inherit;
+  }
+
+  .plasma-avatar-initials {
+    line-height: 1;
+    text-transform: uppercase;
+  }
+
+  .plasma-avatar-fallback-icon {
+    opacity: 0.8;
+  }
+
+  /* --------------------------------------------------------------------------
+     Sizing
+     -------------------------------------------------------------------------- */
+  .plasma-avatar--xs {
+    width: 24px;
+    height: 24px;
+    font-size: 10px;
+  }
+  .plasma-avatar--sm {
+    width: 32px;
+    height: 32px;
+    font-size: var(--plasma-font-size-xs);
+  }
+  .plasma-avatar--md {
+    width: 40px;
+    height: 40px;
+    font-size: var(--plasma-font-size-sm);
+  }
+  .plasma-avatar--lg {
+    width: 48px;
+    height: 48px;
+    font-size: var(--plasma-font-size-base);
+  }
+  .plasma-avatar--xl {
+    width: 64px;
+    height: 64px;
+    font-size: var(--plasma-font-size-lg);
+  }
+
+  /* --------------------------------------------------------------------------
+     Status Dot Badge
+     -------------------------------------------------------------------------- */
+  .plasma-avatar-status {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 26%;
+    height: 26%;
+    min-width: 8px;
+    min-height: 8px;
+    max-width: 14px;
+    max-height: 14px;
+    border-radius: var(--plasma-radius-full);
+    border: 2px solid var(--plasma-color-surface);
+    box-sizing: content-box;
+  }
+
+  .plasma-avatar-status--online {
+    background-color: var(--plasma-color-positive);
+  }
+  .plasma-avatar-status--away {
+    background-color: var(--plasma-color-neutral);
+  }
+  .plasma-avatar-status--busy {
+    background-color: var(--plasma-color-negative);
+  }
+  .plasma-avatar-status--offline {
+    background-color: var(--plasma-color-text-muted);
+  }
+</style>

package/dist/avatar/Avatar.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from "svelte/elements";
+type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+type AvatarShape = "circle" | "rounded";
+type AvatarStatus = "online" | "away" | "busy" | "offline";
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    src?: string;
+    alt?: string;
+    name?: string;
+    initials?: string;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    status?: AvatarStatus;
+}
+declare const Avatar: import("svelte").Component<Props, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/badge/Badge.svelte

@@ -0,0 +1,162 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type BadgeVariant =
+    | "default"
+    | "primary"
+    | "highlight"
+    | "positive"
+    | "success"
+    | "neutral"
+    | "warning"
+    | "negative"
+    | "danger";
+
+  type BadgeShape = "rounded" | "pill";
+  type BadgeSize = "sm" | "md";
+
+  interface Props extends HTMLAttributes<HTMLSpanElement> {
+    variant?: BadgeVariant;
+    shape?: BadgeShape;
+    size?: BadgeSize;
+    dot?: boolean;
+    label?: string;
+    children?: Snippet;
+  }
+
+  let {
+    variant = "default",
+    shape = "rounded",
+    size = "md",
+    dot = false,
+    label,
+    children,
+    class: customClass = "",
+    ...restProps
+  }: Props = $props();
+
+  const resolvedVariant = $derived(
+    variant === "highlight"
+      ? "primary"
+      : variant === "success"
+        ? "positive"
+        : variant === "warning"
+          ? "neutral"
+          : variant === "danger"
+            ? "negative"
+            : variant
+  );
+</script>
+
+<span
+  class="plasma-badge plasma-badge--{resolvedVariant} plasma-badge--{shape} plasma-badge--{size} {customClass}"
+  {...restProps}
+>
+  {#if dot}
+    <span class="plasma-badge-dot"></span>
+  {/if}
+
+  {#if children}
+    {@render children()}
+  {:else if label}
+    {label}
+  {/if}
+</span>
+
+<style>
+  .plasma-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    font-family: var(--plasma-font-sans);
+    font-weight: var(--plasma-font-weight-medium);
+    line-height: 1;
+    white-space: nowrap;
+    user-select: none;
+    box-sizing: border-box;
+  }
+
+  /* --------------------------------------------------------------------------
+     Shapes
+     -------------------------------------------------------------------------- */
+  .plasma-badge--rounded {
+    border-radius: var(--plasma-radius-sm);
+  }
+
+  .plasma-badge--pill {
+    border-radius: var(--plasma-radius-full);
+  }
+
+  /* --------------------------------------------------------------------------
+     Sizes
+     -------------------------------------------------------------------------- */
+  .plasma-badge--sm {
+    height: 18px;
+    padding: 0 6px;
+    font-size: 11px;
+  }
+
+  .plasma-badge--md {
+    height: 22px;
+    padding: 0 8px;
+    font-size: var(--plasma-font-size-xs);
+  }
+
+  /* --------------------------------------------------------------------------
+     Variants
+     -------------------------------------------------------------------------- */
+  .plasma-badge--default {
+    background-color: var(--plasma-color-surface-sunken);
+    color: var(--plasma-color-text);
+    border: 1px solid var(--plasma-color-border);
+  }
+  .plasma-badge--default .plasma-badge-dot {
+    background-color: var(--plasma-color-text-muted);
+  }
+
+  .plasma-badge--primary {
+    background-color: var(--plasma-color-highlight-soft);
+    color: var(--plasma-color-highlight);
+    border: 1px solid rgba(61, 174, 233, 0.35);
+  }
+  .plasma-badge--primary .plasma-badge-dot {
+    background-color: var(--plasma-color-highlight);
+  }
+
+  .plasma-badge--positive {
+    background-color: var(--plasma-color-positive-soft);
+    color: var(--plasma-color-positive);
+    border: 1px solid rgba(39, 174, 96, 0.35);
+  }
+  .plasma-badge--positive .plasma-badge-dot {
+    background-color: var(--plasma-color-positive);
+  }
+
+  .plasma-badge--neutral {
+    background-color: var(--plasma-color-neutral-soft);
+    color: var(--plasma-color-neutral);
+    border: 1px solid rgba(246, 116, 0, 0.35);
+  }
+  .plasma-badge--neutral .plasma-badge-dot {
+    background-color: var(--plasma-color-neutral);
+  }
+
+  .plasma-badge--negative {
+    background-color: var(--plasma-color-negative-soft);
+    color: var(--plasma-color-negative);
+    border: 1px solid rgba(218, 68, 83, 0.35);
+  }
+  .plasma-badge--negative .plasma-badge-dot {
+    background-color: var(--plasma-color-negative);
+  }
+
+  /* Dot */
+  .plasma-badge-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: var(--plasma-radius-full);
+    flex-shrink: 0;
+  }
+</style>

package/dist/badge/Badge.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type BadgeVariant = "default" | "primary" | "highlight" | "positive" | "success" | "neutral" | "warning" | "negative" | "danger";
+type BadgeShape = "rounded" | "pill";
+type BadgeSize = "sm" | "md";
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+    variant?: BadgeVariant;
+    shape?: BadgeShape;
+    size?: BadgeSize;
+    dot?: boolean;
+    label?: string;
+    children?: Snippet;
+}
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;