@ifloppy/maxcraftmc-ui-svelte 0.1.0

package/src/Breakpoint/breakpointObserver.js

@@ -0,0 +1,82 @@
+import { onMount } from "svelte";
+import { derived, writable } from "svelte/store";
+import { breakpoints } from "./breakpoints";
+
+/**
+ * Creates a readable store that returns the current breakpoint size.
+ * It also provides functions for creating derived stores used to do comparisons.
+ */
+export function breakpointObserver() {
+  const store = writable(undefined);
+
+  onMount(() => {
+    /** @type {Record<import("./breakpoints").BreakpointSize, MediaQueryList>} */
+    const match = {
+      sm: window.matchMedia(`(max-width: ${breakpoints.md}px)`),
+      md: window.matchMedia(
+        `(min-width: ${breakpoints.md}px) and (max-width: ${breakpoints.lg}px)`,
+      ),
+      lg: window.matchMedia(
+        `(min-width: ${breakpoints.lg}px) and (max-width: ${breakpoints.xlg}px)`,
+      ),
+      xlg: window.matchMedia(
+        `(min-width: ${breakpoints.xlg}px) and (max-width: ${breakpoints.max}px)`,
+      ),
+      max: window.matchMedia(`(min-width: ${breakpoints.max}px)`),
+    };
+    const matchers = Object.entries(match);
+    const sizeByMedia = Object.fromEntries(
+      matchers.map(([size, queryList]) => [queryList.media, size]),
+    );
+
+    const size = matchers.find(([size, queryList]) => queryList.matches)[0];
+    store.set(size);
+
+    /** @type {(e: MediaQueryListEvent) => void} */
+    function handleChange({ matches, media }) {
+      const size = sizeByMedia[media];
+      if (matches) store.set(size);
+    }
+
+    matchers.forEach(([size, queryList]) =>
+      queryList.addEventListener("change", handleChange),
+    );
+
+    return () => {
+      matchers.forEach(([size, queryList]) =>
+        queryList.removeEventListener("change", handleChange),
+      );
+    };
+  });
+
+  return {
+    subscribe: store.subscribe,
+
+    /**
+     * Returns a store readable store that returns whether the current
+     * breakpoint is smaller than {@link size}.
+     * @param {import("./breakpoints").BreakpointSize} size Size to compare against.
+     */
+    smallerThan: (size) => {
+      checkSizeValid(size);
+      return derived(store, ($size) => breakpoints[$size] < breakpoints[size]);
+    },
+
+    /**
+     * Returns a store readable store that returns whether the current
+     * breakpoint is larger than {@link size}.
+     * @param {import("./breakpoints").BreakpointSize} size Size to compare against.
+     */
+    largerThan: (size) => {
+      checkSizeValid(size);
+      return derived(store, ($size) => breakpoints[$size] > breakpoints[size]);
+    },
+  };
+}
+
+function checkSizeValid(size) {
+  if (size in breakpoints == false)
+    throw new Error(`"${size}" is not a valid breakpoint size.`);
+}
+
+export default breakpointObserver;

package/src/Breakpoint/breakpoints.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Pixel sizes of Carbon grid breakpoints.
+ * @type {Record<BreakpointSize, BreakpointValue>}
+ */
+export const breakpoints: Record<BreakpointSize, BreakpointValue>;
+
+export type BreakpointSize = "sm" | "md" | "lg" | "xlg" | "max";
+
+export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
+
+export default breakpoints;

package/src/Breakpoint/breakpoints.js

@@ -0,0 +1,13 @@
+/**
+ * Pixel sizes of Carbon grid breakpoints.
+ * @type {Record<import("./breakpoints").BreakpointSize, BreakpointValue>}
+ */
+export const breakpoints = Object.freeze({
+  sm: 320,
+  md: 672,
+  lg: 1056,
+  xlg: 1312,
+  max: 1584,
+});
+
+export default breakpoints;

package/src/Breakpoint/index.d.ts

@@ -0,0 +1,4 @@
+// @ts-nocheck `Breakpoint` is auto-generated by `sveld`.
+export { default as Breakpoint } from "./Breakpoint.svelte";
+export { breakpointObserver } from "./breakpointObserver";
+export { breakpoints } from "./breakpoints";

package/src/Breakpoint/index.js

@@ -0,0 +1,3 @@
+export { default as Breakpoint } from "./Breakpoint.svelte";
+export { breakpointObserver } from "./breakpointObserver";
+export { breakpoints } from "./breakpoints";

package/src/Button/Button.svelte

@@ -0,0 +1,212 @@
+<script>
+  /**
+   * @extends {"./ButtonSkeleton.svelte"} ButtonSkeletonProps
+   * @restProps {button | a | div}
+   * @slot {{ props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } }}
+   */
+
+  /**
+   * Specify the kind of button
+   * @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost"}
+   */
+  export let kind = "primary";
+
+  /**
+   * Specify the size of button
+   * @type {"default" | "field" | "small" | "lg" | "xl"}
+   */
+  export let size = "default";
+
+  /** Set to `true` to use Carbon's expressive typesetting */
+  export let expressive = false;
+
+  /**
+   * Set to `true` to enable the selected state for an icon-only, ghost button
+   */
+  export let isSelected = false;
+
+  /**
+   * Specify the icon to render
+   * Alternatively, use the named slot "icon" (e.g., `<Icon slot="icon" size="{20}" />`)
+   *
+   * @type {any}
+   */
+  export let icon = undefined;
+
+  /**
+   * Specify the ARIA label for the button icon
+   * @type {string}
+   */
+  export let iconDescription = undefined;
+
+  /**
+   * Set the alignment of the tooltip relative to the icon.
+   * Only applies to icon-only buttons
+   * @type {"start" | "center" | "end"}
+   */
+  export let tooltipAlignment = "center";
+
+  /**
+   * Set the position of the tooltip relative to the icon
+   * @type {"top" | "right" | "bottom" | "left"}
+   */
+  export let tooltipPosition = "bottom";
+
+  /**
+   * Set to `true` to render a custom HTML element
+   * Props are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>)
+   */
+  export let as = false;
+
+  /** Set to `true` to display the skeleton state */
+  export let skeleton = false;
+
+  /** Set to `true` to disable the button */
+  export let disabled = false;
+
+  /**
+   * Set the `href` to use an anchor link
+   * @type {string}
+   */
+  export let href = undefined;
+
+  /** Specify the tabindex */
+  export let tabindex = "0";
+
+  /** Specify the `type` attribute for the button element */
+  export let type = "button";
+
+  /** Obtain a reference to the HTML element */
+  export let ref = null;
+
+  import { getContext } from "svelte";
+  import ButtonSkeleton from "./ButtonSkeleton.svelte";
+
+  const ctx = getContext("ComposedModal");
+
+  $: if (ctx && ref) {
+    ctx.declareRef(ref);
+  }
+  $: hasIconOnly = (icon || $$slots.icon) && !$$slots.default;
+  $: iconProps = {
+    "aria-hidden": "true",
+    class: "bx--btn__icon",
+    "aria-label": iconDescription,
+  };
+  $: buttonProps = {
+    type: href && !disabled ? undefined : type,
+    tabindex,
+    disabled: disabled === true ? true : undefined,
+    href,
+    "aria-pressed":
+      hasIconOnly && kind === "ghost" && !href ? isSelected : undefined,
+    ...$$restProps,
+    class: [
+      "bx--btn",
+      expressive && "bx--btn--expressive",
+      ((size === "small" && !expressive) ||
+        (size === "sm" && !expressive) ||
+        (size === "small" && !expressive)) &&
+        "bx--btn--sm",
+      (size === "field" && !expressive) ||
+        (size === "md" && !expressive && "bx--btn--md"),
+      size === "field" && "bx--btn--field",
+      size === "small" && "bx--btn--sm",
+      size === "lg" && "bx--btn--lg",
+      size === "xl" && "bx--btn--xl",
+      kind && `bx--btn--${kind}`,
+      disabled && "bx--btn--disabled",
+      hasIconOnly && "bx--btn--icon-only",
+      hasIconOnly && "bx--tooltip__trigger",
+      hasIconOnly && "bx--tooltip--a11y",
+      hasIconOnly &&
+        tooltipPosition &&
+        `bx--btn--icon-only--${tooltipPosition}`,
+      hasIconOnly &&
+        tooltipAlignment &&
+        `bx--tooltip--align-${tooltipAlignment}`,
+      hasIconOnly && isSelected && kind === "ghost" && "bx--btn--selected",
+      $$restProps.class,
+    ]
+      .filter(Boolean)
+      .join(" "),
+  };
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+{#if skeleton}
+  <ButtonSkeleton
+    {href}
+    {size}
+    {...$$restProps}
+    style={hasIconOnly && "width: 3rem;"}
+    on:click
+    on:focus
+    on:blur
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+  />
+{:else if as}
+  <slot props={buttonProps} />
+{:else if href && !disabled}
+  <!-- svelte-ignore a11y-missing-attribute -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <a
+    bind:this={ref}
+    {...buttonProps}
+    on:click
+    on:focus
+    on:blur
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+  >
+    {#if hasIconOnly}
+      <span class:bx--assistive-text={true}>{iconDescription}</span>
+    {/if}
+    <slot />
+    {#if $$slots.icon}
+      <slot
+        name="icon"
+        style={hasIconOnly ? "margin-left: 0" : undefined}
+        {...iconProps}
+      />
+    {:else if icon}
+      <svelte:component
+        this={icon}
+        style={hasIconOnly ? "margin-left: 0" : undefined}
+        {...iconProps}
+      />
+    {/if}
+  </a>
+{:else}
+  <button
+    bind:this={ref}
+    {...buttonProps}
+    on:click
+    on:focus
+    on:blur
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+  >
+    {#if hasIconOnly}
+      <span class:bx--assistive-text={true}>{iconDescription}</span>
+    {/if}
+    <slot />
+    {#if $$slots.icon}
+      <slot
+        name="icon"
+        style={hasIconOnly ? "margin-left: 0" : undefined}
+        {...iconProps}
+      />
+    {:else if icon}
+      <svelte:component
+        this={icon}
+        style={hasIconOnly ? "margin-left: 0" : undefined}
+        {...iconProps}
+      />
+    {/if}
+  </button>
+{/if}

package/src/Button/ButtonSet.svelte

@@ -0,0 +1,12 @@
+<script>
+  /** Set to `true` to stack the buttons vertically */
+  export let stacked = false;
+</script>
+
+<div
+  class:bx--btn-set={true}
+  class:bx--btn-set--stacked={stacked}
+  {...$$restProps}
+>
+  <slot />
+</div>

package/src/Button/ButtonSkeleton.svelte

@@ -0,0 +1,54 @@
+<script>
+  /**
+   * Set the `href` to use an anchor link
+   * @type {string}
+   */
+  export let href = undefined;
+
+  /**
+   * Specify the size of button skeleton
+   * @type {"default" | "field" | "small" | "lg" | "xl"}
+   */
+  export let size = "default";
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+{#if href}
+  <a
+    {href}
+    rel={$$restProps.target === "_blank" ? "noopener noreferrer" : undefined}
+    role="button"
+    class:bx--skeleton={true}
+    class:bx--btn={true}
+    class:bx--btn--field={size === "field"}
+    class:bx--btn--sm={size === "small"}
+    class:bx--btn--lg={size === "lg"}
+    class:bx--btn--xl={size === "xl"}
+    {...$$restProps}
+    on:click
+    on:focus
+    on:blur
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+  >
+    {""}
+  </a>
+{:else}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    class:bx--skeleton={true}
+    class:bx--btn={true}
+    class:bx--btn--field={size === "field"}
+    class:bx--btn--sm={size === "small"}
+    class:bx--btn--lg={size === "lg"}
+    class:bx--btn--xl={size === "xl"}
+    {...$$restProps}
+    on:click
+    on:focus
+    on:blur
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+  ></div>
+{/if}

package/src/Button/index.js

@@ -0,0 +1,3 @@
+export { default as Button } from "./Button.svelte";
+export { default as ButtonSkeleton } from "./ButtonSkeleton.svelte";
+export { default as ButtonSet } from "./ButtonSet.svelte";

package/src/Checkbox/Checkbox.svelte

@@ -0,0 +1,130 @@
+<script>
+  /**
+   * @restProps {div}
+   * @event {boolean} check
+   */
+
+  /**
+   * Specify the value of the checkbox
+   * @type {any}
+   */
+  export let value = "";
+
+  /** Specify whether the checkbox is checked */
+  export let checked = false;
+
+  /**
+   * Specify the bound group
+   * @type {ReadonlyArray<any>}
+   */
+  export let group = undefined;
+
+  /** Specify whether the checkbox is indeterminate */
+  export let indeterminate = false;
+
+  /** Set to `true` to display the skeleton state */
+  export let skeleton = false;
+
+  /** Set to `true` to mark the field as required */
+  export let required = false;
+
+  /** Set to `true` for the checkbox to be read-only */
+  export let readonly = false;
+
+  /** Set to `true` to disable the checkbox */
+  export let disabled = false;
+
+  /** Specify the label text */
+  export let labelText = "";
+
+  /** Set to `true` to visually hide the label text */
+  export let hideLabel = false;
+
+  /** Set a name for the input element */
+  export let name = "";
+
+  /**
+   * Specify the title attribute for the label element
+   * @type {string}
+   */
+  export let title = undefined;
+
+  /** Set an id for the input label */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /** Obtain a reference to the input HTML element */
+  export let ref = null;
+
+  import { createEventDispatcher } from "svelte";
+  import CheckboxSkeleton from "./CheckboxSkeleton.svelte";
+
+  const dispatch = createEventDispatcher();
+
+  $: useGroup = Array.isArray(group);
+  $: checked = useGroup ? group.includes(value) : checked;
+  $: dispatch("check", checked);
+
+  let refLabel = null;
+
+  $: isTruncated = refLabel?.offsetWidth < refLabel?.scrollWidth;
+  $: title = !title && isTruncated ? refLabel?.innerText : title;
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+{#if skeleton}
+  <CheckboxSkeleton
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+  />
+{:else}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    class:bx--form-item={true}
+    class:bx--checkbox-wrapper={true}
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+  >
+    <input
+      bind:this={ref}
+      type="checkbox"
+      {value}
+      {checked}
+      {disabled}
+      {id}
+      bind:indeterminate
+      {name}
+      {required}
+      {readonly}
+      class:bx--checkbox={true}
+      on:change={() => {
+        if (useGroup) {
+          group = group.includes(value)
+            ? group.filter((_value) => _value !== value)
+            : [...group, value];
+        } else {
+          checked = !checked;
+        }
+      }}
+      on:change
+      on:focus
+      on:blur
+    />
+    <label for={id} {title} class:bx--checkbox-label={true}>
+      <span
+        bind:this={refLabel}
+        class:bx--checkbox-label-text={true}
+        class:bx--visually-hidden={hideLabel}
+      >
+        <slot name="labelText">
+          {labelText}
+        </slot>
+      </span>
+    </label>
+  </div>
+{/if}

package/src/Checkbox/CheckboxSkeleton.svelte

@@ -0,0 +1,14 @@
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class:bx--form-item={true}
+  class:bx--checkbox-wrapper={true}
+  class:bx--checkbox-label={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  <span class:bx--checkbox-label-text={true} class:bx--skeleton={true}></span>
+</div>

package/src/Checkbox/InlineCheckbox.svelte

@@ -0,0 +1,41 @@
+<script>
+  /** Specify whether the checkbox is checked */
+  export let checked = false;
+
+  /** Specify whether the checkbox is indeterminate */
+  export let indeterminate = false;
+
+  /**
+   * Specify the title attribute for the label element
+   * @type {string}
+   */
+  export let title = undefined;
+
+  /** Set an id for the input label */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /** Obtain a reference to the input HTML element */
+  export let ref = null;
+</script>
+
+<div class:bx--checkbox--inline={true}>
+  <input
+    bind:this={ref}
+    type="checkbox"
+    class:bx--checkbox={true}
+    checked={indeterminate ? false : checked}
+    bind:indeterminate
+    {id}
+    {...$$restProps}
+    aria-checked={indeterminate ? undefined : checked}
+    on:change
+    on:focus
+    on:blur
+  />
+  <label
+    for={id}
+    {title}
+    aria-label={$$props["aria-label"]}
+    class:bx--checkbox-label={true}
+  ></label>
+</div>

package/src/Checkbox/index.js

@@ -0,0 +1,3 @@
+export { default as Checkbox } from "./Checkbox.svelte";
+export { default as CheckboxSkeleton } from "./CheckboxSkeleton.svelte";
+export { default as InlineCheckbox } from "./InlineCheckbox.svelte";