@ifloppy/maxcraftmc-ui-svelte 0.1.0

package/types/Theme/Theme.svelte.d.ts

@@ -0,0 +1,58 @@
+import type { SvelteComponentTyped } from "svelte";
+
+export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
+
+export type ThemeProps = {
+  /**
+   * Set the current Carbon theme
+   * @default "white"
+   */
+  theme?: CarbonTheme;
+
+  /**
+   * Customize a theme with your own tokens
+   * @see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme
+   * @default {}
+   */
+  tokens?: { [token: string]: any };
+
+  /**
+   * Set to `true` to persist the theme using window.localStorage
+   * @default false
+   */
+  persist?: boolean;
+
+  /**
+   * Specify the local storage key
+   * @default "theme"
+   */
+  persistKey?: string;
+
+  /**
+   * Render a toggle or select dropdown to control the theme
+   * @default undefined
+   */
+  render?: "toggle" | "select";
+
+  /**
+   * Override the default toggle props
+   * @default { themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, }
+   */
+  toggle?: import("../Toggle/Toggle.svelte").ToggleProps & {
+    themes?: [labelA: CarbonTheme, labelB: CarbonTheme];
+  };
+
+  /**
+   * Override the default select props
+   * @default { themes: themeKeys, labelText: "Themes", hideLabel: false, }
+   */
+  select?: import("../Select/Select.svelte").SelectProps & {
+    themes?: CarbonTheme[];
+  };
+};
+
+export default class Theme extends SvelteComponentTyped<
+  ThemeProps,
+  { update: CustomEvent<{ theme: CarbonTheme }> },
+  { default: { theme: CarbonTheme } }
+> {}

package/types/Tile/ClickableTile.svelte.d.ts

@@ -0,0 +1,46 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["a"] & SvelteHTMLElements["p"];
+
+type $Props = {
+  /**
+   * Set to `true` to click the tile
+   * @default false
+   */
+  clicked?: boolean;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @default false
+   */
+  light?: boolean;
+
+  /**
+   * Set to `true` to disable the tile
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Set the `href`
+   * @default undefined
+   */
+  href?: string;
+
+  [key: `data-${string}`]: any;
+};
+
+export type ClickableTileProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class ClickableTile extends SvelteComponentTyped<
+  ClickableTileProps,
+  {
+    click: WindowEventMap["click"];
+    keydown: WindowEventMap["keydown"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  { default: {} }
+> {}

package/types/Tile/ExpandableTile.svelte.d.ts

@@ -0,0 +1,88 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["button"];
+
+type $Props = {
+  /**
+   * Set to `true` to expand the tile
+   * @default false
+   */
+  expanded?: boolean;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @default false
+   */
+  light?: boolean;
+
+  /**
+   * Specify the max height of the tile  (number of pixels)
+   * @default 0
+   */
+  tileMaxHeight?: number;
+
+  /**
+   * Specify the padding of the tile (number of pixels)
+   * @default 0
+   */
+  tilePadding?: number;
+
+  /**
+   * Specify the icon text of the collapsed tile
+   * @default "Interact to expand Tile"
+   */
+  tileCollapsedIconText?: string;
+
+  /**
+   * Specify the icon text of the expanded tile
+   * @default "Interact to collapse Tile"
+   */
+  tileExpandedIconText?: string;
+
+  /**
+   * Specify the icon label of the expanded tile
+   * @default ""
+   */
+  tileExpandedLabel?: string;
+
+  /**
+   * Specify the icon label of the collapsed tile
+   * @default ""
+   */
+  tileCollapsedLabel?: string;
+
+  /**
+   * Specify the tabindex
+   * @default "0"
+   */
+  tabindex?: string;
+
+  /**
+   * Set an id for the top-level div element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Obtain a reference to the top-level element
+   * @default null
+   */
+  ref?: null | HTMLButtonElement;
+
+  [key: `data-${string}`]: any;
+};
+
+export type ExpandableTileProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class ExpandableTile extends SvelteComponentTyped<
+  ExpandableTileProps,
+  {
+    click: WindowEventMap["click"];
+    keypress: WindowEventMap["keypress"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  { above: {}; below: {} }
+> {}

package/types/Tile/RadioTile.svelte.d.ts

@@ -0,0 +1,77 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["label"];
+
+type $Props = {
+  /**
+   * Set to `true` to check the tile
+   * @default false
+   */
+  checked?: boolean;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @default false
+   */
+  light?: boolean;
+
+  /**
+   * Set to `true` to disable the tile
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Set to `true` to mark the field as required
+   * @default false
+   */
+  required?: boolean;
+
+  /**
+   * Specify the value of the radio input
+   * @default ""
+   */
+  value?: string;
+
+  /**
+   * Specify the tabindex
+   * @default "0"
+   */
+  tabindex?: string;
+
+  /**
+   * Specify the ARIA label for the radio tile checkmark icon
+   * @default "Tile checkmark"
+   */
+  iconDescription?: string;
+
+  /**
+   * Set an id for the input element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Specify a name attribute for the radio tile input
+   * @default undefined
+   */
+  name?: string;
+
+  [key: `data-${string}`]: any;
+};
+
+export type RadioTileProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class RadioTile extends SvelteComponentTyped<
+  RadioTileProps,
+  {
+    change: WindowEventMap["change"];
+    keydown: WindowEventMap["keydown"];
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  { default: {} }
+> {}

package/types/Tile/SelectableTile.svelte.d.ts

@@ -0,0 +1,84 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["label"];
+
+type $Props = {
+  /**
+   * Set to `true` to select the tile
+   * @default false
+   */
+  selected?: boolean;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @default false
+   */
+  light?: boolean;
+
+  /**
+   * Set to `true` to disable the tile
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify the title of the selectable tile
+   * @default "title"
+   */
+  title?: string;
+
+  /**
+   * Specify the value of the selectable tile
+   * @default "value"
+   */
+  value?: string;
+
+  /**
+   * Specify the tabindex
+   * @default "0"
+   */
+  tabindex?: string;
+
+  /**
+   * Specify the ARIA label for the selectable tile checkmark icon
+   * @default "Tile checkmark"
+   */
+  iconDescription?: string;
+
+  /**
+   * Set an id for the input element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Specify a name attribute for the input
+   * @default ""
+   */
+  name?: string;
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @default null
+   */
+  ref?: null | HTMLInputElement;
+
+  [key: `data-${string}`]: any;
+};
+
+export type SelectableTileProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class SelectableTile extends SvelteComponentTyped<
+  SelectableTileProps,
+  {
+    select: CustomEvent<string>;
+    deselect: CustomEvent<string>;
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+    keydown: WindowEventMap["keydown"];
+  },
+  { default: {} }
+> {}

package/types/Tile/Tile.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 enable the light variant
+   * @default false
+   */
+  light?: boolean;
+
+  [key: `data-${string}`]: any;
+};
+
+export type TileProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class Tile extends SvelteComponentTyped<
+  TileProps,
+  {
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  { default: {} }
+> {}

package/types/Tile/TileGroup.svelte.d.ts

@@ -0,0 +1,46 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["fieldset"];
+
+type $Props = {
+  /**
+   * Specify the selected tile value
+   * @default undefined
+   */
+  selected?: string;
+
+  /**
+   * Set to `true` to disable the tile group
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Set to `true` to require the selection of a radio button
+   * @default undefined
+   */
+  required?: boolean;
+
+  /**
+   * Specify a name attribute for the radio button inputs
+   * @default undefined
+   */
+  name?: string;
+
+  /**
+   * Specify the legend text
+   * @default ""
+   */
+  legend?: string;
+
+  [key: `data-${string}`]: any;
+};
+
+export type TileGroupProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class TileGroup extends SvelteComponentTyped<
+  TileGroupProps,
+  { select: CustomEvent<string> },
+  { default: {} }
+> {}

package/types/TimePicker/TimePicker.svelte.d.ts

@@ -0,0 +1,112 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["input"];
+
+type $Props = {
+  /**
+   * Specify the size of the input
+   * @default undefined
+   */
+  size?: "sm" | "xl";
+
+  /**
+   * Specify the input value
+   * @default ""
+   */
+  value?: string;
+
+  /**
+   * Specify the input placeholder text
+   * @default "hh:mm"
+   */
+  placeholder?: string;
+
+  /**
+   * Specify the `pattern` attribute for the input element
+   * @default "(1[012]|[1-9]):[0-5][0-9](\\s)?"
+   */
+  pattern?: string;
+
+  /**
+   * Specify the `maxlength` input attribute
+   * @default 5
+   */
+  maxlength?: number;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @default false
+   */
+  light?: boolean;
+
+  /**
+   * Set to `true` to disable the input
+   * @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 to `true` to indicate an invalid state
+   * @default false
+   */
+  invalid?: boolean;
+
+  /**
+   * Specify the invalid state text
+   * @default ""
+   */
+  invalidText?: 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 TimePickerProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class TimePicker extends SvelteComponentTyped<
+  TimePickerProps,
+  {
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+    change: WindowEventMap["change"];
+    input: WindowEventMap["input"];
+    keydown: WindowEventMap["keydown"];
+    keyup: WindowEventMap["keyup"];
+    focus: WindowEventMap["focus"];
+    blur: WindowEventMap["blur"];
+    paste: WindowEventMap["paste"];
+  },
+  { default: {}; labelText: {} }
+> {}

package/types/TimePicker/TimePickerSelect.svelte.d.ts

@@ -0,0 +1,63 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["div"];
+
+type $Props = {
+  /**
+   * Specify the select value
+   * @default ""
+   */
+  value?: number | string;
+
+  /**
+   * Set to `true` to disable the select
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify the ARIA label for the chevron icon
+   * @default "Open list of options"
+   */
+  iconDescription?: string;
+
+  /**
+   * Specify the label text
+   * @default ""
+   */
+  labelText?: string;
+
+  /**
+   * Set an id for the select element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Specify a name attribute for the select element
+   * @default undefined
+   */
+  name?: string;
+
+  /**
+   * Obtain a reference to the select HTML element
+   * @default null
+   */
+  ref?: null | HTMLSelectElement;
+
+  [key: `data-${string}`]: any;
+};
+
+export type TimePickerSelectProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class TimePickerSelect extends SvelteComponentTyped<
+  TimePickerSelectProps,
+  {
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  { default: {}; labelText: {} }
+> {}

package/types/Toggle/Toggle.svelte.d.ts

@@ -0,0 +1,80 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["div"];
+
+type $Props = {
+  /**
+   * Specify the toggle size
+   * @default "default"
+   */
+  size?: "default" | "sm";
+
+  /**
+   * Set to `true` to toggle the checkbox input
+   * @default false
+   */
+  toggled?: boolean;
+
+  /**
+   * Set to `true` to disable checkbox input
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify the label for the untoggled state
+   * @default "Off"
+   */
+  labelA?: string;
+
+  /**
+   * Specify the label for the toggled state
+   * @default "On"
+   */
+  labelB?: string;
+
+  /**
+   * Specify the label text
+   * @default ""
+   */
+  labelText?: string;
+
+  /**
+   * Set to `true` to visually hide the label text
+   * @default false
+   */
+  hideLabel?: boolean;
+
+  /**
+   * Set an id for the input element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Specify a name attribute for the checkbox input
+   * @default undefined
+   */
+  name?: string;
+
+  [key: `data-${string}`]: any;
+};
+
+export type ToggleProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class Toggle extends SvelteComponentTyped<
+  ToggleProps,
+  {
+    toggle: CustomEvent<{ toggled: boolean }>;
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+    change: WindowEventMap["change"];
+    keyup: WindowEventMap["keyup"];
+    focus: WindowEventMap["focus"];
+    blur: WindowEventMap["blur"];
+  },
+  { labelA: {}; labelB: {}; labelText: {} }
+> {}