@ifloppy/maxcraftmc-ui-svelte 0.1.0

package/types/Accordion/AccordionItem.svelte.d.ts

@@ -0,0 +1,48 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["li"];
+
+type $Props = {
+  /**
+   * Specify the title of the accordion item heading.
+   * Alternatively, use the "title" slot (e.g., `<div slot="title">...</div>`)
+   * @default "title"
+   */
+  title?: string;
+
+  /**
+   * Set to `true` to open the first accordion item
+   * @default false
+   */
+  open?: boolean;
+
+  /**
+   * Set to `true` to disable the accordion item
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify the ARIA label for the accordion item chevron icon
+   * @default "Expand/Collapse"
+   */
+  iconDescription?: string;
+
+  [key: `data-${string}`]: any;
+};
+
+export type AccordionItemProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class AccordionItem extends SvelteComponentTyped<
+  AccordionItemProps,
+  {
+    animationend: WindowEventMap["animationend"];
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+    keydown: WindowEventMap["keydown"];
+  },
+  { default: {}; title: {} }
+> {}

package/types/Accordion/AccordionSkeleton.svelte.d.ts

@@ -0,0 +1,45 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["ul"];
+
+type $Props = {
+  /**
+   * Specify the number of accordion items to render
+   * @default 4
+   */
+  count?: number;
+
+  /**
+   * Specify alignment of accordion item chevron icon
+   * @default "end"
+   */
+  align?: "start" | "end";
+
+  /**
+   * Specify the size of the accordion
+   * @default undefined
+   */
+  size?: "sm" | "xl";
+
+  /**
+   * Set to `false` to close the first accordion item
+   * @default true
+   */
+  open?: boolean;
+
+  [key: `data-${string}`]: any;
+};
+
+export type AccordionSkeletonProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class AccordionSkeleton extends SvelteComponentTyped<
+  AccordionSkeletonProps,
+  {
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  {}
+> {}

package/types/AspectRatio/AspectRatio.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["div"];
+
+type $Props = {
+  /**
+   * Specify the aspect ratio
+   * @default "2x1"
+   */
+  ratio?:
+    | "2x1"
+    | "2x3"
+    | "16x9"
+    | "4x3"
+    | "1x1"
+    | "3x4"
+    | "3x2"
+    | "9x16"
+    | "1x2";
+
+  [key: `data-${string}`]: any;
+};
+
+export type AspectRatioProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class AspectRatio extends SvelteComponentTyped<
+  AspectRatioProps,
+  Record<string, any>,
+  { default: {} }
+> {}

package/types/Breadcrumb/Breadcrumb.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { BreadcrumbSkeletonProps } from "./BreadcrumbSkeleton.svelte";
+
+export type BreadcrumbProps = BreadcrumbSkeletonProps & {
+  /**
+   * Set to `true` to hide the breadcrumb trailing slash
+   * @default false
+   */
+  noTrailingSlash?: boolean;
+
+  /**
+   * Set to `true` to display skeleton state
+   * @default false
+   */
+  skeleton?: boolean;
+};
+
+export default class Breadcrumb extends SvelteComponentTyped<
+  BreadcrumbProps,
+  {
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  { default: {} }
+> {}

package/types/Breadcrumb/BreadcrumbItem.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["li"];
+
+type $Props = {
+  /**
+   * Set the `href` to use an anchor link
+   * @default undefined
+   */
+  href?: string;
+
+  /**
+   * Set to `true` if the breadcrumb item represents the current page
+   * @default false
+   */
+  isCurrentPage?: boolean;
+
+  [key: `data-${string}`]: any;
+};
+
+export type BreadcrumbItemProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class BreadcrumbItem extends SvelteComponentTyped<
+  BreadcrumbItemProps,
+  {
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  { default: { props?: { ["aria-current"]?: string; class: "bx--link" } } }
+> {}

package/types/Breadcrumb/BreadcrumbSkeleton.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["div"];
+
+type $Props = {
+  /**
+   * Set to `true` to hide the breadcrumb trailing slash
+   * @default false
+   */
+  noTrailingSlash?: boolean;
+
+  /**
+   * Specify the number of breadcrumb items to render
+   * @default 3
+   */
+  count?: number;
+
+  [key: `data-${string}`]: any;
+};
+
+export type BreadcrumbSkeletonProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class BreadcrumbSkeleton extends SvelteComponentTyped<
+  BreadcrumbSkeletonProps,
+  {
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  {}
+> {}

package/types/Breakpoint/Breakpoint.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { SvelteComponentTyped } from "svelte";
+
+export type BreakpointSize = "sm" | "md" | "lg" | "xlg" | "max";
+
+export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
+
+export type BreakpointProps = {
+  /**
+   * Determine the current Carbon grid breakpoint size
+   * @default undefined
+   */
+  size?: BreakpointSize;
+
+  /**
+   * Carbon grid sizes as an object
+   * @default { sm: false, md: false, lg: false, xlg: false, max: false, }
+   */
+  sizes?: Record<BreakpointSize, boolean>;
+};
+
+export default class Breakpoint extends SvelteComponentTyped<
+  BreakpointProps,
+  {
+    change: CustomEvent<{
+      size: BreakpointSize;
+      breakpointValue: BreakpointValue;
+    }>;
+  },
+  { default: { size: BreakpointSize; sizes: Record<BreakpointSize, boolean> } }
+> {}

package/types/Breakpoint/breakpointObserver.d.ts

@@ -0,0 +1,28 @@
+import type { Readable, Subscriber, Unsubscriber } from "svelte/store";
+import type { BreakpointSize, BreakpointValue } 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(): {
+  subscribe: (
+    this: void,
+    run: Subscriber<any>,
+    invalidate?: (value?: any) => void,
+  ) => Unsubscriber;
+  /**
+   * Returns a store readable store that returns whether the current
+   * breakpoint is smaller than {@link size}.
+   * @param {BreakpointSize} size Size to compare against.
+   */
+  smallerThan: (size: BreakpointSize) => Readable<boolean>;
+  /**
+   * Returns a store readable store that returns whether the current
+   * breakpoint is larger than {@link size}.
+   * @param {BreakpointSize} size Size to compare against.
+   */
+  largerThan: (size: BreakpointSize) => Readable<boolean>;
+};
+
+export default breakpointObserver;

package/types/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/types/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/types/Button/Button.svelte.d.ts

@@ -0,0 +1,140 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+import type { ButtonSkeletonProps } from "./ButtonSkeleton.svelte";
+
+type $RestProps = SvelteHTMLElements["button"] &
+  SvelteHTMLElements["a"] &
+  SvelteHTMLElements["div"];
+
+type $Props = {
+  /**
+   * Specify the kind of button
+   * @default "primary"
+   */
+  kind?:
+    | "primary"
+    | "secondary"
+    | "tertiary"
+    | "ghost"
+    | "danger"
+    | "danger-tertiary"
+    | "danger-ghost";
+
+  /**
+   * Specify the size of button
+   * @default "default"
+   */
+  size?: "default" | "field" | "small" | "lg" | "xl";
+
+  /**
+   * Set to `true` to use Carbon's expressive typesetting
+   * @default false
+   */
+  expressive?: boolean;
+
+  /**
+   * Set to `true` to enable the selected state for an icon-only, ghost button
+   * @default false
+   */
+  isSelected?: boolean;
+
+  /**
+   * Specify the icon to render
+   * Alternatively, use the named slot "icon" (e.g., `<Icon slot="icon" size="{20}" />`)
+   * @default undefined
+   */
+  icon?: any;
+
+  /**
+   * Specify the ARIA label for the button icon
+   * @default undefined
+   */
+  iconDescription?: string;
+
+  /**
+   * Set the alignment of the tooltip relative to the icon.
+   * Only applies to icon-only buttons
+   * @default "center"
+   */
+  tooltipAlignment?: "start" | "center" | "end";
+
+  /**
+   * Set the position of the tooltip relative to the icon
+   * @default "bottom"
+   */
+  tooltipPosition?: "top" | "right" | "bottom" | "left";
+
+  /**
+   * 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>)
+   * @default false
+   */
+  as?: boolean;
+
+  /**
+   * Set to `true` to display the skeleton state
+   * @default false
+   */
+  skeleton?: boolean;
+
+  /**
+   * Set to `true` to disable the button
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Set the `href` to use an anchor link
+   * @default undefined
+   */
+  href?: string;
+
+  /**
+   * Specify the tabindex
+   * @default "0"
+   */
+  tabindex?: string;
+
+  /**
+   * Specify the `type` attribute for the button element
+   * @default "button"
+   */
+  type?: string;
+
+  /**
+   * Obtain a reference to the HTML element
+   * @default null
+   */
+  ref?: null | HTMLAnchorElement | HTMLButtonElement;
+
+  [key: `data-${string}`]: any;
+};
+
+export type ButtonProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class Button extends SvelteComponentTyped<
+  ButtonProps,
+  {
+    click: WindowEventMap["click"];
+    focus: WindowEventMap["focus"];
+    blur: WindowEventMap["blur"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  {
+    default: {
+      props: {
+        role: "button";
+        type?: string;
+        tabindex: any;
+        disabled: boolean;
+        href?: string;
+        class: string;
+        [key: string]: any;
+      };
+    };
+    icon: {};
+  }
+> {}

package/types/Button/ButtonSet.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["div"];
+
+type $Props = {
+  /**
+   * Set to `true` to stack the buttons vertically
+   * @default false
+   */
+  stacked?: boolean;
+
+  [key: `data-${string}`]: any;
+};
+
+export type ButtonSetProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class ButtonSet extends SvelteComponentTyped<
+  ButtonSetProps,
+  Record<string, any>,
+  { default: {} }
+> {}

package/types/Button/ButtonSkeleton.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["a"];
+
+type $Props = {
+  /**
+   * Set the `href` to use an anchor link
+   * @default undefined
+   */
+  href?: string;
+
+  /**
+   * Specify the size of button skeleton
+   * @default "default"
+   */
+  size?: "default" | "field" | "small" | "lg" | "xl";
+
+  [key: `data-${string}`]: any;
+};
+
+export type ButtonSkeletonProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class ButtonSkeleton extends SvelteComponentTyped<
+  ButtonSkeletonProps,
+  {
+    click: WindowEventMap["click"];
+    focus: WindowEventMap["focus"];
+    blur: WindowEventMap["blur"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  {}
+> {}

package/types/Checkbox/Checkbox.svelte.d.ts

@@ -0,0 +1,109 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["div"];
+
+type $Props = {
+  /**
+   * Specify the value of the checkbox
+   * @default ""
+   */
+  value?: any;
+
+  /**
+   * Specify whether the checkbox is checked
+   * @default false
+   */
+  checked?: boolean;
+
+  /**
+   * Specify the bound group
+   * @default undefined
+   */
+  group?: ReadonlyArray<any>;
+
+  /**
+   * Specify whether the checkbox is indeterminate
+   * @default false
+   */
+  indeterminate?: boolean;
+
+  /**
+   * Set to `true` to display the skeleton state
+   * @default false
+   */
+  skeleton?: boolean;
+
+  /**
+   * Set to `true` to mark the field as required
+   * @default false
+   */
+  required?: boolean;
+
+  /**
+   * Set to `true` for the checkbox to be read-only
+   * @default false
+   */
+  readonly?: boolean;
+
+  /**
+   * Set to `true` to disable the checkbox
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify the label text
+   * @default ""
+   */
+  labelText?: string;
+
+  /**
+   * Set to `true` to visually hide the label text
+   * @default false
+   */
+  hideLabel?: boolean;
+
+  /**
+   * Set a name for the input element
+   * @default ""
+   */
+  name?: string;
+
+  /**
+   * Specify the title attribute for the label element
+   * @default undefined
+   */
+  title?: string;
+
+  /**
+   * Set an id for the input label
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @default null
+   */
+  ref?: null | HTMLInputElement;
+
+  [key: `data-${string}`]: any;
+};
+
+export type CheckboxProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class Checkbox extends SvelteComponentTyped<
+  CheckboxProps,
+  {
+    check: CustomEvent<boolean>;
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+    change: WindowEventMap["change"];
+    focus: WindowEventMap["focus"];
+    blur: WindowEventMap["blur"];
+  },
+  { labelText: {} }
+> {}

package/types/Checkbox/CheckboxSkeleton.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["div"];
+
+type $Props = {
+  [key: `data-${string}`]: any;
+};
+
+export type CheckboxSkeletonProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class CheckboxSkeleton extends SvelteComponentTyped<
+  CheckboxSkeletonProps,
+  {
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  {}
+> {}