@ifloppy/maxcraftmc-ui-svelte 0.1.0

package/types/Grid/Grid.svelte.d.ts

@@ -0,0 +1,65 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["div"];
+
+type $Props = {
+  /**
+   * Set to `true` to render a custom HTML element
+   * Props are destructured as `props` in the default slot (e.g., <Grid let:props><header {...props}>...</header></Grid>)
+   * @default false
+   */
+  as?: boolean;
+
+  /**
+   * Set to `true` to use the condensed variant
+   * @default false
+   */
+  condensed?: boolean;
+
+  /**
+   * Set to `true` to use the narrow variant
+   * @default false
+   */
+  narrow?: boolean;
+
+  /**
+   * Set to `true` to use the fullWidth variant
+   * @default false
+   */
+  fullWidth?: boolean;
+
+  /**
+   * Set to `true` to remove the gutter
+   * @default false
+   */
+  noGutter?: boolean;
+
+  /**
+   * Set to `true` to remove the left gutter
+   * @default false
+   */
+  noGutterLeft?: boolean;
+
+  /**
+   * Set to `true` to remove the right gutter
+   * @default false
+   */
+  noGutterRight?: boolean;
+
+  /**
+   * Set to `true` to add top and bottom padding to all columns
+   * @default false
+   */
+  padding?: boolean;
+
+  [key: `data-${string}`]: any;
+};
+
+export type GridProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class Grid extends SvelteComponentTyped<
+  GridProps,
+  Record<string, any>,
+  { default: { props: { class: string; [key: string]: any } } }
+> {}

package/types/Grid/Row.svelte.d.ts

@@ -0,0 +1,59 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["div"];
+
+type $Props = {
+  /**
+   * Set to `true` to render a custom HTML element
+   * Props are destructured as `props` in the default slot (e.g., <Row let:props><section {...props}>...</section></Row>)
+   * @default false
+   */
+  as?: boolean;
+
+  /**
+   * Set to `true` to use the condensed variant
+   * @default false
+   */
+  condensed?: boolean;
+
+  /**
+   * Set to `true` to use the narrow variant
+   * @default false
+   */
+  narrow?: boolean;
+
+  /**
+   * Set to `true` to remove the gutter
+   * @default false
+   */
+  noGutter?: boolean;
+
+  /**
+   * Set to `true` to remove the left gutter
+   * @default false
+   */
+  noGutterLeft?: boolean;
+
+  /**
+   * Set to `true` to remove the right gutter
+   * @default false
+   */
+  noGutterRight?: boolean;
+
+  /**
+   * Set to `true` to add top and bottom padding to all columns
+   * @default false
+   */
+  padding?: boolean;
+
+  [key: `data-${string}`]: any;
+};
+
+export type RowProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class Row extends SvelteComponentTyped<
+  RowProps,
+  Record<string, any>,
+  { default: { props: { class: string; [key: string]: any } } }
+> {}

package/types/ImageLoader/ImageLoader.svelte.d.ts

@@ -0,0 +1,64 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["img"];
+
+type $Props = {
+  /**
+   * Specify the image source
+   * @default ""
+   */
+  src?: string;
+
+  /**
+   * Specify the image alt text
+   * @default ""
+   */
+  alt?: string;
+
+  /**
+   * Specify the aspect ratio for the image wrapper
+   * @default undefined
+   */
+  ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2";
+
+  /**
+   * Set to `true` when `loaded` is `true` and `error` is false
+   * @default false
+   */
+  loading?: boolean;
+
+  /**
+   * Set to `true` when the image is loaded
+   * @default false
+   */
+  loaded?: boolean;
+
+  /**
+   * Set to `true` if an error occurs when loading the image
+   * @default false
+   */
+  error?: boolean;
+
+  /**
+   * Set to `true` to fade in the image on load
+   * The duration uses the `fast-02` value following Carbon guidelines on motion
+   * @default false
+   */
+  fadeIn?: boolean;
+
+  [key: `data-${string}`]: any;
+};
+
+export type ImageLoaderProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class ImageLoader extends SvelteComponentTyped<
+  ImageLoaderProps,
+  { load: CustomEvent<null>; error: CustomEvent<null> },
+  { error: {}; loading: {} }
+> {
+  /**
+   * Method invoked to load the image provided a `src` value
+   */
+  loadImage: (url?: string) => void;
+}

package/types/InlineLoading/InlineLoading.svelte.d.ts

@@ -0,0 +1,47 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["div"];
+
+type $Props = {
+  /**
+   * Set the loading status
+   * @default "active"
+   */
+  status?: "active" | "inactive" | "finished" | "error";
+
+  /**
+   * Set the loading description
+   * @default undefined
+   */
+  description?: string;
+
+  /**
+   * Specify a description for the loading icon.
+   * Defaults to the `status` prop for the "error" and "finished" states
+   * @default undefined
+   */
+  iconDescription?: string;
+
+  /**
+   * Specify the timeout delay (ms) after `status` is set to "success"
+   * @default 1500
+   */
+  successDelay?: number;
+
+  [key: `data-${string}`]: any;
+};
+
+export type InlineLoadingProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class InlineLoading extends SvelteComponentTyped<
+  InlineLoadingProps,
+  {
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+    success: CustomEvent<null>;
+  },
+  {}
+> {}

package/types/Link/Link.svelte.d.ts

@@ -0,0 +1,64 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["a"];
+
+type $Props = {
+  /**
+   * Specify the size of the link
+   * @default undefined
+   */
+  size?: "sm" | "lg";
+
+  /**
+   * Specify the href value
+   * @default undefined
+   */
+  href?: string;
+
+  /**
+   * Set to `true` to use the inline variant
+   * @default false
+   */
+  inline?: boolean;
+
+  /**
+   * Specify the icon to render
+   * `inline` must be `false`
+   * @default undefined
+   */
+  icon?: any;
+
+  /**
+   * Set to `true` to disable the checkbox
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Set to `true` to allow visited styles
+   * @default false
+   */
+  visited?: boolean;
+
+  /**
+   * Obtain a reference to the top-level HTML element
+   * @default null
+   */
+  ref?: null | HTMLAnchorElement;
+
+  [key: `data-${string}`]: any;
+};
+
+export type LinkProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class Link extends SvelteComponentTyped<
+  LinkProps,
+  {
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  { default: {}; icon: {} }
+> {}

package/types/Link/OutboundLink.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { LinkProps } from "./Link.svelte";
+
+export type OutboundLinkProps = LinkProps & {};
+
+export default class OutboundLink extends SvelteComponentTyped<
+  OutboundLinkProps,
+  {
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  { default: {} }
+> {}

package/types/ListBox/ListBox.svelte.d.ts

@@ -0,0 +1,70 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["div"];
+
+type $Props = {
+  /**
+   * Set the size of the list box
+   * @default undefined
+   */
+  size?: "sm" | "xl";
+
+  /**
+   * Set the type of the list box
+   * @default "default"
+   */
+  type?: "default" | "inline";
+
+  /**
+   * Set to `true` to open the list box
+   * @default false
+   */
+  open?: boolean;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @default false
+   */
+  light?: boolean;
+
+  /**
+   * Set to `true` to disable the list box
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Set to `true` to indicate an invalid state
+   * @default false
+   */
+  invalid?: boolean;
+
+  /**
+   * Specify the invalid state text
+   * @default ""
+   */
+  invalidText?: string;
+
+  /**
+   * Set to `true` to indicate an warning state
+   * @default false
+   */
+  warn?: boolean;
+
+  /**
+   * Specify the warning state text
+   * @default ""
+   */
+  warnText?: string;
+
+  [key: `data-${string}`]: any;
+};
+
+export type ListBoxProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class ListBox extends SvelteComponentTyped<
+  ListBoxProps,
+  { keydown: WindowEventMap["keydown"]; click: WindowEventMap["click"] },
+  { default: {} }
+> {}

package/types/ListBox/ListBoxField.svelte.d.ts

@@ -0,0 +1,67 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+export type ListBoxFieldTranslationId = "close" | "open";
+
+type $RestProps = SvelteHTMLElements["div"];
+
+type $Props = {
+  /**
+   * Set to `true` to disable the list box field
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify the role attribute
+   * @default "combobox"
+   */
+  role?: string;
+
+  /**
+   * Specify the tabindex
+   * @default "-1"
+   */
+  tabindex?: string;
+
+  /**
+   * Override the default translation ids
+   * @default (id) => defaultTranslations[id]
+   */
+  translateWithId?: (id: ListBoxFieldTranslationId) => string;
+
+  /**
+   * Set an id for the top-level element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Obtain a reference to the top-level HTML element
+   * @default null
+   */
+  ref?: null | HTMLDivElement;
+
+  [key: `data-${string}`]: any;
+};
+
+export type ListBoxFieldProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class ListBoxField extends SvelteComponentTyped<
+  ListBoxFieldProps,
+  {
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+    keydown: WindowEventMap["keydown"];
+    focus: WindowEventMap["focus"];
+    blur: WindowEventMap["blur"];
+  },
+  { default: {} }
+> {
+  /**
+   * Default translation ids
+   */
+  translationIds: { close: "close"; open: "open" };
+}

package/types/ListBox/ListBoxMenu.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["div"];
+
+type $Props = {
+  /**
+   * Set an id for the top-level element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Obtain a reference to the HTML element
+   * @default null
+   */
+  ref?: null | HTMLDivElement;
+
+  [key: `data-${string}`]: any;
+};
+
+export type ListBoxMenuProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class ListBoxMenu extends SvelteComponentTyped<
+  ListBoxMenuProps,
+  { scroll: WindowEventMap["scroll"] },
+  { default: {} }
+> {}

package/types/ListBox/ListBoxMenuIcon.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+export type ListBoxMenuIconTranslationId = "close" | "open";
+
+type $RestProps = SvelteHTMLElements["div"];
+
+type $Props = {
+  /**
+   * Set to `true` to open the list box menu icon
+   * @default false
+   */
+  open?: boolean;
+
+  /**
+   * Override the default translation ids
+   * @default (id) => defaultTranslations[id]
+   */
+  translateWithId?: (id: ListBoxMenuIconTranslationId) => string;
+
+  [key: `data-${string}`]: any;
+};
+
+export type ListBoxMenuIconProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class ListBoxMenuIcon extends SvelteComponentTyped<
+  ListBoxMenuIconProps,
+  { click: WindowEventMap["click"] },
+  {}
+> {
+  /**
+   * Default translation ids
+   */
+  translationIds: { close: "close"; open: "open" };
+}

package/types/ListBox/ListBoxMenuItem.svelte.d.ts

@@ -0,0 +1,38 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["div"];
+
+type $Props = {
+  /**
+   * Set to `true` to enable the active state
+   * @default false
+   */
+  active?: boolean;
+
+  /**
+   * Set to `true` to enable the highlighted state
+   * @default false
+   */
+  highlighted?: boolean;
+
+  /**
+   * Set to `true` to disable the menu item
+   * @default false
+   */
+  disabled?: boolean;
+
+  [key: `data-${string}`]: any;
+};
+
+export type ListBoxMenuItemProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class ListBoxMenuItem extends SvelteComponentTyped<
+  ListBoxMenuItemProps,
+  {
+    click: WindowEventMap["click"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  { default: {} }
+> {}

package/types/ListBox/ListBoxSelection.svelte.d.ts

@@ -0,0 +1,47 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+export type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
+
+type $RestProps = SvelteHTMLElements["div"];
+
+type $Props = {
+  /**
+   * Specify the number of selected items
+   * @default undefined
+   */
+  selectionCount?: number;
+
+  /**
+   * Set to `true` to disable the list box selection
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Override the default translation ids
+   * @default (id) => defaultTranslations[id]
+   */
+  translateWithId?: (id: ListBoxSelectionTranslationId) => string;
+
+  /**
+   * Obtain a reference to the top-level HTML element
+   * @default null
+   */
+  ref?: null | HTMLDivElement;
+
+  [key: `data-${string}`]: any;
+};
+
+export type ListBoxSelectionProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class ListBoxSelection extends SvelteComponentTyped<
+  ListBoxSelectionProps,
+  { clear: CustomEvent<KeyboardEvent | MouseEvent> },
+  {}
+> {
+  /**
+   * Default translation ids
+   */
+  translationIds: { clearAll: "clearAll"; clearSelection: "clearSelection" };
+}

package/types/ListItem/ListItem.svelte.d.ts

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

package/types/Loading/Loading.svelte.d.ts

@@ -0,0 +1,40 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["div"];
+
+type $Props = {
+  /**
+   * Set to `true` to use the small variant
+   * @default false
+   */
+  small?: boolean;
+
+  /**
+   * Set to `false` to disable the active state
+   * @default true
+   */
+  active?: boolean;
+
+  /**
+   * Set to `false` to disable the overlay
+   * @default true
+   */
+  withOverlay?: boolean;
+
+  /**
+   * Specify the description to describe the loading state
+   * @default "loading"
+   */
+  description?: string;
+
+  [key: `data-${string}`]: any;
+};
+
+export type LoadingProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class Loading extends SvelteComponentTyped<
+  LoadingProps,
+  Record<string, any>,
+  {}
+> {}

package/types/LocalStorage/LocalStorage.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { SvelteComponentTyped } from "svelte";
+
+export type LocalStorageProps = {
+  /**
+   * Specify the local storage key
+   * @default "local-storage-key"
+   */
+  key?: string;
+
+  /**
+   * Provide a value to persist
+   * @default ""
+   */
+  value?: any;
+};
+
+export default class LocalStorage extends SvelteComponentTyped<
+  LocalStorageProps,
+  {
+    save: CustomEvent<null>;
+    update: CustomEvent<{ prevValue: any; value: any }>;
+  },
+  {}
+> {
+  /**
+   * Remove the persisted key value from the browser's local storage
+   */
+  clearItem: () => void;
+
+  /**
+   * Clear all key values from the browser's local storage
+   */
+  clearAll: () => void;
+}