@qasa/qds-ui 0.9.0-next.3 → 0.9.0-next.5

package/dist/cjs/types/components/button/button-icon.d.ts

@@ -0,0 +1,10 @@
+import type { ElementType } from 'react';
+import type { IconProps } from '../icon';
+import type { ButtonSize } from './button-styles';
+interface ButtonIconProps {
+    buttonSize: ButtonSize;
+    icon: ElementType<IconProps>;
+    placement: 'left' | 'right';
+}
+export declare function ButtonIcon({ buttonSize, icon: Icon, placement }: ButtonIconProps): JSX.Element;
+export {};

package/dist/cjs/types/components/button/button-styles.d.ts

@@ -1,3 +1,4 @@
+import type { VariantProps } from '../../styles';
 export declare const getSizeStyles: (theme: {
     mediaQueries: {
         readonly smUp: "@media(min-width: 480px)";
@@ -142,7 +143,7 @@ export declare const getSizeStyles: (theme: {
             disabled: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
             onBrandPrimary: string;
             onBrandSecondary: string;
             onBrandTertiary: string;
@@ -155,7 +156,7 @@ export declare const getSizeStyles: (theme: {
             subtle: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
         };
     };
     sizes: {
@@ -404,7 +405,6 @@ export declare const getSizeStyles: (theme: {
         lineHeight: string;
         letterSpacing: string;
         height: string;
-        minWidth: string;
         paddingLeft: string;
         paddingRight: string;
     };
@@ -415,7 +415,6 @@ export declare const getSizeStyles: (theme: {
         lineHeight: string;
         letterSpacing: string;
         height: string;
-        minWidth: string;
         paddingLeft: string;
         paddingRight: string;
     };
@@ -426,7 +425,6 @@ export declare const getSizeStyles: (theme: {
         lineHeight: string;
         letterSpacing: string;
         height: string;
-        minWidth: string;
         paddingLeft: string;
         paddingRight: string;
     };
@@ -437,7 +435,6 @@ export declare const getSizeStyles: (theme: {
         lineHeight: string;
         letterSpacing: string;
         height: string;
-        minWidth: string;
         paddingLeft: string;
         paddingRight: string;
     };
@@ -452,6 +449,7 @@ export declare const getSizeStyles: (theme: {
         paddingRight: string;
     };
 };
+export declare type ButtonSize = VariantProps<typeof getSizeStyles>;
 export declare const getVariantStyles: (theme: {
     mediaQueries: {
         readonly smUp: "@media(min-width: 480px)";
@@ -596,7 +594,7 @@ export declare const getVariantStyles: (theme: {
             disabled: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
             onBrandPrimary: string;
             onBrandSecondary: string;
             onBrandTertiary: string;
@@ -609,7 +607,7 @@ export declare const getVariantStyles: (theme: {
             subtle: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
         };
     };
     sizes: {
@@ -894,3 +892,4 @@ export declare const getVariantStyles: (theme: {
         };
     };
 };
+export declare type ButtonVariant = VariantProps<typeof getVariantStyles>;

package/dist/cjs/types/components/button/button-types.d.ts

@@ -0,0 +1,43 @@
+import type { ElementType } from 'react';
+import type { IconProps } from '../icon';
+import type { ButtonSize, ButtonVariant } from './button-styles';
+export interface ButtonOptions {
+    /**
+     * Sets the size of the button
+     * @default 'md'
+     */
+    size?: ButtonSize;
+    /**
+     * Sets the style variant of the button
+     * @default 'secondary'
+     */
+    variant?: ButtonVariant;
+    /**
+     * If `true` the button will fill its container
+     * @default false
+     */
+    isFullWidth?: boolean;
+    /**
+     * If `true` the button will show a spinner
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * If `true` the button will be disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Icon to display before the button label
+     */
+    iconLeft?: ElementType<IconProps>;
+    /**
+     * Icon to display after the button label
+     */
+    iconRight?: ElementType<IconProps>;
+    /**
+     * The HTML `type` attribute
+     * @default 'button'
+     */
+    type?: 'button' | 'submit' | 'reset';
+}

package/dist/cjs/types/components/button/button.d.ts

@@ -1,40 +1,5 @@
-import type { VariantProps } from '../../styles';
 import type * as Polymorphic from '../../utils/polymorphic';
-import { getSizeStyles, getVariantStyles } from './button-styles';
-declare type ButtonVariant = VariantProps<typeof getVariantStyles>;
-declare type ButtonSize = VariantProps<typeof getSizeStyles>;
-interface ButtonOptions {
-    /**
-     * Sets the size of the button
-     * @default 'md'
-     */
-    size?: ButtonSize;
-    /**
-     * Sets the style variant of the button
-     * @default 'secondary'
-     */
-    variant?: ButtonVariant;
-    /**
-     * If `true` the button will fill its container
-     * @default false
-     */
-    isFullWidth?: boolean;
-    /**
-     * If `true` the button will show a spinner
-     * @default false
-     */
-    isLoading?: boolean;
-    /**
-     * If `true` the button will be disabled
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * The HTML `type` attribute
-     * @default 'button'
-     */
-    type?: 'button' | 'submit' | 'reset';
-}
+import type { ButtonOptions } from './button-types';
 declare type PolymorphicButton = Polymorphic.ForwardRefComponent<'button', ButtonOptions>;
 export declare type ButtonProps = Polymorphic.PropsOf<PolymorphicButton>;
 export declare const Button: PolymorphicButton;

package/dist/cjs/types/components/heading/heading.d.ts

@@ -145,7 +145,7 @@ declare const getSizeStyles: (theme: {
             disabled: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
             onBrandPrimary: string;
             onBrandSecondary: string;
             onBrandTertiary: string;
@@ -158,7 +158,7 @@ declare const getSizeStyles: (theme: {
             subtle: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
         };
     };
     sizes: {

package/dist/cjs/types/components/icon/icon.types.d.ts

@@ -1,16 +1,18 @@
-import type { Theme } from '@emotion/react';
 import type { SVGAttributes } from 'react';
+import type { Theme } from '../../theme';
 declare type IconSize = 16 | 20 | 24 | 32;
 declare type IconColor = keyof Theme['colors']['icon'] | 'currentColor';
 export interface IconOptions {
     /**
      * The size of the icon.
      *
-     * @default 16
+     * @default 24
      */
     size?: IconSize;
     /**
      * The color of the icon.
+     *
+     * @default 'default'
      */
     color?: IconColor;
 }

package/dist/cjs/types/components/icon-button/icon-button-styles.d.ts

@@ -142,7 +142,7 @@ export declare const getSizeStyles: (theme: {
             disabled: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
             onBrandPrimary: string;
             onBrandSecondary: string;
             onBrandTertiary: string;
@@ -155,7 +155,7 @@ export declare const getSizeStyles: (theme: {
             subtle: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
         };
     };
     sizes: {
@@ -400,17 +400,14 @@ export declare const getSizeStyles: (theme: {
     xs: {
         width: string;
         height: string;
-        fontSize: string;
     };
     sm: {
         width: string;
         height: string;
-        fontSize: string;
     };
     md: {
         width: string;
         height: string;
-        fontSize: string;
     };
 };
 export declare const getVariantStyles: (theme: {
@@ -557,7 +554,7 @@ export declare const getVariantStyles: (theme: {
             disabled: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
             onBrandPrimary: string;
             onBrandSecondary: string;
             onBrandTertiary: string;
@@ -570,7 +567,7 @@ export declare const getVariantStyles: (theme: {
             subtle: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
         };
     };
     sizes: {
@@ -862,9 +859,9 @@ export declare const getVariantStyles: (theme: {
                 ':hover': {
                     background: string;
                 };
-                ':active': {
-                    background: string;
-                };
+            };
+            ':active': {
+                background: string;
             };
         };
     };

package/dist/cjs/types/components/label/label.d.ts

@@ -148,7 +148,7 @@ declare const getSizeStyles: (theme: {
             disabled: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
             onBrandPrimary: string;
             onBrandSecondary: string;
             onBrandTertiary: string;
@@ -161,7 +161,7 @@ declare const getSizeStyles: (theme: {
             subtle: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
         };
     };
     sizes: {

package/dist/cjs/types/components/loading-dots/loading-dots.d.ts

@@ -145,7 +145,7 @@ declare const getSizeStyles: (theme: {
             disabled: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
             onBrandPrimary: string;
             onBrandSecondary: string;
             onBrandTertiary: string;
@@ -158,7 +158,7 @@ declare const getSizeStyles: (theme: {
             subtle: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
         };
     };
     sizes: {

package/dist/cjs/types/components/paragraph/paragraph.d.ts

@@ -145,7 +145,7 @@ declare const getSizeStyles: (theme: {
             disabled: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
             onBrandPrimary: string;
             onBrandSecondary: string;
             onBrandTertiary: string;
@@ -158,7 +158,7 @@ declare const getSizeStyles: (theme: {
             subtle: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
         };
     };
     sizes: {

package/dist/cjs/types/styles/common-styles.d.ts

@@ -142,7 +142,7 @@ export declare const getFormFieldBaseStyles: (theme: {
             disabled: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
             onBrandPrimary: string;
             onBrandSecondary: string;
             onBrandTertiary: string;
@@ -155,7 +155,7 @@ export declare const getFormFieldBaseStyles: (theme: {
             subtle: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
         };
     };
     sizes: {

package/dist/cjs/types/theme/foundations/colors.d.ts

@@ -97,7 +97,7 @@ export declare const colors: {
         disabled: string;
         negative: string;
         warning: string;
-        success: string;
+        positive: string;
         onBrandPrimary: string;
         onBrandSecondary: string;
         onBrandTertiary: string;
@@ -110,6 +110,6 @@ export declare const colors: {
         subtle: string;
         negative: string;
         warning: string;
-        success: string;
+        positive: string;
     };
 };

package/dist/cjs/types/theme/foundations/index.d.ts

@@ -147,7 +147,7 @@ export declare const foundations: {
             disabled: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
             onBrandPrimary: string;
             onBrandSecondary: string;
             onBrandTertiary: string;
@@ -160,7 +160,7 @@ export declare const foundations: {
             subtle: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
         };
     };
     sizes: {

package/dist/cjs/types/theme/theme-tools.d.ts

@@ -301,7 +301,7 @@ export declare const overrideTheme: (overrides: ThemeOverrides) => {
             disabled: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
             onBrandPrimary: string;
             onBrandSecondary: string;
             onBrandTertiary: string;
@@ -314,7 +314,7 @@ export declare const overrideTheme: (overrides: ThemeOverrides) => {
             subtle: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
         };
     };
     mediaQueries: {

package/dist/cjs/types/theme/theme.d.ts

@@ -142,7 +142,7 @@ export declare const theme: {
             disabled: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
             onBrandPrimary: string;
             onBrandSecondary: string;
             onBrandTertiary: string;
@@ -155,7 +155,7 @@ export declare const theme: {
             subtle: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
         };
     };
     sizes: {