@ifloppy/maxcraftmc-ui-svelte 0.1.0

package/types/Modal/Modal.svelte.d.ts

@@ -0,0 +1,156 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["div"];
+
+type $Props = {
+  /**
+   * Set the size of the 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 enable alert mode
+   * @default false
+   */
+  alert?: boolean;
+
+  /**
+   * Set to `true` to use the passive variant
+   * @default false
+   */
+  passiveModal?: boolean;
+
+  /**
+   * Specify the modal heading
+   * @default undefined
+   */
+  modalHeading?: string;
+
+  /**
+   * Specify the modal label
+   * @default undefined
+   */
+  modalLabel?: string;
+
+  /**
+   * Specify the ARIA label for the modal
+   * @default undefined
+   */
+  modalAriaLabel?: string;
+
+  /**
+   * Specify the ARIA label for the close icon
+   * @default "Close the modal"
+   */
+  iconDescription?: string;
+
+  /**
+   * 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;
+
+  /**
+   * Specify the primary button text
+   * @default ""
+   */
+  primaryButtonText?: string;
+
+  /**
+   * Set to `true` to disable the primary button
+   * @default false
+   */
+  primaryButtonDisabled?: boolean;
+
+  /**
+   * Specify the primary button icon
+   * @default undefined
+   */
+  primaryButtonIcon?: any;
+
+  /**
+   * Set to `true` for the "submit" and "click:button--primary" events
+   * to be dispatched when pressing "Enter"
+   * @default true
+   */
+  shouldSubmitOnEnter?: boolean;
+
+  /**
+   * 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 selector to be focused when opening the modal
+   * @default "[data-modal-primary-focus]"
+   */
+  selectorPrimaryFocus?: string;
+
+  /**
+   * Set to `true` to prevent the modal from closing when clicking outside
+   * @default false
+   */
+  preventCloseOnClickOutside?: boolean;
+
+  /**
+   * 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 ModalProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class Modal extends SvelteComponentTyped<
+  ModalProps,
+  {
+    transitionend: CustomEvent<{ open: boolean }>;
+    ["click:button--secondary"]: CustomEvent<{ text: string }>;
+    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: {}; heading: {}; label: {} }
+> {}

package/types/MultiSelect/MultiSelect.svelte.d.ts

@@ -0,0 +1,264 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+export type MultiSelectItemId = any;
+
+export type MultiSelectItemText = string;
+
+export interface MultiSelectItem {
+  id: MultiSelectItemId;
+  text: MultiSelectItemText;
+  disabled?: boolean;
+}
+
+type $RestProps = SvelteHTMLElements["input"];
+
+type $Props = {
+  /**
+   * Set the multiselect items
+   * @default []
+   */
+  items?: ReadonlyArray<MultiSelectItem>;
+
+  /**
+   * Override the display of a multiselect item
+   * @default (item) => item.text || item.id
+   */
+  itemToString?: (item: MultiSelectItem) => any;
+
+  /**
+   * Override the item name, title, labelText, or value passed to the user-selectable checkbox input as well as the hidden inputs.
+   * @default (item) => {}
+   */
+  itemToInput?: (item: MultiSelectItem) => {
+    name?: string;
+    labelText?: any;
+    title?: string;
+    value?: string;
+  };
+
+  /**
+   * Set the selected ids
+   * @default []
+   */
+  selectedIds?: ReadonlyArray<MultiSelectItemId>;
+
+  /**
+   * Specify the multiselect value
+   * @default ""
+   */
+  value?: string;
+
+  /**
+   * Set the size of the combobox
+   * @default undefined
+   */
+  size?: "sm" | "lg" | "xl";
+
+  /**
+   * Specify the type of multiselect
+   * @default "default"
+   */
+  type?: "default" | "inline";
+
+  /**
+   * Specify the direction of the multiselect dropdown menu
+   * @default "bottom"
+   */
+  direction?: "bottom" | "top";
+
+  /**
+   * Specify the selection feedback after selecting items
+   * @default "top-after-reopen"
+   */
+  selectionFeedback?: "top" | "fixed" | "top-after-reopen";
+
+  /**
+   * Set to `true` to disable the dropdown
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Set to `true` to filter items
+   * @default false
+   */
+  filterable?: boolean;
+
+  /**
+   * Override the filtering logic
+   * The default filtering is an exact string comparison
+   * @default (item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase())
+   */
+  filterItem?: (item: MultiSelectItem, value: string) => boolean;
+
+  /**
+   * Set to `true` to open the dropdown
+   * @default false
+   */
+  open?: boolean;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @default false
+   */
+  light?: boolean;
+
+  /**
+   * Specify the locale
+   * @default "en"
+   */
+  locale?: string;
+
+  /**
+   * Specify the placeholder text
+   * @default ""
+   */
+  placeholder?: string;
+
+  /**
+   * Override the sorting logic
+   * The default sorting compare the item text value
+   * @default (a, b) => a.text.localeCompare(b.text, locale, { numeric: true })
+   */
+  sortItem?:
+    | ((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem)
+    | (() => void);
+
+  /**
+   * 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" and "Clear all items" if more than one item is selected
+   * @default undefined
+   */
+  translateWithIdSelection?: (
+    id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId,
+  ) => string;
+
+  /**
+   * Specify the title text
+   * @default ""
+   */
+  titleText?: string;
+
+  /**
+   * Set to `true` to pass the item to `itemToString` in the checkbox
+   * @default false
+   */
+  useTitleInItem?: 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;
+
+  /**
+   * Specify the helper text
+   * @default ""
+   */
+  helperText?: string;
+
+  /**
+   * Specify the list box label
+   * @default ""
+   */
+  label?: string;
+
+  /**
+   * Set to `true` to visually hide the label text
+   * @default false
+   */
+  hideLabel?: boolean;
+
+  /**
+   * Set an id for the list box component
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Specify a name attribute for the select
+   * @default undefined
+   */
+  name?: string;
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @default null
+   */
+  inputRef?: null | HTMLInputElement;
+
+  /**
+   * Obtain a reference to the outer div element
+   * @default null
+   */
+  multiSelectRef?: null | HTMLDivElement;
+
+  /**
+   * Obtain a reference to the field box element
+   * @default null
+   */
+  fieldRef?: null | HTMLDivElement;
+
+  /**
+   * Obtain a reference to the selection element
+   * @default null
+   */
+  selectionRef?: null | HTMLDivElement;
+
+  /**
+   * Id of the highlighted ListBoxMenuItem
+   * @default null
+   */
+  highlightedId?: null | MultiSelectItemId;
+
+  [key: `data-${string}`]: any;
+};
+
+export type MultiSelectProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class MultiSelect extends SvelteComponentTyped<
+  MultiSelectProps,
+  {
+    select: CustomEvent<{
+      selectedIds: MultiSelectItemId[];
+      selected: MultiSelectItem[];
+      unselected: MultiSelectItem[];
+    }>;
+    clear: CustomEvent<null>;
+    blur: FocusEvent | CustomEvent<FocusEvent>;
+    keydown: WindowEventMap["keydown"];
+    input: WindowEventMap["input"];
+    keyup: WindowEventMap["keyup"];
+    focus: WindowEventMap["focus"];
+    paste: WindowEventMap["paste"];
+  },
+  { default: { item: MultiSelectItem; index: number }; titleText: {} }
+> {}

package/types/Notification/InlineNotification.svelte.d.ts

@@ -0,0 +1,82 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["div"];
+
+type $Props = {
+  /**
+   * Specify the kind of notification
+   * @default "error"
+   */
+  kind?:
+    | "error"
+    | "info"
+    | "info-square"
+    | "success"
+    | "warning"
+    | "warning-alt";
+
+  /**
+   * Set to `true` to use the low contrast variant
+   * @default false
+   */
+  lowContrast?: boolean;
+
+  /**
+   * Set the timeout duration (ms) to hide the notification after opening it
+   * @default 0
+   */
+  timeout?: number;
+
+  /**
+   * Set the `role` attribute
+   * @default "alert"
+   */
+  role?: string;
+
+  /**
+   * Specify the title text
+   * @default ""
+   */
+  title?: string;
+
+  /**
+   * Specify the subtitle text
+   * @default ""
+   */
+  subtitle?: string;
+
+  /**
+   * Set to `true` to hide the close button
+   * @default false
+   */
+  hideCloseButton?: boolean;
+
+  /**
+   * Specify the ARIA label for the status icon
+   * @default kind + " icon"
+   */
+  statusIconDescription?: string;
+
+  /**
+   * Specify the ARIA label for the close button
+   * @default "Close notification"
+   */
+  closeButtonDescription?: string;
+
+  [key: `data-${string}`]: any;
+};
+
+export type InlineNotificationProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class InlineNotification extends SvelteComponentTyped<
+  InlineNotificationProps,
+  {
+    close: CustomEvent<{ timeout: boolean }>;
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  { default: {}; actions: {}; subtitle: {}; title: {} }
+> {}

package/types/Notification/NotificationActionButton.svelte.d.ts

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

package/types/Notification/NotificationButton.svelte.d.ts

@@ -0,0 +1,45 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["button"];
+
+type $Props = {
+  /**
+   * Set the type of notification
+   * @default "toast"
+   */
+  notificationType?: "toast" | "inline";
+
+  /**
+   * Specify the icon to render
+   * @default undefined
+   */
+  icon?: any;
+
+  /**
+   * Specify the title of the icon
+   * @default undefined
+   */
+  title?: string;
+
+  /**
+   * Specify the ARIA label for the icon
+   * @default "Close icon"
+   */
+  iconDescription?: string;
+
+  [key: `data-${string}`]: any;
+};
+
+export type NotificationButtonProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class NotificationButton extends SvelteComponentTyped<
+  NotificationButtonProps,
+  {
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  {}
+> {}

package/types/Notification/NotificationIcon.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { SvelteComponentTyped } from "svelte";
+
+export type NotificationIconProps = {
+  /**
+   * Specify the kind of notification icon
+   * @default "error"
+   */
+  kind?:
+    | "error"
+    | "info"
+    | "info-square"
+    | "success"
+    | "warning"
+    | "warning-alt";
+
+  /**
+   * Set the type of notification
+   * @default "toast"
+   */
+  notificationType?: "toast" | "inline";
+
+  /**
+   * Specify the ARIA label for the icon
+   * @default undefined
+   */
+  iconDescription: undefined;
+};
+
+export default class NotificationIcon extends SvelteComponentTyped<
+  NotificationIconProps,
+  Record<string, any>,
+  {}
+> {}

package/types/Notification/ToastNotification.svelte.d.ts

@@ -0,0 +1,95 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["div"];
+
+type $Props = {
+  /**
+   * Specify the kind of notification
+   * @default "error"
+   */
+  kind?:
+    | "error"
+    | "info"
+    | "info-square"
+    | "success"
+    | "warning"
+    | "warning-alt";
+
+  /**
+   * Set to `true` to use the low contrast variant
+   * @default false
+   */
+  lowContrast?: boolean;
+
+  /**
+   * Set the timeout duration (ms) to hide the notification after opening it
+   * @default 0
+   */
+  timeout?: number;
+
+  /**
+   * Set the `role` attribute
+   * @default "alert"
+   */
+  role?: string;
+
+  /**
+   * Specify the title text
+   * @default ""
+   */
+  title?: string;
+
+  /**
+   * Specify the subtitle text
+   * @default ""
+   */
+  subtitle?: string;
+
+  /**
+   * Specify the caption text
+   * @default ""
+   */
+  caption?: string;
+
+  /**
+   * Specify the ARIA label for the status icon
+   * @default kind + " icon"
+   */
+  statusIconDescription?: string;
+
+  /**
+   * Specify the ARIA label for the close button
+   * @default "Close notification"
+   */
+  closeButtonDescription?: string;
+
+  /**
+   * Set to `true` to hide the close button
+   * @default false
+   */
+  hideCloseButton?: boolean;
+
+  /**
+   * Set to `true` for the notification to span
+   * the full width of its containing element.
+   * @default false
+   */
+  fullWidth?: boolean;
+
+  [key: `data-${string}`]: any;
+};
+
+export type ToastNotificationProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class ToastNotification extends SvelteComponentTyped<
+  ToastNotificationProps,
+  {
+    close: CustomEvent<{ timeout: boolean }>;
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  { default: {}; caption: {}; subtitle: {}; title: {} }
+> {}