@appquality/unguess-design-system 2.11.4 → 2.11.7

package/build/stories/buttons/anchor/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AnchorArgs } from "./_types";
 /**
  * The Anchor is a link that helps users navigate from one location to another.
@@ -7,5 +8,5 @@ import { AnchorArgs } from "./_types";
     - To navigate within a page
     - To display links alongside text
  */
-declare const Anchor: (props: AnchorArgs) => JSX.Element;
+declare const Anchor: import("react").ForwardRefExoticComponent<AnchorArgs & import("react").RefAttributes<HTMLAnchorElement>>;
 export { Anchor };

package/build/stories/buttons/anchor/index.stories.d.ts

@@ -1,7 +1,8 @@
+/// <reference types="react" />
 import { ComponentMeta, Story } from "@storybook/react";
 import { AnchorArgs } from "./_types";
 export declare const Basic: Story<AnchorArgs>;
 export declare const Danger: Story<AnchorArgs>;
 export declare const External: Story<AnchorArgs>;
-declare const _default: ComponentMeta<(props: AnchorArgs) => JSX.Element>;
+declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<AnchorArgs & import("react").RefAttributes<HTMLAnchorElement>>>;
 export default _default;

package/build/stories/buttons/button/_types.d.ts

@@ -15,7 +15,7 @@ export interface ButtonArgs extends IButtonProps {
     /** Applies danger styling */
     isDanger?: boolean;
     /** Specifies the buton size */
-    size?: 'small' | 'medium' | 'large';
+    size?: "small" | "medium" | "large";
     /** Stretches the button fill to its container width */
     isStretched?: boolean;
     /** Applies neutral button styling */

package/build/stories/buttons/button/index.d.ts

@@ -1,21 +1,17 @@
+/// <reference types="react" />
 import { ButtonArgs } from "./_types";
-/**
- * Buttons let users take action quickly.
- * Use a Button to enable actions or decisions that are important to a user’s workflow.
- * <hr>
- * Used for this:
-   - To enable user action
-   - To draw attention to relevant actions in a user's workflow
- */
-declare const Button: {
-    (props: ButtonArgs): JSX.Element;
-    StartIcon: {
+declare const UgButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-buttons").IButtonProps & import("react").RefAttributes<HTMLButtonElement>> & {
+    EndIcon: {
         (props: import("@zendeskgarden/react-buttons").IButtonEndIconProps): JSX.Element;
         displayName: string;
     };
-    EndIcon: {
+    StartIcon: {
         (props: import("@zendeskgarden/react-buttons").IButtonEndIconProps): JSX.Element;
         displayName: string;
     };
+}, any, {}, never>;
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonArgs & import("react").RefAttributes<HTMLButtonElement>> & {
+    EndIcon: typeof UgButton.EndIcon;
+    StartIcon: typeof UgButton.StartIcon;
 };
-export { Button };
+export {};

package/build/stories/buttons/button/index.stories.d.ts

@@ -1,16 +1,16 @@
+/// <reference types="react" />
 import { ComponentMeta, Story } from "@storybook/react";
 import { ButtonArgs } from "./_types";
 export declare const Default: Story<ButtonArgs>;
 export declare const Basic: Story<ButtonArgs>;
 export declare const Primary: Story<ButtonArgs>;
 export declare const WithIcon: Story<ButtonArgs>;
-declare const _default: ComponentMeta<{
-    (props: ButtonArgs): JSX.Element;
-    StartIcon: {
+declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<ButtonArgs & import("react").RefAttributes<HTMLButtonElement>> & {
+    EndIcon: {
         (props: import("@zendeskgarden/react-buttons").IButtonEndIconProps): JSX.Element;
         displayName: string;
     };
-    EndIcon: {
+    StartIcon: {
         (props: import("@zendeskgarden/react-buttons").IButtonEndIconProps): JSX.Element;
         displayName: string;
     };

package/build/stories/buttons/button-group/index.d.ts

@@ -1,8 +1,9 @@
+/// <reference types="react" />
 import { ButtonGroupArgs } from "./_types";
 /**
 A Button group lets users make a selection from a set of options.
 
 This is a legacy component and may be deprecated in the future. UNGUESS does not presently recommend the use of Button groups.
 **/
-declare const ButtonGroup: (props: ButtonGroupArgs) => JSX.Element;
+declare const ButtonGroup: import("react").ForwardRefExoticComponent<ButtonGroupArgs & import("react").RefAttributes<HTMLDivElement>>;
 export { ButtonGroup };

package/build/stories/buttons/button-group/index.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ComponentMeta, Story } from "@storybook/react";
 import { ButtonGroupArgs } from "./_types";
 interface ButtonGroupProps extends ButtonGroupArgs {
@@ -10,5 +11,5 @@ interface ButtonGroupProps extends ButtonGroupArgs {
 export declare const TwoItems: Story<ButtonGroupProps>;
 export declare const WithBorders: Story<ButtonGroupProps>;
 export declare const RoundedItems: Story<ButtonGroupProps>;
-declare const _default: ComponentMeta<(props: ButtonGroupArgs) => JSX.Element>;
+declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<ButtonGroupArgs & import("react").RefAttributes<HTMLDivElement>>>;
 export default _default;

package/build/stories/buttons/icon-button/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IconButtonArgs } from "./_types";
 /**
 Icon buttons (like Buttons) let users take action.
@@ -9,5 +10,5 @@ Used for this
  - To simplify the appearance of repeated or persistent actions on a page
  - To enable action in a toolbar
 **/
-declare const IconButton: (props: IconButtonArgs) => JSX.Element;
+declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonArgs & import("react").RefAttributes<HTMLButtonElement>>;
 export { IconButton };

package/build/stories/buttons/icon-button/index.stories.d.ts

@@ -1,8 +1,9 @@
+/// <reference types="react" />
 import { ComponentMeta, Story } from "@storybook/react";
 import { IconButtonArgs } from "./_types";
 export declare const Default: Story<IconButtonArgs>;
 export declare const Danger: Story<IconButtonArgs>;
 export declare const Disabled: Story<IconButtonArgs>;
 export declare const Shape: Story<IconButtonArgs>;
-declare const _default: ComponentMeta<(props: IconButtonArgs) => JSX.Element>;
+declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<IconButtonArgs & import("react").RefAttributes<HTMLButtonElement>>>;
 export default _default;

package/build/stories/buttons/split-button/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SplitButtonArgs } from "./_types";
 /**
 A Split button is a hybrid between a Dropdown Menu and a Button. It lets users choose from parallel actions and take action on their choice.
@@ -6,5 +7,5 @@ Used for this:
 - To let users select from multiple parallel actions. Actions are parallel when each represents a path forward for the user and none cancel the action.
 - To reduce visual complexity when there are multiple actions a user can take
 **/
-declare const SplitButton: (props: SplitButtonArgs) => JSX.Element;
+declare const SplitButton: import("react").ForwardRefExoticComponent<SplitButtonArgs & import("react").RefAttributes<HTMLDivElement>>;
 export { SplitButton };

package/build/stories/buttons/split-button/index.stories.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 import { ComponentMeta, Story } from "@storybook/react";
 import { SplitButtonArgs } from "./_types";
 export declare const Default: Story<SplitButtonArgs>;
-declare const _default: ComponentMeta<(props: import("../icon-button/_types").IconButtonArgs) => JSX.Element>;
+declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<import("../icon-button/_types").IconButtonArgs & import("react").RefAttributes<HTMLButtonElement>>>;
 export default _default;

package/build/stories/forms/input/index.d.ts

@@ -8,5 +8,5 @@ declare const Hint: import("styled-components").StyledComponent<import("react").
    *  - To let the user enter data into a field
    *  - To enter multiline text, use a Textarea
    **/
-declare const Input: (props: InputArgs) => JSX.Element;
+declare const Input: import("react").ForwardRefExoticComponent<InputArgs & import("react").RefAttributes<HTMLInputElement>>;
 export { Input, Hint };

package/build/stories/forms/input/index.stories.d.ts

@@ -1,8 +1,9 @@
+/// <reference types="react" />
 import { ComponentMeta, Story } from "@storybook/react";
 import { InputArgs } from "./_types";
 export declare const Default: Story<InputArgs>;
 export declare const Success: Story<InputArgs>;
 export declare const Warning: Story<InputArgs>;
 export declare const Error: Story<InputArgs>;
-declare const _default: ComponentMeta<(props: InputArgs) => JSX.Element>;
+declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<InputArgs & import("react").RefAttributes<HTMLInputElement>>>;
 export default _default;

package/build/stories/forms/input-toggle/_types.d.ts

@@ -0,0 +1,15 @@
+import { IInputProps } from "@zendeskgarden/react-forms";
+export interface InputToggleArgs extends IInputProps {
+    /** Removes borders and padding */
+    isBare?: boolean;
+    /** Applies validation state styling */
+    validation?: 'success' | 'warning' | 'error';
+    /** Sets input size */
+    size?: number;
+    /** Sets the input label */
+    label?: string;
+    /** Sets the input message */
+    message?: string;
+    /** Sets the asterisk if required */
+    required?: boolean;
+}

package/build/stories/forms/input-toggle/index.d.ts

@@ -0,0 +1,10 @@
+import { InputToggleArgs } from "./_types";
+/**
+ * An Input Toggle lets users use the input by activating it pressing the edit button.
+ * <hr>
+ * Used for this:
+ *  - To let the user enter data into a field
+ *  - To enter multiline text, use a Textarea
+ **/
+declare const InputToggle: (props: InputToggleArgs) => JSX.Element;
+export { InputToggle };

package/build/stories/forms/input-toggle/index.stories.d.ts

@@ -0,0 +1,8 @@
+import { ComponentMeta, Story } from "@storybook/react";
+import { InputToggleArgs } from "./_types";
+export declare const Default: Story<InputToggleArgs>;
+export declare const Success: Story<InputToggleArgs>;
+export declare const Warning: Story<InputToggleArgs>;
+export declare const Error: Story<InputToggleArgs>;
+declare const _default: ComponentMeta<(props: InputToggleArgs) => JSX.Element>;
+export default _default;

package/build/stories/tooltip-modal/_types.d.ts

@@ -0,0 +1,21 @@
+import { ITooltipModalProps } from "@zendeskgarden/react-modals";
+declare type Placement = "auto" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "end" | "end-top" | "end-bottom" | "start" | "start-top" | "start-bottom";
+export interface TooltipModalArgs extends ITooltipModalProps {
+    /**
+     * Positions the modal relative to the provided `HTMLElement`
+     */
+    referenceElement?: HTMLElement | null;
+    /**
+     * Adjusts the placement of the tooltip
+     **/
+    placement?: Placement;
+    /**
+     * Adds an arrow to the tooltop
+     */
+    hasArrow?: boolean;
+    /**
+     * Sets the `z-index` of the tooltip
+     */
+    zIndex?: number;
+}
+export {};

package/build/stories/tooltip-modal/index.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { TooltipModalArgs } from "./_types";
+/**
+ * A Tooltip modal provides contextual information about a paired element. It either opens automatically or through user action.
+ * <hr>
+ * Used for this:
+    - To enable user action within a tooltip
+    - To provide a focus loop when actions need to be inside a tooltip
+ */
+declare const TooltipModal: {
+    (props: TooltipModalArgs): JSX.Element;
+    Title: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Body: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Close: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+    Footer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    FooterItem: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+export { TooltipModal };

package/build/stories/tooltip-modal/index.stories.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { TooltipModalArgs } from "./_types";
+export declare const Default: Story<TooltipModalArgs>;
+declare const _default: ComponentMeta<{
+    (props: TooltipModalArgs): JSX.Element;
+    Title: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Body: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Close: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+    Footer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    FooterItem: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+}>;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.11.4",
+  "version": "2.11.7",
   "dependencies": {
     "@tiptap/extension-bubble-menu": "^2.0.0-beta.61",
     "@tiptap/extension-character-count": "^2.0.0-beta.31",