akku-kit 1.0.0-alpha.0

package/dist/components/Form/TextField/TextField.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { TextFieldProps } from "./TextField.types";
+declare const meta: Meta<TextFieldProps>;
+export default meta;
+type Story = StoryObj<TextFieldProps>;
+export declare const Default: Story;
+export declare const Required: Story;
+export declare const WithPrefixSuffix: Story;
+export declare const WithTooltip: Story;
+export declare const Disabled: Story;
+export declare const WithError: Story;

package/dist/components/Form/TextField/TextField.types.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+export interface TextFieldProps {
+    id?: string;
+    name: string;
+    label?: string;
+    type?: string;
+    value: string;
+    placeholder?: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    error?: string;
+    touched?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    className?: string;
+    [key: string]: any;
+}

package/dist/components/Form/TextField/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './TextField';
+export type { TextFieldProps } from './TextField.types';

package/dist/components/Form/URLField/URLField.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { URLFieldProps } from "./URLField.types";
+export declare const URLField: React.FC<URLFieldProps>;
+export default URLField;

package/dist/components/Form/URLField/URLField.stories.d.ts

@@ -0,0 +1,9 @@
+import { URLField } from "./URLField";
+import type { Meta, StoryObj } from "@storybook/react";
+declare const meta: Meta<typeof URLField>;
+export default meta;
+type Story = StoryObj<typeof URLField>;
+export declare const Default: Story;
+export declare const WithError: Story;
+export declare const WithCheckmark: Story;
+export declare const Disabled: Story;

package/dist/components/Form/URLField/URLField.types.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+export interface URLFieldProps {
+    id: string;
+    name: string;
+    label: string;
+    value: string;
+    className?: string;
+    domain?: string;
+    showCheckmark?: boolean;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    touched?: boolean;
+    prefix?: string;
+    suffix?: string;
+    tooltip?: string;
+    width?: string;
+    [key: string]: any;
+}

package/dist/components/Form/URLField/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './URLField';
+export * from './URLField.types';

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

@@ -0,0 +1,19 @@
+import "../../styles/tailwind.css";
+export { default as TextField } from './TextField';
+export * from './TextField';
+export { default as MultiSelectField } from './MultiSelectField';
+export * from './MultiSelectField';
+export { default as EmailField } from './EmailField';
+export * from './EmailField';
+export { default as URLField } from './URLField';
+export * from './URLField';
+export { default as NumberField } from './NumberField';
+export * from './NumberField';
+export { default as PhoneField } from './PhoneField';
+export * from './PhoneField';
+export { default as TextAreaField } from './TextAreaField';
+export * from './TextAreaField';
+export { default as CheckboxField } from './CheckboxField';
+export * from './CheckboxField';
+export { default as RadioGroupField } from './RadioGroupField';
+export * from './RadioGroupField';

package/dist/components/Input.d.ts

@@ -0,0 +1 @@
+export default function Input(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import './Modal.module.scss';
+import { ModalProps } from './Modal.types';
+declare const Modal: FC<ModalProps>;
+export default Modal;

package/dist/components/Modal/Modal.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Modal from './Modal';
+declare const meta: Meta<typeof Modal>;
+export default meta;
+type Story = StoryObj<typeof Modal>;
+export declare const Default: Story;
+export declare const Centered: Story;
+export declare const NotCentered: Story;
+export declare const MaskClosable: Story;
+export declare const NotDestroyOnClose: Story;
+export declare const CustomContent: Story;
+export declare const WithCustomClassName: Story;

package/dist/components/Modal/Modal.types.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+/**
+ * Defines the props accepted by the Modal component.
+ */
+export interface ModalProps {
+    /**
+     * Controls the visibility of the modal.
+     */
+    isOpen: boolean;
+    /**
+     * Callback function to close the modal.
+     */
+    handleClose: () => void;
+    /**
+     * If true, the modal and its overlay will be unmounted from the DOM when closed.
+     * If false, it will remain in the DOM but hidden.
+     * @default true
+     */
+    destroyOnClose?: boolean;
+    /**
+     * If true, the modal content will be vertically and horizontally centered.
+     * @default true
+     */
+    centered?: boolean;
+    /**
+     * If true, clicking the modal mask (overlay) will close the modal.
+     * @default false
+     */
+    maskClosable?: boolean;
+    /**
+     * Additional CSS class name for the modal overlay.
+     */
+    className?: string;
+    /**
+     * The content to be displayed inside the modal.
+     */
+    children: React.ReactNode;
+    /**
+     * Optional title for the modal. Used for accessibility labeling (aria-labelledby).
+     */
+    title?: React.ReactNode;
+    /**
+     * Optional description for the modal. Used for accessibility labeling (aria-describedby).
+     */
+    description?: React.ReactNode;
+    /**
+     * HTML ID for the modal title element if you want to provide one.
+     * If `title` prop is used and no `titleId` is given, a default ID will be generated.
+     */
+    titleId?: string;
+    /**
+     * HTML ID for the modal description element if you want to provide one.
+     * If `description` prop is used and no `descriptionId` is given, a default ID will be generated.
+     */
+    descriptionId?: string;
+}

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

@@ -0,0 +1,2 @@
+export { default } from './Modal';
+export * from './Modal.types';

package/dist/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,52 @@
+import React, { FC } from 'react';
+interface SkeletonProps {
+    /**
+     * The width of the skeleton. Can be a number (in pixels) or a string (e.g., '100%', '10em').
+     * @default '100%'
+     */
+    width?: number | string;
+    /**
+     * The height of the skeleton. Can be a number (in pixels) or a string (e.g., '20px', '2em').
+     * @default '1em'
+     */
+    height?: number | string;
+    /**
+     * If true, the skeleton will be circular.
+     * @default false
+     */
+    circle?: boolean;
+    /**
+     * The number of skeleton lines/blocks to render.
+     * @default 1
+     */
+    count?: number;
+    /**
+     * The base color of the skeleton.
+     * @default '#eee'
+     */
+    baseColor?: string;
+    /**
+     * The highlight color for the animation.
+     * @default '#f5f5f5'
+     */
+    highlightColor?: string;
+    /**
+     * Additional CSS class name for the skeleton container.
+     */
+    className?: string;
+    /**
+     * Inline style object for the skeleton container.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Type of animation to apply (e.g., 'pulse', 'shimmer').
+     * @default 'shimmer'
+     */
+    animation?: 'shimmer' | 'pulse' | 'none';
+}
+/**
+ * A flexible Skeleton component for displaying loading placeholders.
+ * @param {SkeletonProps} props - The component's props.
+ */
+declare const Skeleton: FC<SkeletonProps>;
+export default Skeleton;

package/dist/components/Skeleton/Skeleton.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Skeleton from './Skeleton';
+declare const meta: Meta<typeof Skeleton>;
+export default meta;
+type Story = StoryObj<typeof Skeleton>;
+export declare const Default: Story;
+export declare const CustomDimensions: Story;
+export declare const MultipleLines: Story;
+export declare const Circle: Story;
+export declare const CustomColorsAndPulse: Story;
+export declare const CardExample: Story;
+export declare const NoAnimation: Story;

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

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

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,8 @@
+import "./style/Table.scss";
+interface TableProps extends Readonly<{
+    [key: string]: any;
+}> {
+    expandableRows?: boolean;
+}
+export default function Table({ columns, data, pagination, setPagination, pageCount, loader, expandableRows }: Readonly<TableProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/components/TableBody.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { Table as ReactTable } from "@tanstack/react-table";
+interface TableBodyContentProps {
+    loader: boolean;
+    table: ReactTable<any>;
+}
+declare const TableBodyContent: React.FC<TableBodyContentProps>;
+export default TableBodyContent;

package/dist/components/Table/components/TableFooter.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { Table as ReactTable } from "@tanstack/react-table";
+interface TableFooterProps {
+    table: ReactTable<any>;
+    pageCount: number;
+}
+declare const TableFooter: React.FC<TableFooterProps>;
+export default TableFooter;

package/dist/components/Table/components/TableHeader.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { HeaderGroup } from "@tanstack/react-table";
+interface TableHeaderProps {
+    headerGroups: HeaderGroup<any>[];
+}
+declare const TableHeader: React.FC<TableHeaderProps>;
+export default TableHeader;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface TooltipProps {
+    title: React.ReactNode;
+    children: React.ReactNode;
+    placement?: "top" | "bottom" | "left" | "right";
+    delay?: number;
+    textColor?: string;
+    backgroundColor?: string;
+}
+declare const Tooltip: React.FC<TooltipProps>;
+export default Tooltip;

package/dist/components/Tooltip/Tooltip.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Tooltip from "./Tooltip";
+declare const meta: Meta<typeof Tooltip>;
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+export declare const Default: Story;
+export declare const BottomPlacement: Story;
+export declare const CustomColors: Story;

package/dist/components/Typography/Display/Display.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { DisplayProps } from "./Display.types";
+declare const Display: React.FC<DisplayProps>;
+export default Display;

package/dist/components/Typography/Display/Display.stories.d.ts

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+import { StoryObj } from "@storybook/react";
+import Display from "./Display";
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("./Display.types").DisplayProps>;
+    tags: string[];
+    argTypes: {
+        variant: {
+            options: ("xs-semibold" | "sm-semibold" | "lg-semibold" | "md-semibold")[];
+            control: {
+                type: "radio";
+            };
+        };
+        color: {
+            options: ("primary" | "secondary" | "success" | "white" | "placeholder" | "tertiary" | "brand-600" | "brand-700")[];
+            control: {
+                type: "select";
+            };
+        };
+        align: {
+            options: ("center" | "left" | "right")[];
+            control: {
+                type: "radio";
+            };
+        };
+        as: {
+            options: string[];
+            control: {
+                type: "select";
+            };
+        };
+        children: {
+            control: "text";
+        };
+    };
+    args: {
+        variant: "lg-semibold";
+        children: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Display>;
+export declare const Default: Story;
+export declare const ExtraSmall: Story;
+export declare const Small: Story;
+export declare const MediumSemiBold: Story;
+export declare const WithSecondaryColor: Story;
+export declare const CenterAligned: Story;
+export declare const AsDivElement: Story;

package/dist/components/Typography/Display/Display.types.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export type DisplayVariant = "xs-semibold" | "sm-semibold" | "lg-semibold" | "md-semibold";
+export type TextColor = "primary" | "secondary" | "tertiary" | "brand-600" | "brand-700" | "success" | "white" | "placeholder";
+export type TextAlign = "left" | "center" | "right";
+export type HeadingElement = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div";
+export interface DisplayProps extends React.HTMLAttributes<HTMLElement> {
+    variant?: DisplayVariant;
+    color?: TextColor;
+    align?: TextAlign;
+    className?: string;
+    children: React.ReactNode;
+    as?: HeadingElement;
+}

package/dist/components/Typography/Display/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Display";
+export type { DisplayProps } from "./Display.types";

package/dist/components/Typography/Text/Text.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TextProps } from "./Text.types";
+declare const Text: React.FC<TextProps>;
+export default Text;

package/dist/components/Typography/Text/Text.stories.d.ts

@@ -0,0 +1,62 @@
+/// <reference types="react" />
+import { StoryObj } from "@storybook/react";
+import Text from "./Text";
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("./Text.types").TextProps>;
+    tags: string[];
+    argTypes: {
+        variant: {
+            options: ("xs-semibold" | "sm-semibold" | "lg-semibold" | "md-semibold" | "xs-medium" | "sm-regular" | "sm-medium" | "md-regular" | "lg-bold" | "xl-semibold" | "xs-regular")[];
+            control: {
+                type: "select";
+            };
+        };
+        color: {
+            options: ("primary" | "secondary" | "success" | "white" | "placeholder" | "tertiary" | "brand-600" | "brand-700")[];
+            control: {
+                type: "select";
+            };
+        };
+        align: {
+            options: ("center" | "left" | "right")[];
+            control: {
+                type: "radio";
+            };
+        };
+        ellipsis: {
+            control: "boolean";
+        };
+        as: {
+            options: string[];
+            control: {
+                type: "select";
+            };
+        };
+        children: {
+            control: "text";
+        };
+    };
+    args: {
+        variant: "md-regular";
+        children: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Text>;
+export declare const Default: Story;
+export declare const ExtraSmallRegular: Story;
+export declare const ExtraSmallMedium: Story;
+export declare const ExtraSmallSemiBold: Story;
+export declare const SmallRegular: Story;
+export declare const SmallSemibold: Story;
+export declare const SmallMedium: Story;
+export declare const MediumRegular: Story;
+export declare const MediumSemibold: Story;
+export declare const LargeSemibold: Story;
+export declare const LargeBold: Story;
+export declare const ExtraLargeSemibold: Story;
+export declare const WithSecondaryColor: Story;
+export declare const CenterAligned: Story;
+export declare const WithEllipsis: Story;
+export declare const AsSpanElement: Story;

package/dist/components/Typography/Text/Text.types.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export type TextColor = "primary" | "secondary" | "tertiary" | "brand-600" | "brand-700" | "success" | "white" | "placeholder";
+export type TextAlign = "left" | "center" | "right";
+export type TextVariant = "xs-medium" | "sm-regular" | "sm-medium" | "sm-semibold" | "md-regular" | "md-semibold" | "lg-semibold" | "lg-bold" | "xs-semibold" | "xl-semibold" | "xs-regular";
+export interface TextProps extends React.HTMLAttributes<HTMLElement> {
+    variant?: TextVariant;
+    color?: TextColor;
+    align?: TextAlign;
+    ellipsis?: boolean;
+    className?: string;
+    children: React.ReactNode;
+    as?: React.ElementType;
+}

package/dist/components/Typography/Text/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Text";
+export type { TextProps } from "./Text.types";