@telicent-oss/ds 0.0.1

package/dist/src/components/TeliMenu/TeliBasicMenu.d.ts

@@ -0,0 +1,87 @@
+import React from "react";
+import { PopperPlacementType } from "@mui/base";
+import "./telibasicmenu.css";
+export interface MenuItem {
+    id: string;
+    onClick?: (event?: Event | React.SyntheticEvent) => void;
+    label?: string | React.ReactNode;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+}
+export interface TeliBasicMenuProps {
+    /**
+     * The id of the Button element.
+     */
+    buttonId?: string;
+    /**
+     * The menu contents.
+     */
+    children?: React.ReactNode;
+    /**
+     * If true, the component is initially open. Use when the component open state
+     * is not controlled (i.e. the open prop is not defined).
+     */
+    defaultOpen?: boolean;
+    /** If true, the component will be displayed in a disabled state */
+    disabled?: boolean;
+    /**
+     * The message to be displayed when menu items are empty.
+     */
+    emptyMessage?: string;
+    /**
+     * Element placed after the children.
+     */
+    endIcon?: React.ReactNode;
+    /**
+     * The id of the MenuList component.
+     */
+    listId?: string;
+    /**
+     * The content of the Button component.
+     */
+    label: string | React.ReactNode;
+    /**
+     * Menu content items.
+     */
+    menuItems?: MenuItem[];
+    /**
+     * If true, the menu component will be shown.
+     */
+    open?: boolean;
+    /**
+     * Callback fired when the component requests to be opened. Use it for
+     * controlled mode.
+     */
+    onOpen?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Callback fired when the component requests to be closed. Use it for
+     * controlled mode.
+     */
+    onClose?: (event: MouseEvent | TouchEvent) => void;
+    /**
+     * Element placed before the children.
+     */
+    startIcon?: React.ReactNode;
+    /**
+     * Tooltip contents refer to [Button component](/?path=/docs/components-telibutton--docs).
+     */
+    tooltip?: string;
+    /**
+     * The variant to use.
+     */
+    variant?: "tertiary" | "basic";
+    /**
+     * Width of the menu component.
+     */
+    width?: number;
+    /**
+     * Vertical menu placement.
+     */
+    xPlacement?: PopperPlacementType;
+    /**
+     * Horizontal menu placement.
+     */
+    yPlacement?: PopperPlacementType;
+}
+declare const TeliBasicMenu: React.FC<TeliBasicMenuProps>;
+export default TeliBasicMenu;

package/dist/src/components/TeliMenu/TeliBasicMenu.stories.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import type { StoryObj } from "@storybook/react";
+import { BasicMenu, ControlledBasicMenu, CustomMenuItems, PositionedMenu, WithIcon } from "./stories";
+declare const meta: {
+    component: import("react").FC<import("./TeliBasicMenu").TeliBasicMenuProps>;
+    title: string;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export type TeliBasicMenuStory = StoryObj<typeof meta>;
+export default meta;
+export { BasicMenu, CustomMenuItems, WithIcon, ControlledBasicMenu, PositionedMenu, };

package/dist/src/components/TeliMenu/TeliMenu.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+import { MenuItemProps, MenuProps } from "@mui/material";
+import "./telimenu.css";
+declare const TeliMenu: FC<MenuProps>;
+declare const TeliMenuItem: FC<MenuItemProps>;
+export { TeliMenu, TeliMenuItem };

package/dist/src/components/TeliMenu/TeliMenu.stories.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    component: React.FC<import("@mui/material").MenuProps>;
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const SimpleMenuExample: Story;

package/dist/src/components/TeliMenu/stories/BasicMenu.d.ts

@@ -0,0 +1,3 @@
+import { TeliBasicMenuStory } from "../TeliBasicMenu.stories";
+declare const BasicMenu: TeliBasicMenuStory;
+export default BasicMenu;

package/dist/src/components/TeliMenu/stories/ControlledBasicMenu.d.ts

@@ -0,0 +1,3 @@
+import { TeliBasicMenuStory } from "../TeliBasicMenu.stories";
+declare const ControlledBasicMenu: TeliBasicMenuStory;
+export default ControlledBasicMenu;

package/dist/src/components/TeliMenu/stories/CustomMenuItems.d.ts

@@ -0,0 +1,3 @@
+import { TeliBasicMenuStory } from "../TeliBasicMenu.stories";
+declare const CustomMenuItems: TeliBasicMenuStory;
+export default CustomMenuItems;

package/dist/src/components/TeliMenu/stories/PositionedMenu.d.ts

@@ -0,0 +1,3 @@
+import { TeliBasicMenuStory } from "../TeliBasicMenu.stories";
+declare const PositionedMenu: TeliBasicMenuStory;
+export default PositionedMenu;

package/dist/src/components/TeliMenu/stories/SimpleMenu.d.ts

@@ -0,0 +1,2 @@
+declare const SimpleMenu: () => import("react/jsx-runtime").JSX.Element;
+export default SimpleMenu;

package/dist/src/components/TeliMenu/stories/WithIcon.d.ts

@@ -0,0 +1,3 @@
+import { TeliBasicMenuStory } from "../TeliBasicMenu.stories";
+declare const WithIcon: TeliBasicMenuStory;
+export default WithIcon;

package/dist/src/components/TeliMenu/stories/index.d.ts

@@ -0,0 +1,5 @@
+export { default as BasicMenu } from "./BasicMenu";
+export { default as ControlledBasicMenu } from "./ControlledBasicMenu";
+export { default as CustomMenuItems } from "./CustomMenuItems";
+export { default as PositionedMenu } from "./PositionedMenu";
+export { default as WithIcon } from "./WithIcon";

package/dist/src/components/TeliMenu/stories/menu-items.d.ts

@@ -0,0 +1,10 @@
+declare const MENU_ITEMS: ({
+    id: string;
+    onClick: import("@storybook/addon-actions").HandlerFunction;
+    label: string;
+} | {
+    id: string;
+    label: string;
+    onClick?: undefined;
+})[];
+export default MENU_ITEMS;

package/dist/src/components/TeliSelect/TeliSelect.d.ts

@@ -0,0 +1,129 @@
+import React from "react";
+import { SelectChangeEvent } from "@mui/material";
+import "./teliselect.css";
+import "../TeliTextField/textfield.css";
+import "../TeliMenu/telibasicmenu.css";
+type TeliSelectOption = {
+    id?: any;
+    value?: any;
+    label: React.ReactNode | string;
+};
+export interface TeliSelectProps {
+    /**
+     * If true, the component is initially open. Use when the component open state
+     * is not controlled (i.e. the open prop is not defined). You can only use it
+     * when the native prop is false (default).
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * The default value. Use when the component is not controlled.
+     */
+    defaultValue?: any;
+    /**
+     * If true, the label, input and helper text should be displayed in a disabled
+     * state.
+     */
+    disabled?: boolean;
+    /**
+     * If true, the label is displayed in an error state.
+     */
+    error?: boolean;
+    /**
+     * If true, the component is displayed in focused state.
+     */
+    focused?: boolean;
+    /**
+     * If true, the component will take up the full width of its container.
+     */
+    fullWidth?: boolean;
+    /**
+     * If true, the label is hidden. Be sure to add aria-label to the input
+     * element.
+     */
+    hiddenLabel?: boolean;
+    /**
+     * The id of the input element.
+     */
+    id?: string;
+    /**
+     * The label of the input.
+     */
+    label?: string;
+    /**
+     * Text which will be displayed below the component. If ' ' is provided, the
+     * component reserves one line height for displaying a future message.
+     */
+    helperText?: string;
+    /**
+     * If true, value must be an array and the menu will support multiple
+     * selections.
+     */
+    multiple?: boolean;
+    /**
+     * Callback fired when a menu item is selected.
+     * @param event The event source of the callback. You can pull out the new
+     * value by accessing event.target.value (any). Warning: This is a generic
+     * event, not a change event, unless the change event is caused by browser
+     * autofill.
+     * @returns void
+     */
+    onChange?: (event: SelectChangeEvent) => void;
+    /**
+     * Callback fired when the component requests to be closed. Use it in either
+     * controlled (see the open prop), or uncontrolled mode (to detect when the
+     * Select collapses).
+     * @param event The event source of the callback.
+     * @returns void
+     */
+    onClose?: (event: object) => void;
+    /**
+     * Callback fired when the component requests to be opened. Use it in either
+     * controlled (see the open prop), or uncontrolled mode (to detect when the
+     * Select expands).
+     * @param event The event source of the callback.
+     * @returns void
+     */
+    onOpen?: (event: object) => void;
+    /**
+     * If true, the component is shown.
+     */
+    open?: boolean;
+    /**
+     * The option elements to populate the select with
+     * type TeliSelectOption = {
+        id?: any;
+        value?: any;
+        label: React.ReactNode | string;
+      };
+     */
+    options?: TeliSelectOption[];
+    /**
+     * If true, the selected option(s) cannot be changed
+     */
+    readOnly?: boolean;
+    /**
+     * If true, the label will indicate that the input is required.
+     */
+    required?: boolean;
+    /**
+     * The id of the select wrapper element
+     */
+    selectId?: string;
+    /**
+     * The width of the component
+     */
+    width?: number;
+    /**
+     * The input value. Providing an empty string will select no options. Set to
+     * an empty string '' if you don't want any of the available options to be
+     * selected. If the value is an object it must have reference equality with
+     * the option in order to be selected. If the value is not an object, the
+     * string representation must match with the string representation of the
+     * option in order to be selected.
+     */
+    value?: any;
+}
+declare const TeliSelect: React.FC<TeliSelectProps>;
+export default TeliSelect;
+export type { SelectChangeEvent };

package/dist/src/components/TeliSelect/TeliSelect.stories.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import type { StoryObj } from "@storybook/react";
+import { BasicSelect, LabelsAndHelperText, MultiSelect, OtherStates } from "./stories";
+declare const meta: {
+    component: import("react").FC<import("./TeliSelect").TeliSelectProps>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, {
+        defaultOpen?: boolean | undefined;
+        defaultValue?: any;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        focused?: boolean | undefined;
+        fullWidth?: boolean | undefined;
+        hiddenLabel?: boolean | undefined;
+        id?: string | undefined;
+        label?: string | undefined;
+        helperText?: string | undefined;
+        multiple?: boolean | undefined;
+        onChange?: ((event: import("@mui/material/Select/SelectInput").SelectChangeEvent) => void) | undefined;
+        onClose?: ((event: object) => void) | undefined;
+        onOpen?: ((event: object) => void) | undefined;
+        open?: boolean | undefined;
+        options?: {
+            id?: any;
+            value?: any;
+            label: import("react").ReactNode;
+        }[] | undefined;
+        readOnly?: boolean | undefined;
+        required?: boolean | undefined;
+        selectId?: string | undefined;
+        width?: number | undefined;
+        value?: any;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+export type TeliSelectStory = StoryObj<typeof meta>;
+export { BasicSelect, LabelsAndHelperText, OtherStates, MultiSelect };

package/dist/src/components/TeliSelect/stories/BasicSelect.d.ts

@@ -0,0 +1,3 @@
+import { TeliSelectStory } from "../TeliSelect.stories";
+declare const BasicSelect: TeliSelectStory;
+export default BasicSelect;

package/dist/src/components/TeliSelect/stories/LabelsAndHelperText.d.ts

@@ -0,0 +1,3 @@
+import { TeliSelectStory } from "../TeliSelect.stories";
+declare const LabelsAndHelperText: TeliSelectStory;
+export default LabelsAndHelperText;

package/dist/src/components/TeliSelect/stories/MultiSelect.d.ts

@@ -0,0 +1,3 @@
+import { TeliSelectStory } from "../TeliSelect.stories";
+declare const MultiSelect: TeliSelectStory;
+export default MultiSelect;

package/dist/src/components/TeliSelect/stories/OtherStates.d.ts

@@ -0,0 +1,3 @@
+import { TeliSelectStory } from "../TeliSelect.stories";
+declare const OtherStates: TeliSelectStory;
+export default OtherStates;

package/dist/src/components/TeliSelect/stories/index.d.ts

@@ -0,0 +1,4 @@
+export { default as BasicSelect } from "./BasicSelect";
+export { default as LabelsAndHelperText } from "./LabelsAndHelperText";
+export { default as MultiSelect } from "./MultiSelect";
+export { default as OtherStates } from "./OtherStates";

package/dist/src/components/TeliSelect/stories/top-30-movies.d.ts

@@ -0,0 +1,5 @@
+declare const TOP_30_MOVIES: {
+    label: string;
+    id: string;
+}[];
+export default TOP_30_MOVIES;

package/dist/src/components/TeliSpinner/TeliSpinner.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from "react";
+import { CircularProgressProps } from "@mui/material";
+declare const TeliSpinner: FC<CircularProgressProps>;
+export default TeliSpinner;

package/dist/src/components/TeliSpinner/TeliSpinner.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    component: import("react").FC<import("@mui/material").CircularProgressProps>;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Basic: Story;
+export declare const Secondary: Story;

package/dist/src/components/TeliSwitch/TeliSwitch.d.ts

@@ -0,0 +1,74 @@
+import React, { FC, HTMLAttributes } from "react";
+import "./teliswitch.css";
+export interface TeliSwitchProps {
+    /**
+     * If true, the component is checked.
+     */
+    checked?: boolean;
+    /**
+     * The default checked state. Use when the component is not controlled.
+     */
+    defaultChecked?: boolean;
+    /**
+     * If true, the component is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If given, uses a negative margin to counteract the padding on one side
+     * (this is often helpful for aligning the left or right side of the icon with
+     * content above or below, without ruining the border size and shape).
+     */
+    edge?: "end" | "start";
+    /**
+     * The id of the input element.
+     */
+    id?: string;
+    /**
+     * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)
+     * applied to the input element.
+     */
+    inputProps?: HTMLAttributes<HTMLInputElement>;
+    /**
+     * Pass a ref to the input element.
+     */
+    inputRef?: React.RefObject<HTMLInputElement> | null;
+    /**
+     * Text to be used in an enclosing label element.
+     */
+    label?: string;
+    /**
+     * The position of the label.
+     * @default end
+     */
+    labelPlacement?: "start" | "end";
+    /**
+     * Callback fired when the state is changed. <code>event</code> The event
+     * source of the callback. You can pull out the new value by accessing
+     * event.target.value (string). You can pull out the new checked state by
+     * accessing event.target.checked (boolean)
+     */
+    onChange?: (event: React.ChangeEvent) => void;
+    /**
+     * If true, the input element is required.
+     */
+    required?: boolean;
+    /**
+     * The size of the component. small is equivalent to the dense switch styling.
+     * @default small
+     */
+    size?: "small" | "medium";
+    /**
+     * The value of the component. The DOM API casts this to a string. The browser
+     * uses "on" as the default value.
+     */
+    value?: any;
+}
+/**
+ * Switches toggle the state of a single setting on or off. The option that the
+ * switch controls, as well as the state it's in, should be made clear from the
+ * corresponding inline label. If unsure when to use toggle switch or checkbox,
+ * refer to [Checkbox vs Toggle
+ * Switch](https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8)
+ */
+declare const TeliSwitch: FC<TeliSwitchProps>;
+export default TeliSwitch;

package/dist/src/components/TeliSwitch/TeliSwitch.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { StoryObj } from "@storybook/react";
+import { BasicSwitches, ControlledSwitches, LabelledSwitches, Sizes, LabelPlacement } from "./stories";
+declare const meta: {
+    component: import("react").FC<import("./TeliSwitch").TeliSwitchProps>;
+};
+export default meta;
+export type TeliSwitchStory = StoryObj<typeof meta>;
+export { BasicSwitches, LabelledSwitches, ControlledSwitches, Sizes, LabelPlacement, };

package/dist/src/components/TeliSwitch/stories/BasicSwitches.d.ts

@@ -0,0 +1,3 @@
+import { TeliSwitchStory } from "../TeliSwitch.stories";
+declare const BasicSwitches: TeliSwitchStory;
+export default BasicSwitches;

package/dist/src/components/TeliSwitch/stories/ControlledSwitches.d.ts

@@ -0,0 +1,3 @@
+import { TeliSwitchStory } from "../TeliSwitch.stories";
+declare const ControlledSwitches: TeliSwitchStory;
+export default ControlledSwitches;

package/dist/src/components/TeliSwitch/stories/LabelPlacement.d.ts

@@ -0,0 +1,3 @@
+import { TeliSwitchStory } from "../TeliSwitch.stories";
+declare const LabelPlacement: TeliSwitchStory;
+export default LabelPlacement;

package/dist/src/components/TeliSwitch/stories/LabelledSwitches.d.ts

@@ -0,0 +1,3 @@
+import { TeliSwitchStory } from "../TeliSwitch.stories";
+declare const LabelledSwitches: TeliSwitchStory;
+export default LabelledSwitches;

package/dist/src/components/TeliSwitch/stories/Sizes.d.ts

@@ -0,0 +1,3 @@
+import { TeliSwitchStory } from "../TeliSwitch.stories";
+declare const Sizes: TeliSwitchStory;
+export default Sizes;

package/dist/src/components/TeliSwitch/stories/index.d.ts

@@ -0,0 +1,5 @@
+export { default as BasicSwitches } from "./BasicSwitches";
+export { default as ControlledSwitches } from "./ControlledSwitches";
+export { default as LabelledSwitches } from "./LabelledSwitches";
+export { default as LabelPlacement } from "./LabelPlacement";
+export { default as Sizes } from "./Sizes";

package/dist/src/components/TeliTable/TeliBasicTable.d.ts

@@ -0,0 +1,48 @@
+import React from "react";
+import { TeliTableContainerProps } from "./TeliTableContainer";
+import { TeliTableProps } from "./TeliTable";
+import { TeliTableRowProps } from "./TeliTableRow";
+import { TeliTableCellProps } from "./TeliTableCell";
+export interface TeliBasicTableProps {
+    /**
+     * Table column headers
+     */
+    columns?: Array<string | Record<string, string>>;
+    /**
+     * Table body rows
+     */
+    rows?: Array<Array<string>>;
+    name?: TeliTableProps["name"];
+    addBorderToLastRow?: TeliTableRowProps["addBorderToLastRow"];
+    align?: TeliTableCellProps["align"];
+    bordered?: TeliTableContainerProps["bordered"];
+    /**
+     * A short heading for the table content
+     */
+    caption?: string;
+    compact?: TeliTableProps["compact"];
+    maxHeight?: TeliTableContainerProps["maxHeight"];
+    minWidth?: TeliTableProps["minWidth"];
+    /**
+     * If true, a column of numbered rows will be added at the start of table
+     */
+    numberRows?: boolean;
+    /**
+     * The heading for the numbered rows column
+     */
+    numberColumnHeading?: string;
+    /**
+     * Render column cell
+     * @param column Column data
+     * @param index
+     * @returns JSX.Element
+     */
+    renderColumnCell?: (column: any, index?: number) => JSX.Element;
+    stickyHeader?: TeliTableProps["stickyHeader"];
+    /**
+     * If true, the first column will be rendered as a table header
+     */
+    verticalHeader?: boolean;
+}
+declare const TeliBasicTable: React.FC<TeliBasicTableProps>;
+export default TeliBasicTable;

package/dist/src/components/TeliTable/TeliBasicTable.stories.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { StoryObj } from "@storybook/react";
+import { BasicTable, CaptionedTable, CustomColumns, DenseTable, StickyHeader } from "./stories";
+declare const meta: {
+    component: import("react").FC<import("./TeliBasicTable").TeliBasicTableProps>;
+    parameters: {
+        docs: {
+            source: {
+                type: string;
+            };
+        };
+    };
+};
+export default meta;
+export type TeliBasicTableStory = StoryObj<typeof meta>;
+export { BasicTable, DenseTable, StickyHeader, CaptionedTable, CustomColumns };

package/dist/src/components/TeliTable/TeliTable.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { TableProps as MUITableProps } from "@mui/material";
+import "./table.css";
+type TableProps = Omit<MUITableProps, "sx" | "classes" | "size">;
+export interface TeliTableProps extends TableProps {
+    /**
+     * If true, the table will be compact (smaller)
+     */
+    compact?: boolean;
+    /**
+     * Minimum width of the table
+     */
+    minWidth?: number;
+    /**
+     * The name of the table element
+     */
+    name?: string;
+}
+declare const TeliTable: React.FC<TeliTableProps>;
+export default TeliTable;

package/dist/src/components/TeliTable/TeliTable.stories.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { StoryObj } from "@storybook/react";
+import { TableExample } from "./stories";
+declare const meta: {
+    component: import("react").FC<import("./TeliTable").TeliTableProps>;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+            source: {
+                type: string;
+            };
+        };
+    };
+};
+export default meta;
+export type TeliTableStory = StoryObj<typeof meta>;
+export { TableExample };

package/dist/src/components/TeliTable/TeliTableBody.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { TableBodyProps } from "@mui/material";
+import "./table.css";
+export type TeliTableBody = Omit<TableBodyProps, "sx" | "classes">;
+declare const TeliTableBody: React.FC<TeliTableBody>;
+export default TeliTableBody;

package/dist/src/components/TeliTable/TeliTableBody.stories.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    component: import("react").FC<import("./TeliTableBody").TeliTableBody>;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export default meta;
+export type TeliTableBodyStory = StoryObj<typeof meta>;
+export declare const Example: TeliTableBodyStory;

package/dist/src/components/TeliTable/TeliTableCell.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { TableCellProps as MUITableCellProps } from "@mui/material";
+import "./table.css";
+type TableCellProps = Omit<MUITableCellProps, "sx" | "classes">;
+export interface TeliTableCellProps extends TableCellProps {
+    /**
+     * Minimum width of the table
+     */
+    minWidth?: number;
+}
+declare const TeliTableCell: React.FC<TeliTableCellProps>;
+export default TeliTableCell;