@imput/helium-prism 0.1.0

package/README.md

@@ -0,0 +1,77 @@
+<p align="center">
+    <img width="1000" alt="Helium Prism" src="https://raw.githubusercontent.com/imputnet/helium-prism/refs/heads/main/docs/prism-splash.png">
+</p>
+
+<p align="center">
+    Shared UI components of
+    <a href="https://github.com/imputnet/helium">Helium</a>
+    web interfaces for Svelte.
+</p>
+
+Prism UI library contains the shared building blocks used by web-based Helium applications and
+websites, such as: typography, buttons, inputs, loading states, icons, and the brand gradient
+shimmer effect.
+
+This library isn't built for use outside of Helium web apps, so it may feel clunky for anything
+else.
+
+## Installation
+
+deno:
+
+```sh
+deno add npm:@imput/helium-prism
+```
+
+pnpm:
+
+```sh
+pnpm add @imput/helium-prism
+```
+
+npm:
+
+```sh
+npm i @imput/helium-prism
+```
+
+## Basic usage
+
+Import the stylesheet once near the root of your app:
+
+```svelte
+<script>
+    import "@imput/helium-prism/styles.css";
+</script>
+```
+
+Then import components from the package root:
+
+```svelte
+<script>
+    import { Button } from "@imput/helium-prism";
+</script>
+
+<Button primary>Button</Button>
+<Button>Button 2</Button>
+```
+
+You can also import all components at once if you're a madman or have an actual reason to do so
+(such as for [demo](src/demo/App.svelte) purposes):
+
+```svelte
+<script>
+    import * as Prism from "@imput/helium-prism";
+</script>
+
+<Prism.Button primary>Button</Prism.Button>
+<Prism.Button>Button 2</Prism.Button>
+```
+
+## API docs
+
+Sample usage of components is documented in [docs/api.md](docs/api.md).
+
+## License
+
+Helium Prism is licensed under GPL-3.0, just like the rest of Helium. See [LICENSE](LICENSE).

package/dist/components/Button.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type { HTMLButtonAttributes } from "svelte/elements";
+
+    type Props = HTMLButtonAttributes & {
+        children: Snippet;
+        primary?: boolean;
+        card?: boolean;
+        selected?: boolean;
+        circle?: boolean;
+    };
+
+    let {
+        children,
+        class: className,
+        type = "button",
+        primary = false,
+        card = false,
+        selected = false,
+        circle = false,
+        ...rest
+    }: Props = $props();
+</script>
+
+<button
+    class={[
+        "button",
+        primary && "primary",
+        card && "card",
+        selected && "selected",
+        circle && "circle",
+        className,
+    ]}
+    {type}
+    {...rest}
+>
+    {@render children()}
+</button>

package/dist/components/Button.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+type Props = HTMLButtonAttributes & {
+    children: Snippet;
+    primary?: boolean;
+    card?: boolean;
+    selected?: boolean;
+    circle?: boolean;
+};
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;
+//# sourceMappingURL=Button.svelte.d.ts.map

package/dist/components/Button.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Button.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAGxD,KAAK,KAAK,GAAG,oBAAoB,GAAG;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA+BN,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/CardLink.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+    import type { ClassValue } from "svelte/elements";
+    import IconExternalLink from "./icons/IconExternalLink.svelte";
+
+    type Props = {
+        title: string;
+        desc: string;
+        href: string;
+        class?: ClassValue;
+    };
+
+    const { title, desc, href, class: className }: Props = $props();
+</script>
+
+<a
+    class={["button card card-link", className]}
+    {href}
+    target="_blank"
+    rel="noopener noreferrer"
+>
+    <div class="link-text">
+        <h4>{title}</h4>
+        <p>{desc}</p>
+    </div>
+    <IconExternalLink />
+</a>
+
+<style>
+    .card-link {
+        text-decoration: none;
+        align-items: flex-start;
+    }
+
+    .link-text {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        width: 100%;
+        overflow: hidden;
+    }
+</style>

package/dist/components/CardLink.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ClassValue } from "svelte/elements";
+type Props = {
+    title: string;
+    desc: string;
+    href: string;
+    class?: ClassValue;
+};
+declare const CardLink: import("svelte").Component<Props, {}, "">;
+type CardLink = ReturnType<typeof CardLink>;
+export default CardLink;
+//# sourceMappingURL=CardLink.svelte.d.ts.map

package/dist/components/CardLink.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardLink.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/CardLink.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAI9C,KAAK,KAAK,GAAG;IACT,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,UAAU,CAAC;CACtB,CAAC;AAqBN,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/Checkbox.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type { HTMLInputAttributes } from "svelte/elements";
+    import IconCheck from "./icons/IconCheck.svelte";
+
+    type CheckboxLabelProps =
+        | {
+            children: Snippet;
+            "aria-label"?: string;
+            "aria-labelledby"?: string;
+        }
+        | {
+            children?: never;
+            "aria-label": string;
+            "aria-labelledby"?: string;
+        }
+        | {
+            children?: never;
+            "aria-label"?: string;
+            "aria-labelledby": string;
+        };
+
+    type Props = Omit<HTMLInputAttributes, "id" | "type" | "checked"> & {
+        id: string;
+        checked?: boolean;
+    } & CheckboxLabelProps;
+
+    let {
+        id,
+        checked = $bindable(false),
+        children,
+        class: className,
+        disabled,
+        ...rest
+    }: Props = $props();
+
+    let previousChecked = $state(checked);
+    let toggling = $state(false);
+
+    $effect(() => {
+        if (checked === previousChecked) {
+            return;
+        }
+
+        previousChecked = checked;
+        toggling = true;
+
+        requestAnimationFrame(() => {
+            toggling = false;
+        });
+    });
+</script>
+
+<label class={["checkbox", disabled && "disabled", toggling && "toggling", className]}>
+    <input {id} type="checkbox" bind:checked {disabled} {...rest} />
+    <span class="checkbox-control" aria-hidden="true">
+        <IconCheck />
+    </span>
+    {#if children}
+        <span class="checkbox-content">
+            {@render children()}
+        </span>
+    {/if}
+</label>
+
+<style>
+    .checkbox {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        width: fit-content;
+        color: var(--primary);
+        cursor: pointer;
+        line-height: 120%;
+        user-select: none;
+        -webkit-user-select: none;
+    }
+
+    input {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        clip-path: inset(50%);
+        white-space: nowrap;
+    }
+
+    .checkbox-control {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 28px;
+        width: 28px;
+        height: 28px;
+        border-radius: 100%;
+        background-color: var(--helium-elevated-7);
+        box-shadow: 0 0 0 1.5px var(--helium-elevated-5) inset;
+        transition: background-color 0.2s, transform 0.2s;
+        will-change: transform;
+
+        & :global(svg) {
+            width: 21px;
+            height: 21px;
+            stroke-width: 2px;
+            opacity: 0;
+        }
+    }
+
+    .toggling .checkbox-control {
+        transition: transform 0.2s;
+    }
+
+    .checkbox:hover input:not(:checked) + .checkbox-control {
+        background-color: var(--helium-elevated-10);
+    }
+
+    .checkbox:hover input:checked + .checkbox-control {
+        background-color: var(--helium-blue-hover);
+    }
+
+    .checkbox:active .checkbox-control {
+        transform: scale(0.97);
+    }
+
+    input:checked + .checkbox-control {
+        background-color: var(--helium-blue);
+        color: #ffffff;
+
+        & :global(svg) {
+            opacity: 1;
+        }
+    }
+
+    input:focus-visible + .checkbox-control {
+        outline: 2px var(--primary) solid;
+        outline-offset: 3px;
+    }
+
+    .checkbox-content {
+        color: var(--secondary);
+        font-size: 16px;
+        line-height: 122%;
+    }
+
+    .disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
+</style>

package/dist/components/Checkbox.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from "svelte";
+import type { HTMLInputAttributes } from "svelte/elements";
+type CheckboxLabelProps = {
+    children: Snippet;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+} | {
+    children?: never;
+    "aria-label": string;
+    "aria-labelledby"?: string;
+} | {
+    children?: never;
+    "aria-label"?: string;
+    "aria-labelledby": string;
+};
+type Props = Omit<HTMLInputAttributes, "id" | "type" | "checked"> & {
+    id: string;
+    checked?: boolean;
+} & CheckboxLabelProps;
+declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;
+//# sourceMappingURL=Checkbox.svelte.d.ts.map

package/dist/components/Checkbox.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Checkbox.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAIvD,KAAK,kBAAkB,GACjB;IACE,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B,GACC;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B,GACC;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEN,KAAK,KAAK,GAAG,IAAI,CAAC,mBAAmB,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC,GAAG;IAChE,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,kBAAkB,CAAC;AAkD3B,QAAA,MAAM,QAAQ,kDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/CopyIcon.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+    import type { ClassValue } from "svelte/elements";
+    import IconCopy from "./icons/IconCopy.svelte";
+    import IconLink from "./icons/IconLink.svelte";
+    import IconCheck from "./icons/IconCheck.svelte";
+
+    type Props = {
+        check: boolean;
+        link?: boolean;
+        class?: ClassValue;
+    };
+
+    let { check, link = false, class: className }: Props = $props();
+</script>
+
+<div class={["copy-animation", check && "check", className]}>
+    <div class="icon-copy">
+        {#if link}
+            <IconLink />
+        {:else}
+            <IconCopy />
+        {/if}
+    </div>
+    <div class="icon-check">
+        <IconCheck />
+    </div>
+</div>
+
+<style>
+    .copy-animation {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        height: 18px;
+        width: 18px;
+    }
+
+    .copy-animation :global(svg) {
+        width: 18px;
+        height: 18px;
+        will-change: transform;
+    }
+
+    .icon-copy,
+    .icon-check {
+        display: flex;
+        position: absolute;
+        transition: transform 0.25s, opacity 0.25s;
+    }
+
+    .icon-copy {
+        transform: none;
+        opacity: 1;
+    }
+
+    .icon-check {
+        transform: scale(0.4);
+        opacity: 0;
+    }
+
+    .check .icon-copy {
+        transform: scale(0.4);
+        opacity: 0;
+    }
+
+    .check .icon-check {
+        transform: none;
+        opacity: 1;
+    }
+</style>

package/dist/components/CopyIcon.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ClassValue } from "svelte/elements";
+type Props = {
+    check: boolean;
+    link?: boolean;
+    class?: ClassValue;
+};
+declare const CopyIcon: import("svelte").Component<Props, {}, "">;
+type CopyIcon = ReturnType<typeof CopyIcon>;
+export default CopyIcon;
+//# sourceMappingURL=CopyIcon.svelte.d.ts.map

package/dist/components/CopyIcon.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyIcon.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/CopyIcon.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAM9C,KAAK,KAAK,GAAG;IACT,KAAK,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,UAAU,CAAC;CACtB,CAAC;AA4BN,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/Dropdown.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type { HTMLSelectAttributes } from "svelte/elements";
+    import IconChevronDown from "./icons/IconChevronDown.svelte";
+
+    type DropdownOption = {
+        value: string;
+        label: string;
+        disabled?: boolean;
+    };
+    type NativeSelectProps = Omit<
+        HTMLSelectAttributes,
+        "aria-label" | "id" | "size" | "value"
+    >;
+    type DropdownContentProps =
+        | {
+            options: readonly DropdownOption[];
+            placeholder?: string;
+            children?: never;
+        }
+        | {
+            options?: never;
+            placeholder?: string;
+            children: Snippet;
+        }
+        | {
+            options?: never;
+            placeholder: string;
+            children?: never;
+        };
+
+    type Props = NativeSelectProps & {
+        id: string;
+        "aria-label": string;
+        value?: string;
+        width?: string;
+        select?: HTMLSelectElement;
+    } & DropdownContentProps;
+
+    let {
+        id,
+        value = $bindable(""),
+        width,
+        select = $bindable(),
+        options = [],
+        placeholder,
+        children,
+        class: className,
+        "aria-label": ariaLabel,
+        disabled,
+        ...rest
+    }: Props = $props();
+</script>
+
+<label class={["dropdown", disabled && "disabled", className]} style:width>
+    <select
+        bind:this={select}
+        bind:value
+        {id}
+        class={!value && placeholder ? "placeholder" : undefined}
+        aria-label={ariaLabel}
+        {disabled}
+        {...rest}
+    >
+        {#if placeholder}
+            <option value="" disabled hidden>{placeholder}</option>
+        {/if}
+        {#if options.length}
+            {#each options as option}
+                <option value={option.value} disabled={option.disabled}>
+                    {option.label}
+                </option>
+            {/each}
+        {:else}
+            {@render children?.()}
+        {/if}
+    </select>
+    <span class="dropdown-icon" aria-hidden="true">
+        <IconChevronDown />
+    </span>
+</label>
+
+<style>
+    .dropdown {
+        --dropdown-padding-inline: 16px;
+        --dropdown-icon-size: 18px;
+        position: relative;
+        width: fit-content;
+        max-width: 100%;
+        min-height: 40px;
+        cursor: pointer;
+    }
+
+    select {
+        cursor: inherit;
+        font-size: 16px;
+        line-height: 122%;
+        height: 100%;
+        padding-inline: var(--dropdown-padding-inline);
+        padding-right: calc(var(--dropdown-padding-inline) + var(--dropdown-icon-size) + 9px);
+        user-select: none;
+        -webkit-user-select: none;
+    }
+
+    select.placeholder {
+        color: var(--tertiary);
+    }
+
+    .dropdown-icon {
+        position: absolute;
+        right: var(--dropdown-padding-inline);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--tertiary);
+        pointer-events: none;
+    }
+
+    .dropdown:focus-within .dropdown-icon {
+        color: var(--primary);
+    }
+
+    .dropdown-icon :global(svg) {
+        width: var(--dropdown-icon-size);
+        height: var(--dropdown-icon-size);
+        stroke-width: 1.8px;
+    }
+</style>

package/dist/components/Dropdown.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { Snippet } from "svelte";
+import type { HTMLSelectAttributes } from "svelte/elements";
+type DropdownOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+type NativeSelectProps = Omit<HTMLSelectAttributes, "aria-label" | "id" | "size" | "value">;
+type DropdownContentProps = {
+    options: readonly DropdownOption[];
+    placeholder?: string;
+    children?: never;
+} | {
+    options?: never;
+    placeholder?: string;
+    children: Snippet;
+} | {
+    options?: never;
+    placeholder: string;
+    children?: never;
+};
+type Props = NativeSelectProps & {
+    id: string;
+    "aria-label": string;
+    value?: string;
+    width?: string;
+    select?: HTMLSelectElement;
+} & DropdownContentProps;
+declare const Dropdown: import("svelte").Component<Props, {}, "value" | "select">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;
+//# sourceMappingURL=Dropdown.svelte.d.ts.map

package/dist/components/Dropdown.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Dropdown.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAIxD,KAAK,cAAc,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AACF,KAAK,iBAAiB,GAAG,IAAI,CACzB,oBAAoB,EACpB,YAAY,GAAG,IAAI,GAAG,MAAM,GAAG,OAAO,CACzC,CAAC;AACF,KAAK,oBAAoB,GACnB;IACE,OAAO,EAAE,SAAS,cAAc,EAAE,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC;CACpB,GACC;IACE,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;CACrB,GACC;IACE,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC;CACpB,CAAC;AAEN,KAAK,KAAK,GAAG,iBAAiB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC9B,GAAG,oBAAoB,CAAC;AAiD7B,QAAA,MAAM,QAAQ,2DAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}