@ifloppy/maxcraftmc-ui-svelte 0.1.0

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

@@ -0,0 +1,39 @@
+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";
+
+  /**
+   * Specify the label text
+   * @default ""
+   */
+  labelText?: string;
+
+  /**
+   * Set an id for the input element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  [key: `data-${string}`]: any;
+};
+
+export type ToggleSkeletonProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class ToggleSkeleton extends SvelteComponentTyped<
+  ToggleSkeletonProps,
+  {
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  { labelText: {} }
+> {}

package/types/Tooltip/Tooltip.svelte.d.ts

@@ -0,0 +1,106 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["div"];
+
+type $Props = {
+  /**
+   * Set the alignment of the tooltip relative to the icon
+   * @default "center"
+   */
+  align?: "start" | "center" | "end";
+
+  /**
+   * Set the direction of the tooltip relative to the button
+   * @default "bottom"
+   */
+  direction?: "top" | "right" | "bottom" | "left";
+
+  /**
+   * Set to `true` to open the tooltip
+   * @default false
+   */
+  open?: boolean;
+
+  /**
+   * Set to `true` to hide the tooltip icon
+   * @default false
+   */
+  hideIcon?: boolean;
+
+  /**
+   * Specify the icon to render for the tooltip button.
+   * Default to `<Information />`
+   * @default undefined
+   */
+  icon?: any;
+
+  /**
+   * Specify the ARIA label for the tooltip button
+   * @default ""
+   */
+  iconDescription?: string;
+
+  /**
+   * Specify the icon name attribute
+   * @default ""
+   */
+  iconName?: string;
+
+  /**
+   * Set the button tabindex
+   * @default "0"
+   */
+  tabindex?: string;
+
+  /**
+   * Set an id for the tooltip
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  tooltipId?: string;
+
+  /**
+   * Set an id for the tooltip button
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  triggerId?: string;
+
+  /**
+   * Set the tooltip button text
+   * @default ""
+   */
+  triggerText?: string;
+
+  /**
+   * Obtain a reference to the trigger text HTML element
+   * @default null
+   */
+  ref?: null | HTMLDivElement;
+
+  /**
+   * Obtain a reference to the tooltip HTML element
+   * @default null
+   */
+  refTooltip?: null | HTMLDivElement;
+
+  /**
+   * Obtain a reference to the icon HTML element
+   * @default null
+   */
+  refIcon?: null | HTMLDivElement;
+
+  [key: `data-${string}`]: any;
+};
+
+export type TooltipProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class Tooltip extends SvelteComponentTyped<
+  TooltipProps,
+  {
+    open: CustomEvent<null>;
+    close: CustomEvent<null>;
+    click: WindowEventMap["click"];
+    mousedown: WindowEventMap["mousedown"];
+  },
+  { default: {}; icon: {}; triggerText: {} }
+> {}

package/types/Tooltip/TooltipFooter.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { SvelteComponentTyped } from "svelte";
+
+export type TooltipFooterProps = {
+  /**
+   * Specify a selector to be focused inside the footer when opening the tooltip
+   * @default "a[href], button:not([disabled])"
+   */
+  selectorPrimaryFocus?: string;
+};
+
+export default class TooltipFooter extends SvelteComponentTyped<
+  TooltipFooterProps,
+  Record<string, any>,
+  { default: {} }
+> {}

package/types/TooltipDefinition/TooltipDefinition.svelte.d.ts

@@ -0,0 +1,60 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["span"];
+
+type $Props = {
+  /**
+   * Specify the tooltip text
+   * @default ""
+   */
+  tooltipText?: string;
+
+  /**
+   * Set to `true` to open the tooltip
+   * @default false
+   */
+  open?: boolean;
+
+  /**
+   * Set the alignment of the tooltip relative to the icon
+   * @default "center"
+   */
+  align?: "start" | "center" | "end";
+
+  /**
+   * Set the direction of the tooltip relative to the icon
+   * @default "bottom"
+   */
+  direction?: "top" | "bottom";
+
+  /**
+   * Set an id for the tooltip div 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 TooltipDefinitionProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class TooltipDefinition extends SvelteComponentTyped<
+  TooltipDefinitionProps,
+  {
+    open: CustomEvent<null>;
+    close: CustomEvent<null>;
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+    focus: WindowEventMap["focus"];
+  },
+  { default: {}; tooltip: {} }
+> {}

package/types/TooltipIcon/TooltipIcon.svelte.d.ts

@@ -0,0 +1,65 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["button"];
+
+type $Props = {
+  /**
+   * Specify the tooltip text.
+   * Alternatively, use the "tooltipText" slot
+   * @default ""
+   */
+  tooltipText?: string;
+
+  /**
+   * Specify the icon to render
+   * @default undefined
+   */
+  icon?: any;
+
+  /**
+   * Set to `true` to disable the tooltip icon
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Set the alignment of the tooltip relative to the icon
+   * @default "center"
+   */
+  align?: "start" | "center" | "end";
+
+  /**
+   * Set the direction of the tooltip relative to the icon
+   * @default "bottom"
+   */
+  direction?: "top" | "right" | "bottom" | "left";
+
+  /**
+   * Set an id for the span 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 TooltipIconProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class TooltipIcon extends SvelteComponentTyped<
+  TooltipIconProps,
+  {
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+    focus: WindowEventMap["focus"];
+  },
+  { default: {}; tooltipText: {} }
+> {}

package/types/TreeView/TreeView.svelte.d.ts

@@ -0,0 +1,114 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+export type TreeNodeId = string | number;
+
+export interface TreeNode {
+  id: TreeNodeId;
+  text: any;
+  icon?: any;
+  disabled?: boolean;
+  nodes?: TreeNode[];
+}
+
+type $RestProps = SvelteHTMLElements["ul"];
+
+type $Props = {
+  /**
+   * Provide an array of nodes to render
+   * @default []
+   */
+  nodes?: Array<TreeNode>;
+
+  /**
+   * Set the current active node id
+   * Only one node can be active
+   * @default ""
+   */
+  activeId?: TreeNodeId;
+
+  /**
+   * Set the node ids to be selected
+   * @default []
+   */
+  selectedIds?: ReadonlyArray<TreeNodeId>;
+
+  /**
+   * Set the node ids to be expanded
+   * @default []
+   */
+  expandedIds?: ReadonlyArray<TreeNodeId>;
+
+  /**
+   * Specify the TreeView size
+   * @default "default"
+   */
+  size?: "default" | "compact";
+
+  /**
+   * Specify the label text
+   * @default ""
+   */
+  labelText?: string;
+
+  /**
+   * Set to `true` to visually hide the label text
+   * @default false
+   */
+  hideLabel?: boolean;
+
+  [key: `data-${string}`]: any;
+};
+
+export type TreeViewProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class TreeView extends SvelteComponentTyped<
+  TreeViewProps,
+  {
+    select: CustomEvent<TreeNode & { expanded: boolean; leaf: boolean }>;
+    toggle: CustomEvent<TreeNode & { expanded: boolean; leaf: boolean }>;
+    focus: CustomEvent<TreeNode & { expanded: boolean; leaf: boolean }>;
+    keydown: WindowEventMap["keydown"];
+  },
+  {
+    default: {
+      node: {
+        id: TreeNodeId;
+        text: string;
+        expanded: boolean;
+        leaf: boolean;
+        disabled: boolean;
+        selected: boolean;
+      };
+    };
+    labelText: {};
+  }
+> {
+  /**
+   * Programmatically expand all nodes
+   */
+  expandAll: () => void;
+
+  /**
+   * Programmatically collapse all nodes
+   */
+  collapseAll: () => void;
+
+  /**
+   * Programmatically expand a subset of nodes.
+   * Expands all nodes if no argument is provided
+   */
+  expandNodes: (filterId?: (node: TreeNode) => boolean) => void;
+
+  /**
+   * Programmatically collapse a subset of nodes.
+   * Collapses all nodes if no argument is provided
+   */
+  collapseNodes: (filterId?: (node: TreeNode) => boolean) => void;
+
+  /**
+   * Programmatically show a node by `id`.
+   * The matching node will be expanded, selected, and focused
+   */
+  showNode: (id: TreeNodeId) => void;
+}

package/types/TreeView/index.d.ts

@@ -0,0 +1 @@
+export { default as TreeView } from "./TreeView.svelte";

package/types/Truncate/Truncate.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["p"];
+
+type $Props = {
+  /**
+   * @default "end"
+   */
+  clamp?: "end" | "front";
+
+  [key: `data-${string}`]: any;
+};
+
+export type TruncateProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class Truncate extends SvelteComponentTyped<
+  TruncateProps,
+  Record<string, any>,
+  { default: {} }
+> {}

package/types/Truncate/truncate.d.ts

@@ -0,0 +1,12 @@
+interface TruncateOptions {
+  clamp?: "end" | "front";
+}
+
+export function TruncateAction(
+  node: HTMLElement,
+  options?: TruncateOptions,
+): {
+  update: (options?: TruncateOptions) => void;
+};
+
+export default TruncateAction;

package/types/UIShell/Content.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["main"];
+
+type $Props = {
+  /**
+   * Specify the id for the main element
+   * @default "main-content"
+   */
+  id?: string;
+
+  [key: `data-${string}`]: any;
+};
+
+export type ContentProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class Content extends SvelteComponentTyped<
+  ContentProps,
+  Record<string, any>,
+  { default: {} }
+> {}

package/types/UIShell/Header.svelte.d.ts

@@ -0,0 +1,93 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["a"];
+
+type $Props = {
+  /**
+   * Set to `false` to hide the side nav by default
+   * @default true
+   */
+  expandedByDefault?: boolean;
+
+  /**
+   * Set to `true` to open the side nav
+   * @default false
+   */
+  isSideNavOpen?: boolean;
+
+  /**
+   * Specify the ARIA label for the header
+   * @default undefined
+   */
+  uiShellAriaLabel?: string;
+
+  /**
+   * Specify the `href` attribute
+   * @default undefined
+   */
+  href?: string;
+
+  /**
+   * Specify the company name.
+   *
+   * Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`)
+   * @default undefined
+   */
+  company?: string;
+
+  /**
+   * Specify the platform name.
+   * Alternatively, use the named slot "platform" (e.g., `<span slot="platform">...</span>`)
+   * @default ""
+   */
+  platformName?: string;
+
+  /**
+   * Set to `true` to persist the hamburger menu
+   * @default false
+   */
+  persistentHamburgerMenu?: boolean;
+
+  /**
+   * The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.
+   * 1056 represents the "large" breakpoint in pixels from the Carbon Design System:
+   * - small: 320
+   * - medium: 672
+   * - large: 1056
+   * - x-large: 1312
+   * - max: 1584
+   * @default 1056
+   */
+  expansionBreakpoint?: number;
+
+  /**
+   * Obtain a reference to the HTML anchor element
+   * @default null
+   */
+  ref?: null | HTMLAnchorElement;
+
+  /**
+   * Specify the icon to render for the closed state.
+   * Defaults to `<Menu size={20} />`
+   * @default undefined
+   */
+  iconMenu?: any;
+
+  /**
+   * Specify the icon to render for the opened state.
+   * Defaults to `<Close size={20} />`
+   * @default undefined
+   */
+  iconClose?: any;
+
+  [key: `data-${string}`]: any;
+};
+
+export type HeaderProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class Header extends SvelteComponentTyped<
+  HeaderProps,
+  { click: WindowEventMap["click"] },
+  { default: {}; company: {}; platform: {}; ["skip-to-content"]: {} }
+> {}

package/types/UIShell/HeaderAction.svelte.d.ts

@@ -0,0 +1,80 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["button"];
+
+type $Props = {
+  /**
+   * Set to `true` to open the panel
+   * @default false
+   */
+  isOpen?: boolean;
+
+  /**
+   * Specify the icon to render when the action panel is closed.
+   * Defaults to `<Switcher size={20} />`
+   * @default undefined
+   */
+  icon?: any;
+
+  /**
+   * Specify the icon to render when the action panel is open.
+   * Defaults to `<Close size={20} />`
+   * @default undefined
+   */
+  closeIcon?: any;
+
+  /**
+   * Specify the text displayed next to the icon.
+   * Alternatively, use the named slot "text" (e.g., `<div slot="text">...</div>`)
+   * @default undefined
+   */
+  text?: string;
+
+  /**
+   * Specify an icon tooltip. The tooltip will not be displayed
+   * if either the `text` prop or a named slot="text" is used
+   * @default undefined
+   */
+  iconDescription?: string;
+
+  /**
+   * Set the alignment of the tooltip relative to the icon.
+   * Only applies when `iconDescription` is provided
+   * @default "center"
+   */
+  tooltipAlignment?: "start" | "center" | "end";
+
+  /**
+   * Obtain a reference to the button HTML element
+   * @default null
+   */
+  ref?: null | HTMLButtonElement;
+
+  /**
+   * Customize the panel transition (i.e., `transition:slide`).
+   * Set to `false` to disable the transition
+   * @default { duration: 200 }
+   */
+  transition?: false | import("svelte/transition").SlideParams;
+
+  /**
+   * Set to `true` to prevent the panel from closing when clicking outside
+   * @default false
+   */
+  preventCloseOnClickOutside?: boolean;
+
+  [key: `data-${string}`]: any;
+};
+
+export type HeaderActionProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class HeaderAction extends SvelteComponentTyped<
+  HeaderActionProps,
+  {
+    open: CustomEvent<null>;
+    close: CustomEvent<null>;
+    click: WindowEventMap["click"];
+  },
+  { default: {}; closeIcon: {}; icon: {}; text: {} }
+> {}

package/types/UIShell/HeaderActionLink.svelte.d.ts

@@ -0,0 +1,40 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["a"];
+
+type $Props = {
+  /**
+   * Set to `true` to use the active state
+   * @default false
+   */
+  linkIsActive?: boolean;
+
+  /**
+   * Specify the `href` attribute
+   * @default undefined
+   */
+  href?: string;
+
+  /**
+   * Specify the icon to render
+   * @default undefined
+   */
+  icon?: any;
+
+  /**
+   * Obtain a reference to the HTML anchor element
+   * @default null
+   */
+  ref?: null | HTMLAnchorElement;
+
+  [key: `data-${string}`]: any;
+};
+
+export type HeaderActionLinkProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class HeaderActionLink extends SvelteComponentTyped<
+  HeaderActionLinkProps,
+  { click: WindowEventMap["click"] },
+  { icon: {} }
+> {}

package/types/UIShell/HeaderGlobalAction.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { ButtonProps } from "../Button/Button.svelte";
+
+export type HeaderGlobalActionProps = ButtonProps & {
+  /**
+   * Set to `true` to use the active variant
+   * @default false
+   */
+  isActive?: boolean;
+
+  /**
+   * Specify the icon to render
+   * @default undefined
+   */
+  icon?: any;
+
+  /**
+   * Obtain a reference to the HTML button element
+   * @default null
+   */
+  ref?: HTMLButtonElement;
+};
+
+export default class HeaderGlobalAction extends SvelteComponentTyped<
+  HeaderGlobalActionProps,
+  { click: WindowEventMap["click"] },
+  {}
+> {}