@versini/ui-types 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Arno Versini
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,348 @@
+import React$1 from 'react';
+
+declare namespace SpacingTypes {
+	export type Types =
+		| undefined
+		| string
+		| number
+		| {
+				b?: number;
+				l?: number;
+				r?: number;
+				t?: number;
+		  };
+
+	export type Props = {
+		spacing?: Types;
+	};
+}
+
+type CommonButtonProps = {
+	/**
+	 * CSS class(es) to add to the main component wrapper.
+	 */
+	className?: string;
+	/**
+	 * The type of focus for the Button. This will change the color
+	 * of the focus ring around the Button.
+	 */
+	focusMode?: "dark" | "light" | "system" | "alt-system";
+	/**
+	 * Whether or not the Button is full width.
+	 * @default false
+	 */
+	fullWidth?: boolean;
+	/**
+	 * The mode of Button. This will change the color of the Button.
+	 */
+	mode?: "dark" | "light" | "system" | "alt-system";
+	/**
+	 * Whether or not to render the Button with a border.
+	 * @default false
+	 */
+	noBorder?: boolean;
+	/**
+	 * Whether or not to render the Button with a hack for Safari click.
+	 * @default false
+	 */
+	noInternalClick?: boolean;
+	/**
+	 * Whether or not to render the Button with styles or not.
+	 * @default false
+	 */
+	raw?: boolean;
+	/**
+	 * The size of the Button.
+	 */
+	size?: "small" | "medium" | "large";
+} & SpacingTypes.Props;
+
+declare namespace ButtonTypes {
+	export type Props = {
+		/**
+		 * The text to render in the button.
+		 */
+		children: React.ReactNode;
+		/**
+		 * Whether or not the Button is disabled.
+		 * @default false
+		 */
+		disabled?: boolean;
+		/**
+		 * Whether or not to truncate the text automatically. The text will truncate
+		 * only if this prop is not set AND the text is longer than the Component. For the
+		 * text to be longer than the Component, the Component must have a fixed width, potentially
+		 * set by the parent component or its own className prop.
+		 * @default false
+		 */
+		noTruncate?: boolean;
+		/**
+		 * Handler to call when the Button is clicked.
+		 */
+		onClick?: React.MouseEventHandler<HTMLButtonElement>;
+		/**
+		 * The variant style of the Button.
+		 */
+		variant?: "primary" | "secondary" | "danger";
+	} & CommonButtonProps &
+		React.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+
+declare namespace ButtonLinkTypes {
+	export type Props = {
+		/**
+		 * Whether or not to add an icon indicating that the link
+		 * opens in a new window.
+		 * @default false
+		 */
+		noNewWindowIcon?: boolean;
+		/**
+		 * A string that is the result of parsing the href HTML attribute
+		 * relative to the document, containing a valid URL of a linked resource.
+		 */
+		href?: string;
+		/**
+		 * A string that reflects the target HTML attribute, indicating where
+		 * to display the linked resource.
+		 * @default _self
+		 */
+		target?: "_blank" | "_self" | "_parent" | "_top";
+	} & ButtonTypes.Props &
+		React.AnchorHTMLAttributes<HTMLAnchorElement>;
+}
+
+declare namespace ButtonIconTypes {
+	export type Props = {
+		/**
+		 * The icon to render in the button.
+		 */
+		children: React.ReactNode;
+		/**
+		 * Cell content alignment.
+		 * @default "center"
+		 */
+		align?: "left" | "right" | "center";
+		/**
+		 * The label to use as aria-label.
+		 */
+		label?: string;
+		/**
+		 * The label to show to the left of the icon.
+		 */
+		labelLeft?: string;
+		/**
+		 * The label to show to the right of the icon.
+		 */
+		labelRight?: string;
+		/**
+		 * Option to make the Button transparent.
+		 */
+		noBackground?: boolean;
+	} & CommonButtonProps &
+		React.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+
+declare namespace ButtonSortTypes {
+	export type Props = {
+		/**
+		 * Prop to signal if the Button is active.
+		 */
+		active?: boolean;
+	} & ButtonIconTypes.Props &
+		React.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+
+declare namespace CardTypes {
+	export type Props = {
+		/**
+		 * The children to render.
+		 */
+		children: React$1.ReactNode;
+		/**
+		 * If the header prop is not provided, the Card must be
+		 * described via aria-labelledby.
+		 */
+		"aria-labelledby"?: string;
+		/**
+		 * CSS class(es) to add to the body.
+		 */
+		bodyClassName?: string;
+		/**
+		 * CSS class(es) to add to the main component wrapper.
+		 */
+		className?: string;
+		/**
+		 * If true, the card will be smaller.
+		 */
+		compact?: boolean;
+		/**
+		 * The content to render in the footer.
+		 */
+		footer?: React$1.ReactNode;
+		/**
+		 * CSS class(es) to add to the footer.
+		 */
+		footerClassName?: string;
+		/**
+		 * The content to render in the header.
+		 */
+		header?: React$1.ReactNode;
+		/**
+		 * CSS class(es) to add to the header.
+		 */
+		headerClassName?: string;
+		/**
+		 * The mode of Card. This will change the color of the Card.
+		 */
+		mode?: "darker" | "dark" | "light" | "system" | "alt-system";
+		/**
+		 * Whether or not to render the Card with a border.
+		 * @default false
+		 */
+		noBorder?: boolean;
+	} & SpacingTypes.Props;
+
+	export type HeaderProps = {
+		className: string;
+		content: React$1.ReactNode;
+
+		id?: string;
+		userAriaLabelledby?: string;
+	};
+}
+
+declare namespace LiveRegionTypes {
+	export type SetTimeoutResult = ReturnType<typeof setTimeout> | null;
+	export type Action =
+		| Record<string, never>
+		| {
+				type: "SET_ANNOUNCEMENT" | "CLEAR_ANNOUNCEMENT";
+				payload?: string | React.ReactNode;
+		  };
+
+	export type State = {
+		announcement: string | React.ReactNode;
+	};
+
+	export type PolitenessByRole = {
+		[key: string]: any;
+	};
+
+	export type ClearAnnouncementProps = {
+		dispatch: React.Dispatch<Action>;
+		onAnnouncementClear?: () => void;
+	};
+
+	export type AnnounceProps = {
+		children: React.ReactNode;
+		clearAnnouncementTimeoutRef: React.MutableRefObject<SetTimeoutResult>;
+		dispatch: React.Dispatch<Action>;
+		clearAnnouncementDelay?: number;
+		onAnnouncementClear?: () => void;
+	};
+
+	export type ConditionallyDelayAnnouncementProps = {
+		announcementTimeoutRef: React.MutableRefObject<SetTimeoutResult>;
+		children: React.ReactNode;
+		clearAnnouncementTimeoutRef: React.MutableRefObject<SetTimeoutResult>;
+		dispatch: React.Dispatch<Action>;
+		announcementDelay?: number;
+		clearAnnouncementDelay?: number;
+		onAnnouncementClear?: () => void;
+	};
+
+	export type Props = {
+		/**
+		 * The content to be announced by the live region.
+		 */
+		children: React.ReactNode;
+		/**
+		 * The number of milliseconds to wait before announcing the content.
+		 */
+		announcementDelay?: number;
+		/**
+		 * The `className` to apply to the live region.
+		 */
+		className?: string;
+		/**
+		 * The number of milliseconds to wait before clearing the announcement.
+		 */
+		clearAnnouncementDelay?: number;
+		/**
+		 * A callback to be invoked when the announcement is cleared.
+		 */
+		onAnnouncementClear?: () => void;
+		/**
+		 * The `aria-live` politeness level to apply to the live region.
+		 */
+		politeness?: "polite" | "assertive" | "off" | null | undefined;
+		/**
+		 * The `role` to apply to the live region.
+		 */
+		role?: "alert" | "status" | null | undefined;
+		/**
+		 * Whether or not the live region should be visible.
+		 */
+		visible?: boolean;
+	};
+}
+
+declare namespace ModalTypes {
+	export type Options = {
+		initialOpen?: boolean;
+		onOpenChange?: (open: boolean) => void;
+		open?: boolean;
+	};
+
+	export type Context =
+		| (ReturnType<Options> & {
+				setDescriptionId: React.Dispatch<
+					React.SetStateAction<string | undefined>
+				>;
+				setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+		  })
+		| null;
+}
+
+declare namespace SvgIconTypes {
+	export type Props = {
+		/**
+		 * The children to render.
+		 */
+		children: React.ReactNode;
+		/**
+		 * The default viewBox to use.
+		 */
+		defaultViewBox: string;
+		/**
+		 * The title to use for the icon. Each icon has a default title,
+		 * but it can be overridden with this prop.
+		 */
+		title: string;
+		/**
+		 * CSS class(es) to add to the main component wrapper.
+		 */
+		className?: string;
+		/**
+		 * CSS class(es) to add to the main component wrapper.
+		 */
+		defaultClassName?: string;
+		/**
+		 * Update the "fill" property of the SVG.
+		 * @default "currentColor"
+		 */
+		fill?: string;
+		/**
+		 * Whether or not the icon is semantic (visual and
+		 * announced to assistive technologies).
+		 * @default false
+		 */
+		semantic?: boolean;
+		/**
+		 * The viewBox to use. If not provided, the default viewBox will be used.
+		 */
+		viewBox?: string;
+	} & SpacingTypes.Props;
+}
+
+export { ButtonIconTypes, ButtonLinkTypes, ButtonSortTypes, ButtonTypes, CardTypes, LiveRegionTypes, ModalTypes, SpacingTypes, SvgIconTypes };

package/package.json

@@ -0,0 +1,27 @@
+{
+	"name": "@versini/ui-types",
+	"version": "0.0.0",
+	"license": "MIT",
+	"author": "Arno Versini",
+	"publishConfig": {
+		"access": "public"
+	},
+	"homepage": "https://github.com/aversini/ui-components",
+	"repository": {
+		"type": "git",
+		"url": "git@github.com:aversini/ui-components.git"
+	},
+	"type": "module",
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"build:check": "tsc",
+		"build:types": "tsup",
+		"build": "npm-run-all --serial clean build:check build:types",
+		"clean": "rimraf dist tmp"
+	},
+	"gitHead": "950bccb37bca104487c597f8a043ca3382331105"
+}