@ifloppy/maxcraftmc-ui-svelte 0.1.0

package/types/NumberInput/NumberInput.svelte.d.ts

@@ -0,0 +1,168 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+export type NumberInputTranslationId = "increment" | "decrement";
+
+type $RestProps = SvelteHTMLElements["input"];
+
+type $Props = {
+  /**
+   * Set the size of the input
+   * @default undefined
+   */
+  size?: "sm" | "xl";
+
+  /**
+   * Specify the input value.
+   * Use `null` to denote "no value"
+   * @default null
+   */
+  value?: null | number;
+
+  /**
+   * Specify the step increment
+   * @default 1
+   */
+  step?: number;
+
+  /**
+   * Specify the maximum value
+   * @default undefined
+   */
+  max?: number;
+
+  /**
+   * Specify the minimum value
+   * @default undefined
+   */
+  min?: number;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @default false
+   */
+  light?: boolean;
+
+  /**
+   * Set to `true` for the input to be read-only
+   * @default false
+   */
+  readonly?: boolean;
+
+  /**
+   * Set to `true` to allow for an empty value
+   * @default false
+   */
+  allowEmpty?: boolean;
+
+  /**
+   * Set to `true` to disable the input
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Set to `true` to hide the input stepper buttons
+   * @default false
+   */
+  hideSteppers?: boolean;
+
+  /**
+   * Specify the ARIA label for the increment icons
+   * @default ""
+   */
+  iconDescription?: string;
+
+  /**
+   * 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;
+
+  /**
+   * Specify the helper text
+   * @default ""
+   */
+  helperText?: string;
+
+  /**
+   * Specify the label text
+   * @default ""
+   */
+  label?: string;
+
+  /**
+   * Set to `true` to visually hide the label text
+   * @default false
+   */
+  hideLabel?: boolean;
+
+  /**
+   * Override the default translation ids
+   * @default (id) => defaultTranslations[id]
+   */
+  translateWithId?: (id: NumberInputTranslationId) => string;
+
+  /**
+   * Set an id for the input element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Specify a name attribute for the input
+   * @default undefined
+   */
+  name?: string;
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @default null
+   */
+  ref?: null | HTMLInputElement;
+
+  [key: `data-${string}`]: any;
+};
+
+export type NumberInputProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class NumberInput extends SvelteComponentTyped<
+  NumberInputProps,
+  {
+    change: CustomEvent<null | number>;
+    input: CustomEvent<null | number>;
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+    keydown: WindowEventMap["keydown"];
+    keyup: WindowEventMap["keyup"];
+    focus: WindowEventMap["focus"];
+    blur: WindowEventMap["blur"];
+    paste: WindowEventMap["paste"];
+  },
+  { label: {} }
+> {
+  /**
+   * Default translation ids
+   */
+  translationIds: { increment: "increment"; decrement: "decrement" };
+}

package/types/NumberInput/NumberInputSkeleton.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["div"];
+
+type $Props = {
+  /**
+   * Set to `true` to hide the label text
+   * @default false
+   */
+  hideLabel?: boolean;
+
+  [key: `data-${string}`]: any;
+};
+
+export type NumberInputSkeletonProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class NumberInputSkeleton extends SvelteComponentTyped<
+  NumberInputSkeletonProps,
+  {
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  {}
+> {}

package/types/OrderedList/OrderedList.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["ol"];
+
+type $Props = {
+  /**
+   * Set to `true` to use the nested variant
+   * @default false
+   */
+  nested?: boolean;
+
+  /**
+   * Set to `true` to use native list styles
+   * @default false
+   */
+  native?: boolean;
+
+  /**
+   * Set to `true` to use Carbon's expressive typesetting
+   * @default false
+   */
+  expressive?: boolean;
+
+  [key: `data-${string}`]: any;
+};
+
+export type OrderedListProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class OrderedList extends SvelteComponentTyped<
+  OrderedListProps,
+  {
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  { default: {} }
+> {}

package/types/OverflowMenu/OverflowMenu.svelte.d.ts

@@ -0,0 +1,96 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["button"];
+
+type $Props = {
+  /**
+   * Specify the size of the overflow menu
+   * @default undefined
+   */
+  size?: "sm" | "xl";
+
+  /**
+   * Specify the direction of the overflow menu relative to the button
+   * @default "bottom"
+   */
+  direction?: "top" | "bottom";
+
+  /**
+   * Set to `true` to open the menu
+   * @default false
+   */
+  open?: boolean;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @default false
+   */
+  light?: boolean;
+
+  /**
+   * Set to `true` to flip the menu relative to the button
+   * @default false
+   */
+  flipped?: boolean;
+
+  /**
+   * Specify the menu options class
+   * @default undefined
+   */
+  menuOptionsClass?: string;
+
+  /**
+   * Specify the icon to render.
+   * Defaults to `<OverflowMenuVertical />`
+   * @default undefined
+   */
+  icon?: any;
+
+  /**
+   * Specify the icon class
+   * @default undefined
+   */
+  iconClass?: string;
+
+  /**
+   * Specify the ARIA label for the icon
+   * @default "Open and close list of options"
+   */
+  iconDescription?: string;
+
+  /**
+   * Set an id for the button element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Obtain a reference to the trigger button element
+   * @default null
+   */
+  buttonRef?: null | HTMLButtonElement;
+
+  /**
+   * Obtain a reference to the overflow menu element
+   * @default null
+   */
+  menuRef?: null | HTMLUListElement;
+
+  [key: `data-${string}`]: any;
+};
+
+export type OverflowMenuProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class OverflowMenu extends SvelteComponentTyped<
+  OverflowMenuProps,
+  {
+    close: CustomEvent<null | { index: number; text: string }>;
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+    keydown: WindowEventMap["keydown"];
+  },
+  { default: {}; menu: {} }
+> {}

package/types/OverflowMenu/OverflowMenuItem.svelte.d.ts

@@ -0,0 +1,71 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["li"];
+
+type $Props = {
+  /**
+   * Specify the item text.
+   * Alternatively, use the default slot
+   * @default "Provide text"
+   */
+  text?: string;
+
+  /**
+   * Specify the `href` attribute if the item is a link
+   * @default ""
+   */
+  href?: string;
+
+  /**
+   * Set to `true` if the item should be focused when opening the menu
+   * @default false
+   */
+  primaryFocus?: boolean;
+
+  /**
+   * Set to `true` to disable the item
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Set to `true` to include a divider
+   * @default false
+   */
+  hasDivider?: boolean;
+
+  /**
+   * Set to `true` to use the danger variant
+   * @default false
+   */
+  danger?: boolean;
+
+  /**
+   * Set to `false` to omit the button `title` attribute
+   * @default true
+   */
+  requireTitle?: boolean;
+
+  /**
+   * 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 | HTMLAnchorElement | HTMLButtonElement;
+
+  [key: `data-${string}`]: any;
+};
+
+export type OverflowMenuItemProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class OverflowMenuItem extends SvelteComponentTyped<
+  OverflowMenuItemProps,
+  { click: WindowEventMap["click"]; keydown: WindowEventMap["keydown"] },
+  { default: {} }
+> {}

package/types/Pagination/Pagination.svelte.d.ts

@@ -0,0 +1,129 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["div"];
+
+type $Props = {
+  /**
+   * Specify the current page index
+   * @default 1
+   */
+  page?: number;
+
+  /**
+   * Specify the total number of items
+   * @default 0
+   */
+  totalItems?: number;
+
+  /**
+   * If `totalItems` is a large number, it can affect the
+   * rendering performance of this component since its value
+   * is used to calculate the number of pages in the native
+   * select dropdown. This value creates a small window of
+   * pages rendered around the current page. By default,
+   * a maximum of 1000 select items are rendered.
+   * @default 1000
+   */
+  pageWindow?: number;
+
+  /**
+   * Set to `true` to disable the pagination
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify the forward button text
+   * @default "Next page"
+   */
+  forwardText?: string;
+
+  /**
+   * Specify the backward button text
+   * @default "Previous page"
+   */
+  backwardText?: string;
+
+  /**
+   * Specify the items per page text
+   * @default "Items per page:"
+   */
+  itemsPerPageText?: string;
+
+  /**
+   * Override the item text
+   * @default (min, max) => `${min.toLocaleString()}–${max.toLocaleString()} item${max === 1 ? "" : "s"}`
+   */
+  itemText?: (min: number, max: number) => string;
+
+  /**
+   * Override the item range text
+   * @default (min, max, total) => `${min.toLocaleString()}–${max.toLocaleString()} of ${total.toLocaleString()} item${max === 1 ? "" : "s"}`
+   */
+  itemRangeText?: (min: number, max: number, total: number) => string;
+
+  /**
+   * Set to `true` to disable the page input
+   * @default false
+   */
+  pageInputDisabled?: boolean;
+
+  /**
+   * Set to `true` to disable the page size input
+   * @default false
+   */
+  pageSizeInputDisabled?: boolean;
+
+  /**
+   * Specify the number of items to display in a page
+   * @default 10
+   */
+  pageSize?: number;
+
+  /**
+   * Specify the available page sizes
+   * @default [10]
+   */
+  pageSizes?: ReadonlyArray<number>;
+
+  /**
+   * Set to `true` if the number of pages is unknown
+   * @default false
+   */
+  pagesUnknown?: boolean;
+
+  /**
+   * Override the page text
+   * @default (page) => `page ${page.toLocaleString()}`
+   */
+  pageText?: (page: number) => string;
+
+  /**
+   * Override the page range text
+   * @default (current, total) => `of ${total.toLocaleString()} page${total === 1 ? "" : "s"}`
+   */
+  pageRangeText?: (current: number, total: number) => string;
+
+  /**
+   * Set an id for the top-level element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  [key: `data-${string}`]: any;
+};
+
+export type PaginationProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class Pagination extends SvelteComponentTyped<
+  PaginationProps,
+  {
+    /** Dispatched after any user interaction */
+    change: CustomEvent<{ page?: number; pageSize?: number }>;
+    ["click:button--previous"]: CustomEvent<{ page: number }>;
+    ["click:button--next"]: CustomEvent<{ page: number }>;
+    update: CustomEvent<{ pageSize: number; page: number }>;
+  },
+  {}
+> {}

package/types/Pagination/PaginationSkeleton.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 PaginationSkeletonProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class PaginationSkeleton extends SvelteComponentTyped<
+  PaginationSkeletonProps,
+  {
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  {}
+> {}

package/types/PaginationNav/PaginationNav.svelte.d.ts

@@ -0,0 +1,63 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["nav"];
+
+type $Props = {
+  /**
+   * Specify the current page index
+   * @default 1
+   */
+  page?: number;
+
+  /**
+   * Specify the total number of pages
+   * @default 10
+   */
+  total?: number;
+
+  /**
+   * Specify the total number of pages to show
+   * @default 10
+   */
+  shown?: number;
+
+  /**
+   * Set to `true` to loop the navigation
+   * @default false
+   */
+  loop?: boolean;
+
+  /**
+   * Specify the forward button text
+   * @default "Next page"
+   */
+  forwardText?: string;
+
+  /**
+   * Specify the backward button text
+   * @default "Previous page"
+   */
+  backwardText?: string;
+
+  /**
+   * Set the position of the tooltip relative to the pagination buttons.
+   * @default "bottom"
+   */
+  tooltipPosition?: "top" | "right" | "bottom" | "left" | "outside" | "inside";
+
+  [key: `data-${string}`]: any;
+};
+
+export type PaginationNavProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class PaginationNav extends SvelteComponentTyped<
+  PaginationNavProps,
+  {
+    /** fires after every user interaction */
+    change: CustomEvent<{ page: number }>;
+    ["click:button--previous"]: CustomEvent<{ page: number }>;
+    ["click:button--next"]: CustomEvent<{ page: number }>;
+  },
+  {}
+> {}

package/types/Popover/Popover.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 to `true` to display the popover
+   * @default false
+   */
+  open?: boolean;
+
+  /**
+   * Set to `true` to close the popover on an outside click
+   * @default false
+   */
+  closeOnOutsideClick?: boolean;
+
+  /**
+   * Set to `true` render a caret
+   * @default false
+   */
+  caret?: boolean;
+
+  /**
+   * Specify the alignment of the caret
+   * @default "top"
+   */
+  align?:
+    | "top"
+    | "top-left"
+    | "top-right"
+    | "bottom"
+    | "bottom-left"
+    | "bottom-right"
+    | "left"
+    | "left-bottom"
+    | "left-top"
+    | "right"
+    | "right-bottom"
+    | "right-top";
+
+  /**
+   * Set to `true` to enable the light variant
+   * @default false
+   */
+  light?: boolean;
+
+  /**
+   * Set to `true` to enable the high contrast variant
+   * @default false
+   */
+  highContrast?: boolean;
+
+  /**
+   * Set to `true` to use a relative position
+   * @default false
+   */
+  relative?: boolean;
+
+  [key: `data-${string}`]: any;
+};
+
+export type PopoverProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class Popover extends SvelteComponentTyped<
+  PopoverProps,
+  { ["click:outside"]: CustomEvent<{ target: HTMLElement }> },
+  { default: {} }
+> {}