@veeqo/ui 0.0.1 → 0.0.3

package/.eslintrc.json

@@ -0,0 +1,105 @@
+{
+  "ignorePatterns": ["src/**/*.stories*"],
+  // Config from monolith.
+  "extends": [
+    "airbnb",
+    "airbnb/hooks",
+    "plugin:jsx-a11y/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "requireConfigFile": false
+  },
+  "plugins": ["@typescript-eslint", "jsx-a11y", "react-hooks", "react", "prettier", "jest"],
+  "env": {
+    "browser": true,
+    "jest": true
+  },
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["airbnb-typescript"],
+      "plugins": ["@typescript-eslint"],
+      "parser": "@typescript-eslint/parser",
+      "parserOptions": {
+        "project": "./tsconfig.json"
+      },
+      "rules": {
+        "no-undef": "off",
+        // It conflicts with prettier indent rule. We should always prioritise prettier for formatting rules
+        "@typescript-eslint/indent": "off"
+      }
+    },
+    // Disable extraneous dependencies rule for testing utilities missing `*.test.*` in the file name
+    {
+      "files": ["testUtils.*"],
+      "rules": {
+        "import/no-extraneous-dependencies": "off"
+      }
+    },
+    // Disable no parameter reassignment rule for Redux slice files where we have to peform reassignments
+    // due to how Redux implements Immer under the hood.
+    {
+      "files": ["slice.*"],
+      "rules": {
+        "no-param-reassign": "off"
+      }
+    }
+  ],
+  "rules": {
+    "prettier/prettier": "warn",
+    "import/no-unresolved": "warn",
+    "import/extensions": "warn",
+    "default-param-last": "warn",
+    "import/no-default-export": "error",
+    "import/prefer-default-export": "off",
+    "jsx-a11y/click-events-have-key-events": "off",
+    "jsx-a11y/label-has-associated-control": [
+      "error",
+      {
+        "labelComponents": [],
+        "labelAttributes": [],
+        "controlComponents": [],
+        "assert": "htmlFor",
+        "depth": 25
+      }
+    ],
+    "jsx-a11y/no-static-element-interactions": "off",
+    "lines-between-class-members": "error",
+    "no-param-reassign": "error",
+    "no-restricted-globals": "warn",
+    "no-undef": "warn",
+    "no-unused-vars": "warn",
+    "react/forbid-prop-types": "off",
+    "react/jsx-curly-newline": "off",
+    "react/jsx-filename-extension": [
+      "error",
+      {
+        "extensions": [".jsx", ".tsx"]
+      }
+    ],
+    "react/jsx-one-expression-per-line": "off",
+    "react/jsx-props-no-spreading": "off",
+    "react/no-unescaped-entities": "off",
+    "react/prefer-stateless-function": "off",
+    "react/prop-types": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/require-default-props": "off",
+    "react/function-component-definition": [
+      "error",
+      {
+        "namedComponents": ["arrow-function", "function-declaration"],
+        "unnamedComponents": "arrow-function"
+      }
+    ],
+    "react/no-unused-prop-types": ["warn"]
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "paths": ["app/assets/react", "app/assets/images"]
+      }
+    }
+  }
+}

package/.storybook/Intro.mdx

@@ -0,0 +1,22 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta
+  title="Get started/How to install"
+  parameters={{ previewTabs: { canvas: { hidden: true } } }}
+/>
+
+# Installation
+
+The React component library is hosted on [NPM](https://www.npmjs.com/package/@veeqo/ui).
+
+To install the package locally just run: `npm install -S @veeqo/ui`
+
+## Usage
+
+Once you've installed the package you just need to import the component you want:
+
+```tsx
+import { Button } from '@veeqo/ui';
+```
+
+Want to dive right in? Why not check out the [Button](/?path=/story/components-common-button--page) component.

package/.storybook/main.ts

@@ -1,7 +1,7 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*Docs.mdx', '../src/**/*stories.tsx'],
+  stories: ['./*mdx', '../src/**/*Docs.mdx', '../src/**/*stories.tsx'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',

package/.storybook/preview.ts

@@ -3,6 +3,13 @@ import type { Preview } from '@storybook/react';
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
+    options: {
+      storySort: {
+        method: 'alphabetical',
+        order: ['Get started', 'Components', 'Theme'],
+        locales: 'en-GB',
+      },
+    },
   },
 };
 

package/CHANGELOG.md

@@ -0,0 +1,21 @@
+### Changelog
+
+All notable changes to this project will be documented in this file. Dates are displayed in UTC.
+
+Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
+
+#### [v0.0.3](https://github.com/veeqo/veeqo-ui/compare/v0.0.3...v0.0.3)
+
+#### [v0.0.3](https://github.com/veeqo/veeqo-ui/compare/v0.0.2...v0.0.3)
+
+> 26 September 2023
+
+- Update patch scripts again to fix running changelog [`2f70ff3`](https://github.com/veeqo/veeqo-ui/commit/2f70ff367b73d8a7ece66ccf32c9d4a876ccf3f6)
+
+#### v0.0.2
+
+> 26 September 2023
+
+- Fix storybook build [`154fcf4`](https://github.com/veeqo/veeqo-ui/commit/154fcf41798374332c144281e87940c95facffc4)
+- Update package to setup tests and add tests for Stack [`8efbd04`](https://github.com/veeqo/veeqo-ui/commit/8efbd04d4ae3327b876e028ac18d2a7e00dd347d)
+- Add initial work setting up vite and rollup [`42fe21f`](https://github.com/veeqo/veeqo-ui/commit/42fe21f2935aa15b31216ca979b4eeb6f456117c)

package/README.md

@@ -0,0 +1,77 @@
+# Veeqo Components
+
+## Intro
+
+The frontend component library for reusable components in Veeqo which aim to reflect the [Veeqo Design System](https://www.figma.com/file/KFfBvJvYT4evKe9eiLEnwD/%F0%9F%8E%A8-Design-System?type=design&node-id=8067-38719&mode=design&t=v1hqIzanCtyYARwt-0). When possible we should aim to re-use components in this library all over the frontend and reduce the amount of custom components we create to reduce bundle size.
+
+This library has been re-written and refactored with the aims of enable tree-shaking which will allow us to reduce our bundle size and decrease page load times while also simplifying the library making it easier to work with and develop.
+
+Icons and Integrations have been moved:
+
+- Icons now live in [@veeqo/icons](https://www.npmjs.com/package/@veeqo/icons).
+- Our Integrations now live in [@veeqo/integrations](https://www.npmjs.com/package/@veeqo/integrations).
+
+## Getting Started
+
+Setup should be simple, clone the repo and use npm to install all dependencies.
+
+### Testing
+
+With this new library we aim to improve the quality of the code, and would like good test coverage of our components covering its main behaviour.
+
+Note:
+
+- We use [React testing library](https://testing-library.com/docs/react-testing-library/intro/).
+- Run tests with `npm run test`
+- Watch (listen to changes/ file saves) tests with `npm run test:watch` optionally with a filepath.
+
+### Prettier Setup
+
+Everything should mostly be setup already, if prettier isn't automatically formatting please check your `.vscode/settings.json` and adjust if needed (and remove from git).
+
+You will need to install [ESlint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) VSCode Extensions, if you haven't already.
+
+## Publishing to NPM
+
+_We currently deploy to NPM, and you will need to be a member of the team to be able to publish._
+
+<details>
+  <summary>Setup Steps</summary>
+
+### 1. Register NPM and request package access
+
+In order to make sure you're not a random stranger to do the publish, you need to register your amazon account (email ending with @amazon.com) on [npm](https://www.npmjs.com/). And then create a ticket in this [system](https://t.corp.amazon.com/create) to request you permission to access Veeqo-FE package, using the following options to create this access request ticket.
+
+```
+Category (C)
+Veeqo
+
+Type (T)
+Access Provisioning
+
+Item (I)
+Access Requests
+```
+
+Ps: feel free to PM your manager about your access request too as sometimes they may miss the emails
+
+### 2. Authenticate
+
+Once you've granted the access to Veeqo-FE package, make sure you have authenticated NPM and logged in with your account on your local machine.
+
+An easy way to do this is to run:
+
+```
+npm login
+```
+
+</details>
+
+### Publishing
+
+Versioning will happen on the `package.json` version number, and is for the library as a whole instead of per component for simplicity.
+
+When you make a change, which should be published to NPM please use: `npm version (patch | minor | major)`
+
+- This create a commit where you update the version number
+- **Create a git tag** for that version, making the version history straightward to look back on.

package/jest.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  preset: 'ts-jest',
+  setupFiles: ['<rootDir>/setupJestMock.js'],
+  setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
+  testPathIgnorePatterns: ['<rootDir>/node_modules', '<rootDir>/docs'],
+  testEnvironment: 'jsdom',
+  collectCoverageFrom: ['lib/**/*.{ts,tsx}'],
+  coverageReporters: ['json', 'html'],
+  moduleNameMapper: {
+    '^components(.*)$': '<rootDir>/lib/components$1',
+    '^theme(.*)$': '<rootDir>/lib/theme$1',
+    '^types(.*)$': '<rootDir>/lib/types$1',
+    // '^hooks(.*)$': '<rootDir>/lib/hooks$1',
+    // '^utils(.*)$': '<rootDir>/lib/utils$1',
+  },
+};

package/lib/components/Accordion/Accordion.d.ts

@@ -0,0 +1,12 @@
+import { FC, ReactNode } from 'react';
+export interface AccordionProps {
+    children: ReactNode;
+    label: string;
+    iconSlot?: ReactNode;
+    className?: string;
+    timeout?: number;
+    transitionClassnames?: string;
+    description?: string;
+    shouldOpenOnMount?: boolean;
+}
+export declare const Accordion: FC<AccordionProps>;

package/lib/components/Accordion/index.d.ts

@@ -0,0 +1 @@
+export { Accordion } from './Accordion';

package/lib/components/Accordion/styled.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { Text } from '../Text';
+declare const Left: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const Right: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+declare const TapBar: import("styled-components").StyledComponent<"div", any, {
+    shouldOpen: boolean;
+}, never>;
+declare const Top: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const Arrow: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {}, never>;
+declare const Description: import("styled-components").StyledComponent<"span", any, {} & import("../Text/types").TextProps, never>;
+declare const Content: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { Content, TapBar, Top, Text, Arrow, Left, Right, Description };

package/lib/components/ActionList/ActionList.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ActionListProps } from './types';
+export declare const ActionList: ({ title, items, sections, buttonVariant, buttonSize, }: ActionListProps) => React.JSX.Element;

package/lib/components/ActionList/index.d.ts

@@ -0,0 +1 @@
+export { ActionList } from './ActionList';

package/lib/components/ActionList/styled.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare const ListCard: import("styled-components").StyledComponent<"div", any, import("../Card/styled").SurfaceProps, never>;
+export declare const Section: import("styled-components").StyledComponent<"section", any, {}, never>;
+export declare const SectionHeading: import("styled-components").StyledComponent<"span", any, ({} & import("../Text/types").TextProps) & {
+    variant: string;
+}, "variant">;
+export declare const Item: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Button/types").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {
+    variant: "unstyled";
+}, "variant">;
+export declare const ActionItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Button/types").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {
+    variant: "unstyled";
+}, "variant">;
+export declare const LinkItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Button/types").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {
+    variant: "unstyled";
+}, "variant">;

package/lib/components/ActionList/types.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { ButtonVariant } from '../Button/types';
+export type ActionListItem = {
+    title: string;
+    icon?: Omit<ReactNode, string>;
+    variant?: 'item' | 'action' | 'link';
+    onClick: () => void;
+};
+export type ActionListSection = {
+    title?: string;
+    items: ActionListItem[];
+};
+export interface ActionListProps {
+    title: string;
+    items?: ActionListItem[];
+    sections?: ActionListSection[];
+    buttonVariant?: ButtonVariant;
+    buttonSize?: 'sm' | 'base';
+}

package/lib/components/Anchor/Anchor.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from 'react';
+export interface AnchorProps {
+    children?: ReactNode;
+    href: string;
+    text?: string;
+    className?: string;
+    target?: string;
+}
+export declare const Anchor: ({ children, className, text, href, target }: AnchorProps) => React.JSX.Element;

package/lib/components/Anchor/index.d.ts

@@ -0,0 +1 @@
+export { Anchor } from './Anchor';

package/lib/components/Anchor/styled.d.ts

@@ -0,0 +1 @@
+export declare const CommonAnchor: import("styled-components").StyledComponent<"a", any, {}, never>;

package/lib/components/AnimatedDropdown/AnimatedDropdown.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { AnimatedDropdownProps } from './types';
+export declare const AnimatedDropdown: ({ cta, shouldShowDropdown, children, className, reversed, onClickAway, timeout, transitionClassnames, onClick, onMouseEnter, onMouseLeave, }: AnimatedDropdownProps) => React.JSX.Element;

package/lib/components/AnimatedDropdown/components/BasicDropdown.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const BasicDropdown: React.ForwardRefExoticComponent<import("../../types").EventHandlerProps & {
+    className?: string | undefined;
+    children: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;

package/lib/components/AnimatedDropdown/components/styled.d.ts

@@ -0,0 +1 @@
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/AnimatedDropdown/index.d.ts

@@ -0,0 +1 @@
+export { AnimatedDropdown } from './AnimatedDropdown';

package/lib/components/AnimatedDropdown/styled.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const Wrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const Dropdown: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../types").EventHandlerProps & {
+    className?: string | undefined;
+    children: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>, any, {
+    reversed?: boolean | undefined;
+}, never>;
+export { Wrap, Dropdown, Container };

package/lib/components/AnimatedDropdown/types.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { EventHandlerProps } from '../types';
+export type BasicDropdownProps = EventHandlerProps & {
+    className?: string;
+    children: ReactNode;
+};
+export type AnimatedDropdownProps = BasicDropdownProps & {
+    cta?: ReactNode;
+    shouldShowDropdown: boolean;
+    timeout?: number;
+    transitionClassnames?: string;
+    onClickAway?: (event: Event) => void;
+    reversed?: boolean;
+};

package/lib/components/Avatar/Avatar.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { AvatarProps } from './types';
+export declare const Avatar: ({ width, name, bgColor, textColor, }: AvatarProps) => React.JSX.Element;

package/lib/components/Avatar/index.d.ts

@@ -0,0 +1 @@
+export { Avatar } from './Avatar';

package/lib/components/Avatar/styled.d.ts

@@ -0,0 +1,2 @@
+import { AvatarSCProps } from './types';
+export declare const AvatarSC: import("styled-components").StyledComponent<"div", any, AvatarSCProps, never>;

package/lib/components/Avatar/types.d.ts

@@ -0,0 +1,11 @@
+export interface AvatarProps {
+    name: string;
+    width?: string;
+    bgColor?: string;
+    textColor?: string;
+}
+export interface AvatarSCProps {
+    width: string;
+    bgColor: string;
+    textColor: string;
+}

package/lib/components/Badge/Badge.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { BadgeProps } from './types';
+export declare const Badge: ({ variant, hideBorder, iconSlot, tooltip, className, e2eClassName, children, }: BadgeProps) => React.JSX.Element;

package/lib/components/Badge/index.d.ts

@@ -0,0 +1 @@
+export { Badge } from './Badge';

package/lib/components/Badge/styled.d.ts

@@ -0,0 +1,7 @@
+type BaseBadgeProps = {
+    hideBorder: boolean;
+};
+export declare const DefaultBadge: import("styled-components").StyledComponent<"div", any, BaseBadgeProps, never>;
+export declare const PrimaryBadge: import("styled-components").StyledComponent<"div", any, BaseBadgeProps, never>;
+export declare const WarningBadge: import("styled-components").StyledComponent<"div", any, BaseBadgeProps, never>;
+export {};

package/lib/components/Badge/types.d.ts

@@ -0,0 +1,35 @@
+import React, { ReactNode } from 'react';
+export type BadgeVariant = 'default' | 'primary' | 'warning';
+/**
+ * Badge properties.
+ */
+export type BadgeProps = {
+    /**
+     * Specifies the Badge variant.
+     */
+    variant?: BadgeVariant;
+    /**
+     * Renders an optional icon inside the Badge.
+     */
+    iconSlot?: Omit<ReactNode, string>;
+    /**
+     * Specifies tooltip text to display on hover.
+     */
+    tooltip?: string;
+    /**
+     * Specifies whether or not to hide the Badge border.
+     */
+    hideBorder?: boolean;
+    /**
+     * Specifies an optional class name.
+     */
+    className?: string;
+    /**
+     * Specifies an optional class name for E2E testing.
+     */
+    e2eClassName?: string;
+    /**
+     * Children.
+     */
+    children: React.ReactNode;
+};

package/lib/components/Banner/Banner.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { BannerProps } from './types';
+/**
+ * The `Banner` component was previously called `Alert` (and similarly `Pill`).
+ */
+export declare const Banner: ({ type, text, icon, onClose, className, header, }: BannerProps) => React.JSX.Element;

package/lib/components/Banner/index.d.ts

@@ -0,0 +1 @@
+export { Banner } from './Banner';

package/lib/components/Banner/styled.d.ts

@@ -0,0 +1,7 @@
+import { PillProps } from './types';
+declare const Pill: import("styled-components").StyledComponent<"div", any, PillProps, never>;
+declare const Row: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const Col: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const HeaderCol: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledText: import("styled-components").StyledComponent<"span", any, {} & import("../Text/types").TextProps, never>;
+export { Pill, StyledText as Text, Row, Col, HeaderCol };

package/lib/components/Banner/types.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode, ReactEventHandler } from 'react';
+export declare enum BannerTypes {
+    help = "help",
+    info = "info",
+    error = "error",
+    success = "success"
+}
+export type BannerProps = {
+    type?: keyof typeof BannerTypes | string;
+    text?: string;
+    icon?: Omit<ReactNode, string>;
+    onClose?: ReactEventHandler;
+    className?: string;
+    header?: ReactNode;
+};
+export type PillProps = {
+    children?: ReactNode;
+    className?: string;
+    accentColor?: string;
+};

package/lib/components/BaseContainer/BaseContainer.d.ts

@@ -0,0 +1 @@
+export declare const BaseContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/BaseContainer/index.d.ts

@@ -0,0 +1 @@
+export { BaseContainer } from './BaseContainer';

package/lib/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { BreadcrumbsProps } from './types';
+export declare const Breadcrumbs: ({ items, Separator, LinkComponent, }: BreadcrumbsProps) => React.JSX.Element;

package/lib/components/Breadcrumbs/components/Breadcrumb.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { BreadcrumbProps } from '../types';
+export declare const Breadcrumb: ({ children, title, LinkComponent, href }: BreadcrumbProps) => React.JSX.Element;

package/lib/components/Breadcrumbs/components/styled.d.ts

@@ -0,0 +1,2 @@
+export declare const BreadcrumbsSC: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const BreadcrumbSC: import("styled-components").StyledComponent<"li", any, {}, never>;

package/lib/components/Breadcrumbs/index.d.ts

@@ -0,0 +1 @@
+export { Breadcrumbs } from './Breadcrumbs';

package/lib/components/Breadcrumbs/types.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+type Item = {
+    pathname: string;
+    title: string;
+};
+type LinkComponentProps = false | React.ComponentType<any>;
+export interface BreadcrumbsProps {
+    items: Item[];
+    Separator?: string | React.ReactNode;
+    LinkComponent?: LinkComponentProps;
+}
+export interface BreadcrumbProps {
+    title: string;
+    href: string;
+    LinkComponent?: LinkComponentProps;
+    children?: React.ReactNode;
+}
+export interface DefaultLinkProps {
+    children: React.ReactNode;
+    href: string;
+}
+export {};

package/lib/components/Button/Button.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ButtonProps } from './types';
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/lib/components/Button/components/DropdownIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DropdownIcon: () => React.JSX.Element;

package/lib/components/Button/components/styled.d.ts

@@ -0,0 +1,20 @@
+interface ButtonDisplayProps {
+    size: 'sm' | 'base';
+    hasText: boolean;
+    hasIcon: boolean;
+    hasDropdown: boolean;
+}
+export declare const MainContent: import("styled-components").StyledComponent<"span", any, {
+    loading?: boolean | undefined;
+    hasText: boolean;
+    size: 'base' | 'md';
+}, never>;
+export declare const DefaultButton: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+export declare const DefaultDestructiveButton: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+export declare const PrimaryButton: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+export declare const PrimaryDestructiveButton: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+export declare const FlatButton: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+export declare const UnstyledButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const LinkButton: import("styled-components").StyledComponent<"button", any, ButtonDisplayProps, never>;
+export declare const LoadingWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/lib/components/Button/index.d.ts

@@ -0,0 +1 @@
+export { Button } from './Button';

package/lib/components/Button/types.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode, ButtonHTMLAttributes } from 'react';
+export type ButtonVariant = 'default' | 'destructive' | 'primary' | 'primaryDestructive' | 'flat' | 'link' | 'unstyled';
+/**
+ * Button properties.
+ */
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    children?: ReactNode;
+    /** Variant styles */
+    variant?: ButtonVariant;
+    /** Button sizes */
+    size?: 'sm' | 'base';
+    /** Icon */
+    icon?: ReactNode;
+    /** Renders a dropdown indicator inside the button */
+    dropdown?: boolean;
+    /** Renders a loading indicator inside the button */
+    loading?: boolean;
+}