akku-kit 1.0.0-alpha.6 → 1.0.0-alpha.8

package/README.md

@@ -1,6 +1,9 @@
-# ⚡️ akku-kit
+# ⚡️ Akku-UI-Kit
 
-akku-kit is a modern, TypeScript-based UI framework built specifically for Akku projects. It includes a growing collection of reusable, accessible, and customizable components.
+Akku-UI-Kit is a modern, TypeScript-based UI framework built specifically for Akku projects. It includes a growing collection of reusable, accessible, and customizable components. 
+
+## Akku-UI-Kit [Demo]
+[Akku-UI-Kit](https://akku-kit.vercel.app/)
 
 ## ✨ Features
 
@@ -24,11 +27,7 @@ akku-kit is a modern, TypeScript-based UI framework built specifically for Akku
 - `Tabs`
 - `Card`
 - `Switch`
-- `Textarea`
 - `Loader`
-- `Alert`
-- `Breadcrumb`
-- `Pagination`
 
 > More components coming in future releases.
 
@@ -56,57 +55,15 @@ npm start
 npm run storybook
 ```
 
-## 🔖 Versioning Workflow
-
-- `1.0.0-alpha.0`: First alpha build
-- `1.0.0-alpha.1`: Second alpha build
-- `1.0.0-beta.0`: First beta build
-- `1.0.0-rc.0`: First release candidate
-- `1.0.0`: Final stable release
-
-## 🚚 Prerelease Workflow
 
-Start a prerelease series:
+## 🤝 Contributing
 
-```bash
-npm version premajor --preid alpha
-npm run build
-npm publish --tag alpha
-```
+Contributions are always welcome to the **Akku UI Framework (`Akku-UI-Kit`)** and the main project **`akku`**!
 
-Next alpha releases:
-
-```bash
-npm version prerelease
-npm run build
-npm publish --tag alpha
-npm dist-tag add akku-kit@1.0.0-alpha.2 latest # akku-kit@1.0.0-alpha.2 change to updated version as per package json
-
-```
-
-Promote to beta:
-
-```bash
-npm version prerelease --preid beta
-npm run build
-npm publish --tag beta
-```
-
-Stable release:
-
-```bash
-npm version 2.0.0
-npm run build
-npm publish
-```
+Whether you're fixing bugs, building components, improving styles, or refining documentation—every contribution helps.
 
-## 🧑‍💻 Contribution
+To get started, please read the [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines and best practices.
 
-1. Clone the repo
-2. Run `npm install`
-3. Develop with `npm start`
-4. Submit a PR!
 
----
 
-License: MIT © 2025 akku-kit Team
+License: MIT © 2025 Akku-UI-Kit Team

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,22 @@
+import React, { InputHTMLAttributes } from "react";
+import "./DatePicker.scss";
+interface DayjsLike {
+    _date: Date;
+    isValid: () => boolean;
+    format: (fmt: string) => string;
+    toDate: () => Date;
+    valueOf: () => number;
+    isBefore: (other: DayjsLike | Date) => boolean;
+    isAfter: (other: DayjsLike | Date) => boolean;
+    isSame: (other: DayjsLike | Date) => boolean;
+}
+interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> {
+    value?: DayjsLike | Date | null;
+    onChange?: (date: DayjsLike | null) => void;
+    format?: string;
+    allowClear?: boolean;
+    disabledDate?: (date: DayjsLike) => boolean;
+    suffixIcon?: React.ReactNode;
+}
+declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLInputElement>>;
+export default DatePicker;

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

@@ -0,0 +1,31 @@
+import { FocusEventHandler, ReactNode } from "react";
+export interface DatePickerProps {
+    /** Selected date value */
+    value?: Date | null;
+    /** Callback when date changes */
+    onChange?: (date: Date | null) => void;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Disable the date picker */
+    disabled?: boolean;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Format string for display, e.g. 'MM/dd/yyyy' */
+    dateFormat?: string;
+    /** Whether the input is clearable */
+    isClearable?: boolean;
+    /** Optional CSS class */
+    className?: string;
+    /** Called on input focus */
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    /** Called on input blur */
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    /** Custom render for input element */
+    renderInput?: (props: React.HTMLProps<HTMLInputElement>) => ReactNode;
+    /** Name of the input */
+    name?: string;
+    /** Additional props */
+    [key: string]: any;
+}

package/dist/components/DateRangePicker/DateRangePicker.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import "./DateRangePicker.scss";
+interface DateRangePickerProps {
+    startDate?: Date | null;
+    endDate?: Date | null;
+    onChange: (start: Date | null, end: Date | null) => void;
+}
+declare const DateRangePicker: React.FC<DateRangePickerProps>;
+export default DateRangePicker;

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

@@ -0,0 +1,15 @@
+export interface DateRangePickerProps {
+    /**
+     * The currently selected start date. Can be null if no start date is selected.
+     */
+    startDate?: Date | null;
+    /**
+     * The currently selected end date. Can be null if no end date is selected.
+     */
+    endDate?: Date | null;
+    /**
+     * Callback function triggered when the date range changes.
+     * It receives the new start and end dates as arguments.
+     */
+    onChange: (start: Date | null, end: Date | null) => void;
+}

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

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

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

@@ -1,12 +1,11 @@
 /// <reference types="react" />
 export interface PhoneInputProps {
-    id: string;
     name: string;
     label: string;
     value: string;
     className?: string;
     countryCode?: string;
-    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
     placeholder?: string;
     error?: string;

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

@@ -0,0 +1,13 @@
+import React from "react";
+import "./Modal.scss";
+export interface ModalProps {
+    isOpen: boolean;
+    handleClose: () => void;
+    destroyOnClose?: boolean;
+    centered?: boolean;
+    maskClosable?: boolean;
+    className?: string;
+    children: React.ReactNode;
+}
+declare const Modal: React.FC<ModalProps>;
+export default Modal;

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

@@ -0,0 +1,2 @@
+export { default } from "./Modal";
+export type { ModalProps } from "./Modal";

package/dist/components/Toast/Toast.d.ts

@@ -0,0 +1,7 @@
+import "./Toast.scss";
+import { ToastVariant, ToastPlacement, ToastOptions } from "./Toast.types";
+export declare const triggerNotification: (variant: ToastVariant, title: string, message?: string, placement?: ToastPlacement, options?: Partial<Pick<ToastOptions, "duration" | "closeOnClick" | "pauseOnHover">>) => void;
+export declare const clearAllToasts: () => void;
+export declare const clearToastsByPlacement: (placement: ToastPlacement) => void;
+export declare const destroyToastSystem: () => void;
+export { ToastVariant, ToastPlacement, ToastOptions };

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

@@ -1,10 +1,39 @@
-export type ToastType = "info" | "success" | "error" | "warning";
+export type ToastVariant = "info" | "success" | "warning" | "error";
+export type ToastPlacement = "topLeft" | "topCenter" | "topRight" | "bottomLeft" | "bottomCenter" | "bottomRight";
+/**
+ * Props for triggering a toast notification.
+ */
 export interface ToastOptions {
-    message: string;
-    type?: ToastType;
+    /**
+     * The visual style/type of the toast.
+     */
+    variant: ToastVariant;
+    /**
+     * The main title of the toast notification.
+     */
+    title: string;
+    /**
+     * Optional longer message content for the toast.
+     */
+    message?: string;
+    /**
+     * The position where the toast will appear on the screen.
+     * @default "topRight"
+     */
+    placement?: ToastPlacement;
+    /**
+     * How long the toast should remain visible in milliseconds. Set to 0 for infinite duration.
+     * @default 4000 (4 seconds)
+     */
     duration?: number;
+    /**
+     * If true, the toast will close when clicked.
+     * @default true
+     */
     closeOnClick?: boolean;
+    /**
+     * If true, the toast timer will pause when the mouse hovers over it.
+     * @default true
+     */
     pauseOnHover?: boolean;
-    showIcon?: boolean;
-    position?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
 }

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

@@ -7,5 +7,6 @@ export interface LabelProps {
     className?: string;
     color?: LabelColor;
     as?: React.ElementType;
+    htmlFor?: string;
 }
 export type LabelVariant = "xs-regular" | "xs-medium" | "xs-semibold" | "sm-regular" | "sm-medium" | "sm-semibold" | "md-regular" | "md-semibold" | "lg-semibold" | "lg-bold" | "xl-semibold";