@ifloppy/maxcraftmc-ui-svelte 0.1.0

package/types/CodeSnippet/CodeSnippet.svelte.d.ts

@@ -0,0 +1,140 @@
+import type { SvelteComponentTyped } from "svelte";
+
+export type CodeSnippetProps = {
+  /**
+   * Set the type of code snippet
+   * @default "single"
+   */
+  type?: "single" | "inline" | "multi";
+
+  /**
+   * Set the code snippet text.
+   * Alternatively, use the default slot (e.g., `<CodeSnippet>{code}</CodeSnippet>`).
+   *
+   * NOTE: you *must* use the `code` prop for the copy-to-clipboard functionality.
+   * @default undefined
+   */
+  code?: string;
+
+  /**
+   * By default, this component uses `navigator.clipboard.writeText` API to copy text to the user's clipboard.
+   *
+   * Provide a custom function to override this behavior.
+   * @default async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } }
+   */
+  copy?: (code: string) => void;
+
+  /**
+   * Set to `true` to expand a multi-line code snippet (type="multi")
+   * @default false
+   */
+  expanded?: boolean;
+
+  /**
+   * Set to `true` to hide the copy button
+   * @default false
+   */
+  hideCopyButton?: boolean;
+
+  /**
+   * Set to `true` for the disabled variant.
+   * Only applies to the "single", "multi" types
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Set to `true` to wrap the text.
+   *
+   * NOTE: this prop only works with the `type="multi"` variant
+   * @default false
+   */
+  wrapText?: boolean;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @default false
+   */
+  light?: boolean;
+
+  /**
+   * Set to `true` to display the skeleton state
+   * @default false
+   */
+  skeleton?: boolean;
+
+  /**
+   * Specify the ARIA label for the copy button icon
+   * @default undefined
+   */
+  copyButtonDescription?: string;
+
+  /**
+   * Specify the ARIA label of the copy button
+   * @default undefined
+   */
+  copyLabel?: string;
+
+  /**
+   * Specify the feedback text displayed when clicking the snippet
+   * @default "Copied!"
+   */
+  feedback?: string;
+
+  /**
+   * Set the timeout duration (ms) to display feedback text
+   * @default 2000
+   */
+  feedbackTimeout?: number;
+
+  /**
+   * Specify the show less text.
+   *
+   * NOTE: this prop only works with the `type="multi"` variant
+   * @default "Show less"
+   */
+  showLessText?: string;
+
+  /**
+   * Specify the show more text
+   *
+   * NOTE: this prop only works with the `type="multi"` variant
+   * @default "Show more"
+   */
+  showMoreText?: string;
+
+  /**
+   * Set to `false` to hide the show more/less button
+   *
+   * NOTE: this prop only works with the `type="multi"` variant
+   * @default true
+   */
+  showMoreLess?: boolean;
+
+  /**
+   * Set an id for the code element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Obtain a reference to the pre HTML element
+   * @default null
+   */
+  ref?: null | HTMLPreElement;
+};
+
+export default class CodeSnippet extends SvelteComponentTyped<
+  CodeSnippetProps,
+  {
+    expand: CustomEvent<null>;
+    collapse: CustomEvent<null>;
+    copy: CustomEvent<null>;
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+    animationend: WindowEventMap["animationend"];
+  },
+  { default: {} }
+> {}

package/types/CodeSnippet/CodeSnippetSkeleton.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 the type of code snippet
+   * @default "single"
+   */
+  type?: "single" | "multi";
+
+  [key: `data-${string}`]: any;
+};
+
+export type CodeSnippetSkeletonProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class CodeSnippetSkeleton extends SvelteComponentTyped<
+  CodeSnippetSkeletonProps,
+  {
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  {}
+> {}

package/types/ComboBox/ComboBox.svelte.d.ts

@@ -0,0 +1,189 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+export type ComboBoxItemId = any;
+
+export interface ComboBoxItem {
+  id: ComboBoxItemId;
+  text: string;
+  disabled?: boolean;
+}
+
+type $RestProps = SvelteHTMLElements["input"];
+
+type $Props = {
+  /**
+   * Set the combobox items
+   * @default []
+   */
+  items?: ReadonlyArray<ComboBoxItem>;
+
+  /**
+   * Override the display of a combobox item
+   * @default (item) => item.text || item.id
+   */
+  itemToString?: (item: ComboBoxItem) => string;
+
+  /**
+   * Set the selected item by value id
+   * @default undefined
+   */
+  selectedId?: ComboBoxItemId;
+
+  /**
+   * Specify the selected combobox value
+   * @default ""
+   */
+  value?: string;
+
+  /**
+   * Specify the direction of the combobox dropdown menu
+   * @default "bottom"
+   */
+  direction?: "bottom" | "top";
+
+  /**
+   * Set the size of the combobox
+   * @default undefined
+   */
+  size?: "sm" | "xl";
+
+  /**
+   * Set to `true` to disable the combobox
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify the title text of the combobox
+   * @default ""
+   */
+  titleText?: string;
+
+  /**
+   * Set to `true` to visually hide the label text
+   * @default false
+   */
+  hideLabel?: boolean;
+
+  /**
+   * Specify the placeholder text
+   * @default ""
+   */
+  placeholder?: string;
+
+  /**
+   * Specify the helper text
+   * @default ""
+   */
+  helperText?: string;
+
+  /**
+   * Specify the invalid state text
+   * @default ""
+   */
+  invalidText?: string;
+
+  /**
+   * Set to `true` to indicate an invalid state
+   * @default false
+   */
+  invalid?: boolean;
+
+  /**
+   * Set to `true` to indicate an warning state
+   * @default false
+   */
+  warn?: boolean;
+
+  /**
+   * Specify the warning state text
+   * @default ""
+   */
+  warnText?: string;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @default false
+   */
+  light?: boolean;
+
+  /**
+   * Set to `true` to open the combobox menu dropdown
+   * @default false
+   */
+  open?: boolean;
+
+  /**
+   * Determine if an item should be filtered given the current combobox value
+   * @default () => true
+   */
+  shouldFilterItem?: (item: ComboBoxItem, value: string) => boolean;
+
+  /**
+   * Override the chevron icon label based on the open state.
+   * Defaults to "Open menu" when closed and "Close menu" when open
+   * @default undefined
+   */
+  translateWithId?: (
+    id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId,
+  ) => string;
+
+  /**
+   * Override the label of the clear button when the input has a selection.
+   * Defaults to "Clear selected item" since a combo box can only have on selection.
+   * @default undefined
+   */
+  translateWithIdSelection?: (id: "clearSelection") => string;
+
+  /**
+   * Set an id for the list box component
+   * @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;
+
+  /**
+   * Obtain a reference to the list HTML element
+   * @default null
+   */
+  listRef?: null | HTMLDivElement;
+
+  [key: `data-${string}`]: any;
+};
+
+export type ComboBoxProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class ComboBox extends SvelteComponentTyped<
+  ComboBoxProps,
+  {
+    select: CustomEvent<{
+      selectedId: ComboBoxItemId;
+      selectedItem: ComboBoxItem;
+    }>;
+    clear: CustomEvent<KeyboardEvent | MouseEvent>;
+    keydown: WindowEventMap["keydown"];
+    keyup: WindowEventMap["keyup"];
+    focus: WindowEventMap["focus"];
+    blur: WindowEventMap["blur"];
+    paste: WindowEventMap["paste"];
+    scroll: WindowEventMap["scroll"];
+  },
+  { default: { item: ComboBoxItem; index: number }; titleText: {} }
+> {
+  /**
+   * Clear the combo box programmatically
+   */
+  clear: (options?: { focus?: boolean }) => void;
+}

package/types/ComposedModal/ComposedModal.svelte.d.ts

@@ -0,0 +1,69 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["div"];
+
+type $Props = {
+  /**
+   * Set the size of the composed modal
+   * @default undefined
+   */
+  size?: "xs" | "sm" | "lg";
+
+  /**
+   * Set to `true` to open the modal
+   * @default false
+   */
+  open?: boolean;
+
+  /**
+   * Set to `true` to use the danger variant
+   * @default false
+   */
+  danger?: boolean;
+
+  /**
+   * Set to `true` to prevent the modal from closing when clicking outside
+   * @default false
+   */
+  preventCloseOnClickOutside?: boolean;
+
+  /**
+   * Specify a class for the inner modal
+   * @default ""
+   */
+  containerClass?: string;
+
+  /**
+   * Specify a selector to be focused when opening the modal
+   * @default "[data-modal-primary-focus]"
+   */
+  selectorPrimaryFocus?: null | string;
+
+  /**
+   * Obtain a reference to the top-level HTML element
+   * @default null
+   */
+  ref?: null | HTMLDivElement;
+
+  [key: `data-${string}`]: any;
+};
+
+export type ComposedModalProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class ComposedModal extends SvelteComponentTyped<
+  ComposedModalProps,
+  {
+    transitionend: CustomEvent<{ open: boolean }>;
+    keydown: WindowEventMap["keydown"];
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+    submit: CustomEvent<null>;
+    ["click:button--primary"]: CustomEvent<null>;
+    close: CustomEvent<null>;
+    open: CustomEvent<null>;
+  },
+  { default: {} }
+> {}

package/types/ComposedModal/ModalBody.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 to `true` if the modal contains form elements
+   * @default false
+   */
+  hasForm?: boolean;
+
+  /**
+   * Set to `true` if the modal contains scrolling content
+   * @default false
+   */
+  hasScrollingContent?: boolean;
+
+  [key: `data-${string}`]: any;
+};
+
+export type ModalBodyProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class ModalBody extends SvelteComponentTyped<
+  ModalBodyProps,
+  Record<string, any>,
+  { default: {} }
+> {}

package/types/ComposedModal/ModalFooter.svelte.d.ts

@@ -0,0 +1,65 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["div"];
+
+type $Props = {
+  /**
+   * Specify the primary button text
+   * @default ""
+   */
+  primaryButtonText?: string;
+
+  /**
+   * Specify the primary button icon
+   * @default undefined
+   */
+  primaryButtonIcon?: any;
+
+  /**
+   * Set to `true` to disable the primary button
+   * @default false
+   */
+  primaryButtonDisabled?: boolean;
+
+  /**
+   * Specify a class for the primary button
+   * @default undefined
+   */
+  primaryClass?: string;
+
+  /**
+   * Specify the secondary button text
+   * @default ""
+   */
+  secondaryButtonText?: string;
+
+  /**
+   * 2-tuple prop to render two secondary buttons for a 3 button modal
+   * supersedes `secondaryButtonText`
+   * @default []
+   */
+  secondaryButtons?: [{ text: string }, { text: string }];
+
+  /**
+   * Specify a class for the secondary button
+   * @default undefined
+   */
+  secondaryClass?: string;
+
+  /**
+   * Set to `true` to use the danger variant
+   * @default false
+   */
+  danger?: boolean;
+
+  [key: `data-${string}`]: any;
+};
+
+export type ModalFooterProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class ModalFooter extends SvelteComponentTyped<
+  ModalFooterProps,
+  { ["click:button--secondary"]: CustomEvent<{ text: string }> },
+  { default: {} }
+> {}

package/types/ComposedModal/ModalHeader.svelte.d.ts

@@ -0,0 +1,58 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["div"];
+
+type $Props = {
+  /**
+   * Specify the modal title
+   * @default ""
+   */
+  title?: string;
+
+  /**
+   * Specify the modal label
+   * @default ""
+   */
+  label?: string;
+
+  /**
+   * Specify the label class
+   * @default ""
+   */
+  labelClass?: string;
+
+  /**
+   * Specify the title class
+   * @default ""
+   */
+  titleClass?: string;
+
+  /**
+   * Specify the close class
+   * @default ""
+   */
+  closeClass?: string;
+
+  /**
+   * Specify the close icon class
+   * @default ""
+   */
+  closeIconClass?: string;
+
+  /**
+   * Specify the ARIA label for the close icon
+   * @default "Close"
+   */
+  iconDescription?: string;
+
+  [key: `data-${string}`]: any;
+};
+
+export type ModalHeaderProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class ModalHeader extends SvelteComponentTyped<
+  ModalHeaderProps,
+  { click: WindowEventMap["click"] },
+  { default: {} }
+> {}

package/types/ContentSwitcher/ContentSwitcher.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["div"];
+
+type $Props = {
+  /**
+   * Set the selected index of the switch item
+   * @default 0
+   */
+  selectedIndex?: number;
+
+  /**
+   * Specify the size of the content switcher
+   * @default undefined
+   */
+  size?: "sm" | "xl";
+
+  [key: `data-${string}`]: any;
+};
+
+export type ContentSwitcherProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class ContentSwitcher extends SvelteComponentTyped<
+  ContentSwitcherProps,
+  {
+    change: CustomEvent<number>;
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  { default: {} }
+> {}

package/types/ContentSwitcher/Switch.svelte.d.ts

@@ -0,0 +1,53 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["button"];
+
+type $Props = {
+  /**
+   * Specify the switch text.
+   * Alternatively, use the "text" slot  (e.g., `<span slot="text">...</span>`)
+   * @default "Provide text"
+   */
+  text?: string;
+
+  /**
+   * Set to `true` for the switch to be selected
+   * @default false
+   */
+  selected?: boolean;
+
+  /**
+   * Set to `true` to disable the switch
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Set an id for the button element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Obtain a reference to the button HTML element
+   * @default null
+   */
+  ref?: null | HTMLButtonElement;
+
+  [key: `data-${string}`]: any;
+};
+
+export type SwitchProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class Switch extends SvelteComponentTyped<
+  SwitchProps,
+  {
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+    keydown: WindowEventMap["keydown"];
+  },
+  { default: {} }
+> {}