@soppiya/elementus 1.0.0 → 1.0.2

package/README.md

@@ -1,64 +1,69 @@
-# Elementus
-
-Soppiya has introduced Elementus, a design system that fulfill to the needs of third-party designers and developers. This system empowers Soppiya customers to design apps and websites in a way that suits their preferences and requirements.
-
-## Author
-
-Soppiya
-
-## Contributing
-
-Elementus React is Soppiya’s newly active open source design sytem. It’s the only project that’s both under very active development and is used to build Soppiya. We want to make it easy as possible as to contribute.
-
-## Documentation
-
-Introduction
-
-Elementus Design System integration guide for third-party developers. This document is designed to help you understand how to seamlessly incorporate Elementus, Soppiya's comprehensive design system, into your projects.
-
-Purpose
-
-The Elementus Design System is a collection of design guidelines, components, and resources that foster consistency, usability, and aesthetic coherence across Soppiya's digital products. By integrating Elementus, you can ensure that your application maintains a high level of visual and functional harmony with Soppiya's ecosystem.
-
-Key Features
-
-Consistency: Leverage Elementus's standardized design components for a unified user experience.
-Efficiency: Accelerate development by utilizing pre-designed UI elements.
-Quality: Benefit from the design system's thorough testing and optimization.
-Scalability: Design elements are adaptable to various screen sizes and resolutions.
-
-Support and Resources
-
-For assistance and guidance, utilize Soppiya's support channels, community forums, and additional resources related to Elementus integration. Collaborate with fellow developers to share insights and solutions.
-
-Conclusion
-
-Integrating the Elementus Design System into your third-party project can elevate its design quality, user experience, and overall appeal. By following the integration guidelines and leveraging its components, you'll create a product that resonates with users and aligns seamlessly with Soppiya's ecosystem.
-
-## Installation
-
-```sh
-npm install @soppiya/elementus
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      ...tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      ...tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      ...tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
 ```
 
-> **_note:_** It's now in development mode.
-
-## License
-
-Source code is under a custom license based on MIT. The license restricts Elementus usage to applications that integrate or interoperate with Soppiya cms or services, with additional restrictions for external, stand-alone applications.
-
-## FAQ
-
-#### What is Elementus?
-
-Elementus is soppiy's design system.
-
-#### Why use it?
-
-use it to design application in a way that suits your preferences and requirements.
-
-## Used By
-
-This project is used by all coustomers of Soppiya.
-
-![Logo](https://soppiya.com/media/assets/soppiya.png)
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/dist/assets/icons/backIcon/BackIcon.d.ts

@@ -0,0 +1,2 @@
+declare const BackIcon: () => import("react/jsx-runtime").JSX.Element;
+export default BackIcon;

package/dist/assets/icons/backIcon/index.d.ts

@@ -0,0 +1 @@
+export { default as BackIcon } from './BackIcon';

package/dist/assets/icons/calenderIcon/CalenderIcon.d.ts

@@ -0,0 +1,4 @@
+interface Props extends React.ComponentProps<"svg"> {
+}
+declare const CalenderIcon: ({ fill, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default CalenderIcon;

package/dist/assets/icons/calenderIcon/index.d.ts

@@ -0,0 +1 @@
+export { default as CalenderIcon } from './CalenderIcon';

package/dist/assets/icons/crossCircleIcon/CrossCircleIcon.d.ts

@@ -0,0 +1,2 @@
+declare const CrossCircleIcon: () => import("react/jsx-runtime").JSX.Element;
+export default CrossCircleIcon;

package/dist/assets/icons/crossCircleIcon/index.d.ts

@@ -0,0 +1 @@
+export { default as CrossCircleIcon } from './CrossCircleIcon';

package/dist/assets/icons/crossLineIcon/CrossLineIcon.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface Props extends React.ComponentProps<'svg'> {
+    color?: string;
+}
+declare const CrossLineIcon: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default CrossLineIcon;

package/dist/assets/icons/crossLineIcon/index.d.ts

@@ -0,0 +1 @@
+export { default as CrossLineIcon } from './CrossLineIcon';

package/dist/assets/icons/exceptionIcon/ExceptionIcon.d.ts

@@ -0,0 +1,6 @@
+interface ExceptionIconProps extends React.ComponentProps<"svg"> {
+    variant?: "success" | "info" | "warning" | "danger";
+    color?: string;
+}
+declare const ExceptionIcon: import('react').ForwardRefExoticComponent<Omit<ExceptionIconProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+export default ExceptionIcon;

package/dist/assets/icons/exceptionIcon/index.d.ts

@@ -0,0 +1 @@
+export { default as ExceptionIcon } from './ExceptionIcon';

package/dist/assets/icons/exclamationIcon/ExclamationIcon.d.ts

@@ -0,0 +1,5 @@
+interface ExclamationIconProps extends React.ComponentProps<'svg'> {
+    variant?: "circle" | "diamond";
+}
+declare const ExclamationIcon: import('react').ForwardRefExoticComponent<Omit<ExclamationIconProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+export default ExclamationIcon;

package/dist/assets/icons/exclamationIcon/index.d.ts

@@ -0,0 +1 @@
+export { default, default as ExclamationIcon } from './ExclamationIcon';

package/dist/assets/icons/eyeIcon/EyeIcon.d.ts

@@ -0,0 +1,5 @@
+export interface EyeIconProps {
+    visible: boolean;
+}
+declare const EyeIcon: React.FC<EyeIconProps>;
+export default EyeIcon;

package/dist/assets/icons/eyeIcon/index.d.ts

@@ -0,0 +1 @@
+export { default as EyeIcon } from './EyeIcon';

package/dist/assets/icons/fiveZeroZeroIcon/FiveZeroZeroIcon.d.ts

@@ -0,0 +1,2 @@
+declare const FiveZeroZeroIcon: () => import("react/jsx-runtime").JSX.Element;
+export default FiveZeroZeroIcon;

package/dist/assets/icons/fiveZeroZeroIcon/index.d.ts

@@ -0,0 +1 @@
+export { default as FiveZeroZeroIcon } from './FiveZeroZeroIcon';

package/dist/assets/icons/fourZeroFourIcon/FourZeroFourIcon.d.ts

@@ -0,0 +1,2 @@
+declare const FourZeroFourIcon: () => import("react/jsx-runtime").JSX.Element;
+export default FourZeroFourIcon;

package/dist/assets/icons/fourZeroFourIcon/index.d.ts

@@ -0,0 +1 @@
+export { default as FourZeroFourIcon } from './FourZeroFourIcon';

package/dist/assets/icons/index.d.ts

@@ -1,22 +1,17 @@
-export * from "./SortingIcon";
-export * from "./checkCircle";
-export * from "./cross";
-export * from "./crossLine";
-export * from "./dotsIcon";
-export * from "./downFillArrow";
-export * from "./error";
-export * from "./eye";
-export * from "./filterIcon";
-export * from "./gridViewIcon";
-export * from "./iconPlusCircle";
-export * from "./info";
-export * from "./key";
-export * from "./leftArrowIcon";
-export * from "./listViewIcon";
-export * from "./loaderCircleIcon";
-export * from "./notVerified";
-export * from "./rightArrowIcon";
-export * from "./search";
-export * from "./uploadIcon";
-export * from "./verified";
-export * from "./warning";
+export { BackIcon } from './backIcon';
+export { CalenderIcon } from './calenderIcon';
+export { CrossCircleIcon } from './crossCircleIcon';
+export { CrossLineIcon } from './crossLineIcon';
+export { ExceptionIcon } from './exceptionIcon';
+export { ExclamationIcon } from './exclamationIcon';
+export { EyeIcon } from './eyeIcon';
+export { FiveZeroZeroIcon } from './fiveZeroZeroIcon';
+export { FourZeroFourIcon } from './fourZeroFourIcon';
+export { LineArrowIcon } from './lineArrowIcon';
+export { LockIcon } from './lockIcon';
+export { NotVerifyIcon } from './notVerifyIcon';
+export { SearchIcon } from './searchIcon';
+export { SelectArrowIcon } from './selectArrowIcon';
+export { StepperIcon } from './stepperIcon';
+export { VerifiedIcon } from './verifiedIcon';
+export { WarningIcon } from './warningIcon';

package/dist/assets/icons/lineArrowIcon/LineArrowIcon.d.ts

@@ -0,0 +1,2 @@
+declare const LineArrowIcon: () => import("react/jsx-runtime").JSX.Element;
+export default LineArrowIcon;

package/dist/assets/icons/lineArrowIcon/index.d.ts

@@ -0,0 +1 @@
+export { default as LineArrowIcon } from './LineArrowIcon';

package/dist/assets/icons/lockIcon/LockIcon.d.ts

@@ -0,0 +1,2 @@
+declare const LockIcon: () => import("react/jsx-runtime").JSX.Element;
+export default LockIcon;

package/dist/assets/icons/lockIcon/index.d.ts

@@ -0,0 +1 @@
+export { default as LockIcon } from './LockIcon';

package/dist/assets/icons/notVerifyIcon/NotVerifyIcon.d.ts

@@ -0,0 +1,2 @@
+declare const NotVerifiedIcon: () => import("react/jsx-runtime").JSX.Element;
+export default NotVerifiedIcon;

package/dist/assets/icons/notVerifyIcon/index.d.ts

@@ -0,0 +1 @@
+export { default as NotVerifyIcon } from './NotVerifyIcon';

package/dist/assets/icons/{search → searchIcon}/SearchIcon.d.ts

@@ -1,3 +1,2 @@
-import React from "react";
 declare const SearchIcon: React.FC;
 export default SearchIcon;

package/dist/assets/icons/searchIcon/index.d.ts

@@ -0,0 +1 @@
+export { default as SearchIcon } from './SearchIcon';

package/dist/assets/icons/selectArrowIcon/SelectArrowIcon.d.ts

@@ -0,0 +1,2 @@
+declare const SelectArrowIcon: () => import("react/jsx-runtime").JSX.Element;
+export default SelectArrowIcon;

package/dist/assets/icons/selectArrowIcon/index.d.ts

@@ -0,0 +1 @@
+export { default as SelectArrowIcon } from './SelectArrowIcon';

package/dist/assets/icons/stepperIcon/StepperIcon.d.ts

@@ -0,0 +1,2 @@
+declare const StepperIcon: () => import("react/jsx-runtime").JSX.Element;
+export default StepperIcon;

package/dist/assets/icons/stepperIcon/index.d.ts

@@ -0,0 +1 @@
+export { default as StepperIcon } from './StepperIcon';

package/dist/assets/icons/verifiedIcon/VerifiedIcon.d.ts

@@ -0,0 +1,2 @@
+declare const VerifiedIcon: () => import("react/jsx-runtime").JSX.Element;
+export default VerifiedIcon;

package/dist/assets/icons/verifiedIcon/index.d.ts

@@ -0,0 +1 @@
+export { default as VerifiedIcon } from './VerifiedIcon';

package/dist/assets/icons/warningIcon/WarningIcon.d.ts

@@ -0,0 +1,2 @@
+declare const WarningIcon: () => import("react/jsx-runtime").JSX.Element;
+export default WarningIcon;

package/dist/assets/icons/warningIcon/index.d.ts

@@ -0,0 +1 @@
+export { default as WarningIcon } from './WarningIcon';

package/dist/components/accordion/Accordion.d.ts

@@ -0,0 +1,63 @@
+import { default as React, ReactNode } from 'react';
+import { BorderStyleProps, BorderWidthProps, ColorProps, RadiusProps, ResponsiveBackgroundProps, ResponsiveBorderStyleProps, ResponsiveBorderWidthProps, ResponsiveRadiusSideProps, ResponsiveSideProps } from '../../utils/types/types';
+/*************************
+ * Accordion content props
+ *************************/
+interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    className?: string;
+    open?: boolean;
+    padding?: ResponsiveSideProps;
+}
+/*************************
+ * Accordion props
+ *************************/
+interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    className?: string;
+    groupIndex?: number;
+    defaultOpen?: boolean;
+    toggleFromGroup?: () => void;
+    duration?: number;
+    padding?: ResponsiveSideProps;
+}
+/*************************
+ * Accordion header props
+ *************************/
+interface AccordionHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    className?: string;
+    padding?: ResponsiveSideProps;
+}
+/*************************
+ * Accordion header
+ *************************/
+declare const Header: React.ForwardRefExoticComponent<AccordionHeaderProps & React.RefAttributes<HTMLDivElement>>;
+/*************************
+ * Accordion content
+ *************************/
+declare const Content: React.ForwardRefExoticComponent<AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
+/*************************
+ * Accordion group props
+ *************************/
+interface AccordionGroupProps {
+    children?: ReactNode;
+    defaultOpenIndex?: number;
+    duration?: number;
+    isArrow?: boolean;
+    border?: boolean;
+    borderColor?: ResponsiveBackgroundProps | ColorProps;
+    borderWidth?: ResponsiveBorderWidthProps | BorderWidthProps;
+    borderStyle?: ResponsiveBorderStyleProps | BorderStyleProps;
+    radius?: RadiusProps | ResponsiveRadiusSideProps;
+}
+/*************************
+ * Accordion group
+ *************************/
+export declare const AccordionGroup: ({ children, defaultOpenIndex, duration, border, borderColor, borderStyle, borderWidth, radius, isArrow }: AccordionGroupProps) => import("react/jsx-runtime").JSX.Element;
+type AccordionComponent = React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>> & {
+    Header: typeof Header;
+    Content: typeof Content;
+};
+declare const _default: AccordionComponent;
+export default _default;

package/dist/components/accordion/Accordion.stories.d.ts

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

package/dist/components/accordion/index.d.ts

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

package/dist/components/animatedBar/AnimatedBar.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+type Sizes = "xs" | "sm" | "md";
+export interface AnimatedBarProps extends React.ComponentProps<'div'> {
+    size?: {
+        xs?: Sizes;
+        sm?: Sizes;
+        md?: Sizes;
+    } | Sizes;
+    position?: "top" | "bottom";
+}
+declare const AnimatedBar: React.ForwardRefExoticComponent<Omit<AnimatedBarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default AnimatedBar;

package/dist/components/animatedBar/AnimatedBar.stories.d.ts

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react-vite';
+import { default as AnimatedBar } from './AnimatedBar';
+declare const meta: {
+    component: import('react').ForwardRefExoticComponent<Omit<import('./AnimatedBar').AnimatedBarProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    title: string;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {};
+    args: {
+        onClick: import('storybook/internal/test').Mock<(...args: any[]) => any>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof AnimatedBar>;
+export declare const Default: Story;

package/dist/components/animatedBar/index.d.ts

@@ -0,0 +1 @@
+export { default as AnimatedBar } from './AnimatedBar';

package/dist/components/appError/AppError.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+type ErrorStatus = "server" | "404" | "permission" | "internal";
+interface AppErrorProps extends Omit<React.ComponentProps<"div">, "title"> {
+    extra?: React.ReactNode;
+    icon?: React.ReactNode;
+    title?: React.ReactNode;
+    subTitle?: React.ReactNode;
+    status?: ErrorStatus;
+}
+declare const AppError: React.ForwardRefExoticComponent<Omit<AppErrorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default AppError;

package/dist/components/appError/AppError.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { default as AppError } from './AppError';
+declare const meta: Meta<any>;
+export default meta;
+type Story = StoryObj<typeof AppError>;
+export declare const Default: Story;
+export declare const Error404: Story;
+export declare const ServerError: Story;
+export declare const Permission: Story;
+export declare const InternalError: Story;

package/dist/components/appError/index.d.ts

@@ -0,0 +1 @@
+export { default as AppError } from './AppError';

package/dist/components/badge/Badge.d.ts

@@ -0,0 +1,6 @@
+export interface Props extends React.ComponentProps<'span'> {
+    variant?: 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+    children?: React.ReactNode;
+}
+declare const Badge: import('react').ForwardRefExoticComponent<Omit<Props, "ref"> & import('react').RefAttributes<HTMLElement>>;
+export default Badge;

package/dist/components/badge/Badge.stories.d.ts

@@ -0,0 +1,21 @@
+import { StoryObj } from '@storybook/react-vite';
+import { default as Badge } from './Badge';
+declare const meta: {
+    component: import('react').ForwardRefExoticComponent<Omit<import('./Badge').Props, "ref"> & import('react').RefAttributes<HTMLElement>>;
+    title: string;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {};
+    args: {
+        onClick: import('storybook/internal/test').Mock<(...args: any[]) => any>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Badge>;
+export declare const Neutral: Story;
+export declare const Info: Story;
+export declare const Success: Story;
+export declare const Warning: Story;
+export declare const Danger: Story;

package/dist/components/badge/index.d.ts

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

package/dist/components/banner/Banner.d.ts

@@ -0,0 +1,21 @@
+import { RadiusProps, ResponsiveRadiusSideProps } from '../../utils/types/types';
+import { default as React } from 'react';
+/*************************
+ * Component props
+ *************************/
+type BannerVariant = 'success' | 'info' | 'warning' | 'danger';
+export interface BannerProps extends React.ComponentProps<'div'> {
+    children?: React.ReactNode;
+    actions?: React.ReactNode;
+    title?: string;
+    hideIcon?: boolean;
+    icon?: React.ReactNode;
+    variant?: BannerVariant;
+    radius?: RadiusProps | ResponsiveRadiusSideProps;
+    onClose?: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+/*************************
+ * Main Component
+ *************************/
+declare const Banner: React.NamedExoticComponent<Omit<BannerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default Banner;

package/dist/components/banner/Banner.stories.d.ts

@@ -0,0 +1,20 @@
+import { StoryObj } from '@storybook/react-vite';
+import { default as Banner } from './Banner';
+declare const meta: {
+    title: string;
+    component: import('react').NamedExoticComponent<Omit<import('./Banner').BannerProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {};
+    args: {
+        onClick: import('storybook/internal/test').Mock<(...args: any[]) => any>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Banner>;
+export declare const Default: Story;
+export declare const Success: Story;
+export declare const Info: Story;
+export declare const Warning: Story;

package/dist/components/banner/index.d.ts

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

package/dist/components/blockStack/BlockStack.d.ts

@@ -0,0 +1,34 @@
+import { AlignContentProps, AlignItemsProps, AllowedElementsProps, AxisOverflowProps, BorderStyleProps, BorderWidthProps, ColorProps, JustifyContentProps, JustifyItemsProps, JustifySelfProps, OrderProps, OverflowProps, PositionDirectionProps, PositionProps, RadiusProps, ResponsiveAlignContentProps, ResponsiveAlignItemsProps, ResponsiveBackgroundProps, ResponsiveBorderStyleProps, ResponsiveBorderWidthProps, ResponsiveGapProps, ResponsiveGapXProps, ResponsiveGapYProps, ResponsiveJustifyContentProps, ResponsiveJustifyItemsProps, ResponsiveJustifySelfProps, ResponsiveOrderProps, ResponsivePositionDirectionProps, ResponsivePositionProps, ResponsiveRadiusSideProps, ResponsiveShadowProps, ResponsiveSideProps, ShadowProps, SpaceProps } from '../../utils/types/types';
+/*************************
+ * Component Props
+ *************************/
+export interface BlockStackProps extends React.ComponentProps<"div"> {
+    children?: React.ReactNode;
+    as?: AllowedElementsProps;
+    background?: ResponsiveBackgroundProps | ColorProps;
+    shadow?: ResponsiveShadowProps | ShadowProps;
+    gap?: ResponsiveGapProps | SpaceProps;
+    gapX?: ResponsiveGapXProps | SpaceProps;
+    gapY?: ResponsiveGapYProps | SpaceProps;
+    justifyContent?: ResponsiveJustifyContentProps | JustifyContentProps;
+    alignItems?: ResponsiveAlignItemsProps | AlignItemsProps;
+    justifyItems?: ResponsiveJustifyItemsProps | JustifyItemsProps;
+    justifySelf?: ResponsiveJustifySelfProps | JustifySelfProps;
+    alignContent?: ResponsiveAlignContentProps | AlignContentProps;
+    order?: ResponsiveOrderProps | OrderProps;
+    padding?: ResponsiveSideProps;
+    border?: boolean;
+    borderColor?: ResponsiveBackgroundProps | ColorProps;
+    borderWidth?: ResponsiveBorderWidthProps | BorderWidthProps;
+    borderStyle?: ResponsiveBorderStyleProps | BorderStyleProps;
+    radius?: RadiusProps | ResponsiveRadiusSideProps;
+    overflow?: AxisOverflowProps | OverflowProps;
+    position?: ResponsivePositionProps | PositionProps;
+    zIndex?: string;
+    left?: ResponsivePositionDirectionProps | PositionDirectionProps;
+    right?: ResponsivePositionDirectionProps | PositionDirectionProps;
+    top?: ResponsivePositionDirectionProps | PositionDirectionProps;
+    bottom?: ResponsivePositionDirectionProps | PositionDirectionProps;
+}
+declare const BlockStack: import('react').ForwardRefExoticComponent<Omit<BlockStackProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export default BlockStack;

package/dist/components/blockStack/BlockStack.stories.d.ts

@@ -0,0 +1,20 @@
+import { StoryObj } from '@storybook/react-vite';
+import { default as BlockStack } from './BlockStack';
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<Omit<import('./BlockStack').BlockStackProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {};
+    args: {
+        onClick: import('storybook/internal/test').Mock<(...args: any[]) => any>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof BlockStack>;
+export declare const Default: Story;
+export declare const Shadow: Story;
+export declare const Background: Story;
+export declare const Gap: Story;

package/dist/components/blockStack/index.d.ts

@@ -0,0 +1 @@
+export { default as BlockStack } from './BlockStack';