greenole-design-system 1.1.35 → 1.1.37

package/README.md

@@ -1,124 +1,124 @@
-# Greenole Design System
-
-[![Figma Design](https://img.shields.io/badge/Figma-Design_System-blue)](https://www.figma.com/design/Zwkbh8XGfVt2At4ln7p1WE/DS-Greenole?node-id=1017-15&p=f&t=Mjdfp67Q8ADWcm9v-0)
-
-The **Greenole Design System** is a React component library designed to create consistent and scalable user interfaces.  
-The library is constantly evolving, with new components and improvements being added over time.
-
-## Table of Contents
-
-- [Introduction](#introduction)
-- [Installation](#installation)
-- [Usage](#usage)
-- [Development](#development)
-- [Build & Publication](#build--publication)
-- [Contributing](#contributing)
-- [License](#license)
-
-## Introduction
-
-**Greenole Design System** gathers reusable components that follow a consistent visual identity.  
-It helps teams maintain design and usability standards across their React projects.
-
-> **Note:**  
-> This library is in constant evolution. Existing components may be updated and new ones added over time.
-
-## Installation
-
-To install the library in your React project, run:
-
-```bash
-npm install greenole-design-system
-```
-
-> **Note:**  
-> The library declares `react` and `react-dom` as peer dependencies, so ensure your project already has these installed.
-
-## Usage
-
-After installation, you need to import both the CSS styles and the components:
-
-### 1. Import the CSS styles
-
-First, import the CSS file in your main application file (usually `main.jsx`, `App.jsx`, or `index.js`):
-
-```jsx
-import 'greenole-design-system/dist/greenole.css';
-```
-
-### 2. Import and use components
-
-Then you can import and use the library's components:
-
-```jsx
-import React from 'react';
-import { Typography } from 'greenole-design-system';
-
-function App() {
-  return (
-    <div>
-      <Typography variant="h1">
-        The quick brown fox jumps over the lazy dog.
-      </Typography>
-      {/* Additional components will be added in the future */}
-    </div>
-  );
-}
-
-export default App;
-```
-
-## Development
-
-To contribute to or test the library locally:
-
-1. Clone the repository:
-   ```bash
-   git clone https://github.com/your-username/greenole-design-system.git
-   cd greenole-design-system
-   ```
-2. Install dependencies:
-   ```bash
-   npm install
-   ```
-3. Start the development environment using Vite:
-   ```bash
-   npm run dev
-   ```
-4. To view the documentation and components, we use **Storybook**:
-   ```bash
-   npm run storybook
-   ```
-   Storybook serves as the documentation and demo environment for the library's components.
-
-## Build & Publication
-
-To generate the library bundle:
-
-1. Run the build command:
-   ```bash
-   npm run build
-   ```
-   This will create the `dist` folder with both CommonJS and ESModule files, as well as type declarations (if configured).
-
-2. To test locally in another project, use `npm link`:
-   ```bash
-   cd greenole-design-system
-   npm link
-   cd ../your-consumer-project
-   npm link greenole-design-system
-   ```
-3. When ready to publish:
-   ```bash
-   npm login
-   npm publish --access public
-   ```
-
-## Contributing
-
-Contributions are welcome! If you would like to help evolve the **Greenole Design System**, follow these steps:
-
-1. Fork the repository.
-2. Create a branch for your feature (`git checkout -b my-feature`).
-3. Commit your changes.
+# Greenole Design System
+
+[![Figma Design](https://img.shields.io/badge/Figma-Design_System-blue)](https://www.figma.com/design/Zwkbh8XGfVt2At4ln7p1WE/DS-Greenole?node-id=1017-15&p=f&t=Mjdfp67Q8ADWcm9v-0)
+
+The **Greenole Design System** is a React component library designed to create consistent and scalable user interfaces.  
+The library is constantly evolving, with new components and improvements being added over time.
+
+## Table of Contents
+
+- [Introduction](#introduction)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Development](#development)
+- [Build & Publication](#build--publication)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Introduction
+
+**Greenole Design System** gathers reusable components that follow a consistent visual identity.  
+It helps teams maintain design and usability standards across their React projects.
+
+> **Note:**  
+> This library is in constant evolution. Existing components may be updated and new ones added over time.
+
+## Installation
+
+To install the library in your React project, run:
+
+```bash
+npm install greenole-design-system
+```
+
+> **Note:**  
+> The library declares `react` and `react-dom` as peer dependencies, so ensure your project already has these installed.
+
+## Usage
+
+After installation, you need to import both the CSS styles and the components:
+
+### 1. Import the CSS styles
+
+First, import the CSS file in your main application file (usually `main.jsx`, `App.jsx`, or `index.js`):
+
+```jsx
+import 'greenole-design-system/dist/greenole.css';
+```
+
+### 2. Import and use components
+
+Then you can import and use the library's components:
+
+```jsx
+import React from 'react';
+import { Typography } from 'greenole-design-system';
+
+function App() {
+  return (
+    <div>
+      <Typography variant="h1">
+        The quick brown fox jumps over the lazy dog.
+      </Typography>
+      {/* Additional components will be added in the future */}
+    </div>
+  );
+}
+
+export default App;
+```
+
+## Development
+
+To contribute to or test the library locally:
+
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/your-username/greenole-design-system.git
+   cd greenole-design-system
+   ```
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+3. Start the development environment using Vite:
+   ```bash
+   npm run dev
+   ```
+4. To view the documentation and components, we use **Storybook**:
+   ```bash
+   npm run storybook
+   ```
+   Storybook serves as the documentation and demo environment for the library's components.
+
+## Build & Publication
+
+To generate the library bundle:
+
+1. Run the build command:
+   ```bash
+   npm run build
+   ```
+   This will create the `dist` folder with both CommonJS and ESModule files, as well as type declarations (if configured).
+
+2. To test locally in another project, use `npm link`:
+   ```bash
+   cd greenole-design-system
+   npm link
+   cd ../your-consumer-project
+   npm link greenole-design-system
+   ```
+3. When ready to publish:
+   ```bash
+   npm login
+   npm publish --access public
+   ```
+
+## Contributing
+
+Contributions are welcome! If you would like to help evolve the **Greenole Design System**, follow these steps:
+
+1. Fork the repository.
+2. Create a branch for your feature (`git checkout -b my-feature`).
+3. Commit your changes.
 4. Open a pull request for review.

package/dist/App.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare function App(): React.JSX.Element;
+export default App;

package/dist/base-components/Button/Button.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { ButtonProps } from './Button.types';
+declare const Button: React.FC<ButtonProps>;
+export default Button;

package/dist/base-components/Button/Button.stories.d.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as Button } from './Button';
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Tertiary: Story;
+export declare const Link: Story;
+export declare const DangerPrimary: Story;
+export declare const WithIcons: Story;
+export declare const LoadingState: Story;
+export declare const Disabled: Story;

package/dist/base-components/Button/Button.types.d.ts

@@ -0,0 +1,16 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { TypographyVariant } from '../../components/Typography/Typography';
+export type ButtonVariant = "primary" | "secondary" | "tertiary" | "link";
+export type ButtonSize = "sm" | "md" | "lg";
+export type ButtonColor = "default" | "danger";
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    children: ReactNode;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    color?: ButtonColor;
+    fullWidth?: boolean;
+    typography?: TypographyVariant;
+    loading?: boolean;
+    iconLeft?: ReactNode;
+    iconRight?: ReactNode;
+}

package/dist/base-components/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Button } from './Button';
+export type { ButtonColor, ButtonProps, ButtonSize, ButtonVariant } from './Button.types';

package/dist/base-components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { DropdownTypes } from './Dropdown.types';
+declare const Dropdown: React.FC<DropdownTypes>;
+export default Dropdown;

package/dist/base-components/Dropdown/Dropdown.stories.d.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as Dropdown } from './Dropdown';
+declare const meta: Meta<typeof Dropdown>;
+export default meta;
+type Story = StoryObj<typeof Dropdown>;
+export declare const Default: Story;
+export declare const Multiple: Story;
+export declare const Searchable: Story;
+export declare const WithMaxSelected: Story;
+export declare const WithLoadMore: Story;
+export declare const Invalid: Story;
+export declare const WithMessage: Story;
+export declare const OptionsWithIcons: Story;

package/dist/base-components/Dropdown/Dropdown.styles.d.ts

@@ -0,0 +1,35 @@
+import { DropdownTypes } from './Dropdown.types';
+type StyledButtonProps = Pick<DropdownTypes, 'invalid' | 'disabled' | 'className'> & {
+    $open: boolean;
+    $invalid: boolean;
+};
+type StyledMenuProps = {
+    $open: boolean;
+};
+type StyledOptionProps = {
+    $isSelected: boolean;
+    $isDisabled: boolean;
+};
+type StyledOptionCheckboxProps = {
+    $isSelected: boolean;
+};
+type StyledDropdownMessageProps = {
+    $invalid: boolean;
+};
+export declare const DropdownContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DropdownLabel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DropdownMessage: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledDropdownMessageProps>> & string;
+export declare const DropdownButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, StyledButtonProps>> & string;
+export declare const CaretIcon: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').SVGProps<SVGSVGElement>, {
+    $open: boolean;
+}>> & string;
+export declare const DropdownMenu: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledMenuProps>> & string;
+export declare const SearchContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SearchInput: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+export declare const OptionsList: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const OptionButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, StyledOptionProps>> & string;
+export declare const OptionCheckbox: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, StyledOptionCheckboxProps>> & string;
+export declare const OptionLabel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const NoResults: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Sentinel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export {};

package/dist/base-components/Dropdown/Dropdown.types.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+export interface DropdownOptionsType {
+    icon?: ReactNode;
+    label: string;
+    value: string;
+}
+export interface DropdownAsyncOptionsType {
+    data: DropdownOptionsType[];
+    hasMore: boolean;
+}
+export interface DropdownTypes {
+    label?: string;
+    multiple?: boolean;
+    searchable?: boolean;
+    placeholder?: string;
+    values?: string | string[];
+    maxSelected?: number;
+    options?: DropdownOptionsType[];
+    hasMore?: boolean;
+    isLoading?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    message?: string | ReactNode;
+    className?: string;
+    displayValue?: string;
+    onChange: (value: string | string[]) => void;
+    onSearch?: (searchTerm: string) => void;
+    onLoadMore?: () => void;
+}

package/dist/base-components/Dropdown/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Dropdown } from './Dropdown';
+export type { DropdownAsyncOptionsType, DropdownOptionsType, } from './Dropdown.types';

package/dist/base-components/Input/Input.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { InputProps } from './Input.types';
+export declare const Input: React.FC<InputProps>;
+export default Input;

package/dist/base-components/Input/Input.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as Input } from './Input';
+declare const meta: Meta<typeof Input>;
+export default meta;
+type Story = StoryObj<typeof Input>;
+export declare const Playground: Story;
+export declare const States: Story;
+export declare const WithTanStackForm: Story;

package/dist/base-components/Input/Input.styles.d.ts

@@ -0,0 +1,20 @@
+export declare const Wrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    fullWidth?: boolean;
+}>> & string;
+export declare const Label: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
+export declare const FieldWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    disabled?: boolean;
+    hasError?: boolean;
+    isValid?: boolean;
+    readOnly?: boolean;
+    textArea?: boolean;
+}>> & string;
+export declare const IconWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const BaseFieldStyles: import('styled-components').RuleSet<object>;
+export declare const InputField: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+export declare const TextAreaField: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, never>> & string;
+export declare const ErrorText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const Subtitle: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CharCounter: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    hasError?: boolean;
+}>> & string;

package/dist/base-components/Input/Input.types.d.ts

@@ -0,0 +1,23 @@
+import { TypographyVariant } from '../../components/Typography/Typography';
+export type InputType = React.HTMLInputTypeAttribute;
+type InputElementProps = React.InputHTMLAttributes<HTMLInputElement>;
+type TextAreaElementProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+export interface InputProps extends Omit<InputElementProps & TextAreaElementProps, "required" | "readOnly"> {
+    label?: string;
+    labelSize?: TypographyVariant;
+    subtitle?: string;
+    subtitleIcon?: React.ReactNode;
+    error?: string;
+    valid?: boolean;
+    iconLeft?: React.ReactNode;
+    iconRight?: React.ReactNode;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    type?: InputType;
+    className?: string;
+    isRequired?: boolean;
+    readOnly?: boolean;
+    textArea?: boolean;
+    maxLength?: number;
+}
+export {};

package/dist/base-components/Loading/Loading.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { LoadingProps } from './Loading.types';
+declare const Loading: React.FC<LoadingProps>;
+export default Loading;

package/dist/base-components/Loading/Loading.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as Loading } from './Loading';
+declare const meta: Meta<typeof Loading>;
+export default meta;
+type Story = StoryObj<typeof Loading>;
+export declare const Default: Story;

package/dist/base-components/Loading/Loading.types.d.ts

@@ -0,0 +1,6 @@
+import { SVGProps } from 'react';
+export interface LoadingProps extends SVGProps<SVGSVGElement> {
+    show?: boolean;
+    size?: number;
+    color?: string;
+}

package/dist/base-components/Loading/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Loading } from './Loading';
+export type { LoadingProps } from './Loading.types';

package/dist/base-components/Pills/Pills.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PillsProps } from './Pills.types';
+export declare const Pills: React.FC<PillsProps>;
+export default Pills;

package/dist/base-components/Pills/Pills.stories.d.ts

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as Pills } from './Pills';
+declare const meta: Meta<typeof Pills>;
+export default meta;
+type Story = StoryObj<typeof Pills>;
+export declare const Playground: Story;
+export declare const Primary: Story;
+export declare const Success: Story;
+export declare const Danger: Story;
+export declare const Warning: Story;
+export declare const Infor: Story;
+export declare const Neutral: Story;
+export declare const WithIcons: Story;
+export declare const CustomTypography: Story;
+export declare const CustomPadding: Story;

package/dist/base-components/Pills/Pills.types.d.ts

@@ -0,0 +1,11 @@
+import { TypographyVariant } from '../../components/Typography/Typography';
+export type PillsVariant = 'neutral' | 'success' | 'danger' | 'warning' | 'info' | 'primary';
+export interface PillsProps {
+    label: string;
+    variant?: PillsVariant;
+    typography?: TypographyVariant;
+    padding?: string;
+    iconLeft?: React.ReactNode;
+    iconRight?: React.ReactNode;
+    className?: string;
+}

package/dist/base-components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { ProgressBarProps } from './ProgressBar.types';
+export declare const ProgressBar: React.FC<ProgressBarProps>;
+export default ProgressBar;

package/dist/base-components/ProgressBar/ProgressBar.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as ProgressBar } from './ProgressBar';
+declare const meta: Meta<typeof ProgressBar>;
+export default meta;
+type Story = StoryObj<typeof ProgressBar>;
+export declare const Playground: Story;
+export declare const PercentProgress: Story;
+export declare const CustomColorHex: Story;
+export declare const WithoutText: Story;

package/dist/base-components/ProgressBar/ProgressBar.types.d.ts

@@ -0,0 +1,19 @@
+export type ProgressBarType = "percent" | "file";
+export type ProgressBarHeight = "sm" | "md" | "lg";
+export interface ProgressBarProps {
+    type?: ProgressBarType;
+    value: number;
+    max?: number;
+    height?: ProgressBarHeight;
+    color?: keyof typeof colorMap | string;
+    showText?: boolean;
+    className?: string;
+}
+export declare const progressHeights: Record<ProgressBarHeight, string>;
+export declare const colorMap: {
+    brand: string;
+    green: string;
+    red: string;
+    blue: string;
+    neutral: string;
+};

package/dist/base-components/RangeSlider/RangeSlider.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { RangeSliderProps } from './RangeSlider.types';
+export declare const RangeSlider: React.FC<RangeSliderProps>;
+export default RangeSlider;

package/dist/base-components/RangeSlider/RangeSlider.stories.d.ts

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as RangeSlider } from './RangeSlider';
+declare const meta: Meta<typeof RangeSlider>;
+export default meta;
+type Story = StoryObj<typeof RangeSlider>;
+/** Base editável e controlada */
+export declare const Playground: Story;
+/** Sem exibição de valor */
+export declare const WithoutValue: Story;
+/** Diferentes cores e valores */
+export declare const BlueMid: Story;
+export declare const RedHigh: Story;
+export declare const YellowLow: Story;
+export declare const CustomRange: Story;
+/** Caixinha com borda */
+export declare const WithBorder: Story;
+/** Somente número puro */
+export declare const WithoutBorder: Story;

package/dist/base-components/RangeSlider/RangeSlider.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const SliderWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ValueBox: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ValueText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const SliderInput: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
+    percent: number;
+    color: string;
+}>> & string;

package/dist/base-components/RangeSlider/RangeSlider.types.d.ts

@@ -0,0 +1,11 @@
+export type RangeSliderProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    showValue?: boolean;
+    color?: string;
+    hasBorder?: boolean;
+    onChange?: (value: number) => void;
+    className?: string;
+};

package/dist/base-components/Space/Space.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { SpaceProps } from './Space.types';
+export declare const Space: React.FC<SpaceProps>;
+export default Space;

package/dist/base-components/Space/Space.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as Space } from './Space';
+declare const meta: Meta<typeof Space>;
+export default meta;
+type Story = StoryObj<typeof Space>;
+export declare const Playground: Story;
+export declare const AllSpacings: Story;
+export declare const CustomColorHex: Story;
+export declare const CustomWidth: Story;

package/dist/base-components/Space/Space.types.d.ts

@@ -0,0 +1,9 @@
+export type SpaceHeight = "spacing-1" | "spacing-2" | "spacing-4" | "spacing-8" | "spacing-12" | "spacing-16" | "spacing-24" | "spacing-32" | "spacing-40" | "spacing-48" | "spacing-56" | "spacing-64" | "spacing-72" | "spacing-80" | "spacing-104";
+export declare const spaceHeights: Record<SpaceHeight, string>;
+export interface SpaceProps {
+    height?: SpaceHeight;
+    color?: string;
+    width?: string;
+    className?: string;
+    showLabel?: boolean;
+}

package/dist/base-components/SwitchButton/SwitchButton.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { SwitchButtonProps } from './SwitchButton.types';
+export declare const SwitchButton: React.FC<SwitchButtonProps>;
+export default SwitchButton;

package/dist/base-components/SwitchButton/SwitchButton.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as SwitchButton } from './SwitchButton';
+declare const meta: Meta<typeof SwitchButton>;
+export default meta;
+type Story = StoryObj<typeof SwitchButton>;
+export declare const Playground: Story;