akku-kit 1.0.0-alpha.7 → 1.0.0-alpha.9

package/README.md

@@ -1,9 +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-kit [Demo]
-[Akku-kit](https://akku-kit.vercel.app/)
+## Akku-UI-Kit [Demo]
+[Akku-UI-Kit](https://akku-kit.vercel.app/)
 
 ## ✨ Features
 
@@ -58,7 +58,7 @@ npm run storybook
 
 ## 🤝 Contributing
 
-Contributions are always welcome to the **Akku UI Framework (`akku-kit`)** and the main project **`akku`**!
+Contributions are always welcome to the **Akku UI Framework (`Akku-UI-Kit`)** and the main project **`akku`**!
 
 Whether you're fixing bugs, building components, improving styles, or refining documentation—every contribution helps.
 
@@ -66,4 +66,4 @@ To get started, please read the [CONTRIBUTING.md](./CONTRIBUTING.md) for guideli
 
 
 
-License: MIT © 2025 akku-kit Team
+License: MIT © 2025 Akku-UI-Kit Team

package/dist/assets/svg/TickWithBgIcon.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface TickWithBgIconProps {
+    size?: number;
+    color?: string;
+    strokeWidth?: number;
+    className?: string;
+}
+declare const TickWithBgIcon: React.FC<TickWithBgIconProps>;
+export default TickWithBgIcon;

package/dist/assets/svg/TickWithBgIcon.tsx

@@ -0,0 +1,25 @@
+
+import React from "react";
+
+interface TickWithBgIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+  className?: string;
+}
+
+const TickWithBgIcon: React.FC<TickWithBgIconProps> = ({ size = 24, color = "white", strokeWidth = 2, className = "" }) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <rect width="24" height="24" rx="12" fill="#7F56D9" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M17.096 7.39016L9.93602 14.3002L8.03602 12.2702C7.68602 11.9402 7.13602 11.9202 6.73602 12.2002C6.34602 12.4902 6.23602 13.0002 6.47602 13.4102L8.72602 17.0702C8.94602 17.4102 9.32601 17.6202 9.75601 17.6202C10.166 17.6202 10.556 17.4102 10.776 17.0702C11.136 16.6002 18.006 8.41016 18.006 8.41016C18.906 7.49016 17.816 6.68016 17.096 7.38016V7.39016Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
+
+export default TickWithBgIcon;

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/Steps/Stepper.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import "./Stepper.scss";
+interface Step {
+    title: string;
+    subtitle: string;
+    icon?: React.ReactNode;
+}
+interface StepperProps {
+    steps: Step[];
+    currentStep: number;
+    onChange?: (step: number) => void;
+    isStepValid?: (stepIndex: number) => boolean;
+}
+declare const Stepper: React.FC<StepperProps>;
+export default Stepper;

package/dist/components/Steps/Stepper.types.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+/**
+ * Defines the structure for each step in the Stepper component.
+ */
+export interface Step {
+    /**
+     * The main title for the step.
+     */
+    title: string;
+    /**
+     * A descriptive subtitle for the step.
+     */
+    subtitle: string;
+    /**
+     * An optional React node to be used as an icon for the step.
+     * If not provided, a number or a checkmark will be displayed.
+     */
+    icon?: React.ReactNode;
+}
+/**
+ * Defines the props for the Stepper component.
+ */
+export interface StepperProps {
+    /**
+     * An array of step objects that define the sequence and content of the stepper.
+     */
+    steps: Step[];
+    /**
+     * The 0-based index of the currently active step.
+     */
+    currentStep: number;
+    /**
+     * Callback function triggered when a step is clicked.
+     * It receives the new step index as an argument.
+     * @param step The index of the clicked step.
+     */
+    onChange?: (step: number) => void;
+    /**
+     * Optional function to determine if a step can be navigated to.
+     * If it returns `true`, the step is clickable; otherwise, it's not.
+     * @param stepIndex The index of the step being evaluated for validity.
+     * @returns `true` if the step is valid for navigation, `false` otherwise.
+     */
+    isStepValid?: (stepIndex: number) => boolean;
+}

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export type TextColor = "primary" | "secondary" | "tertiary" | "brand-600" | "brand-700" | "success" | "white" | "placeholder" | "danger";
 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 type TextVariant = "xs-medium" | "sm-regular" | "sm-medium" | "sm-semibold" | "md-regular" | "md-semibold" | "lg-semibold" | "lg-regular" | "lg-bold" | "xs-semibold" | "xl-semibold" | "xs-regular";
 export interface TextProps extends React.HTMLAttributes<HTMLElement> {
     variant?: TextVariant;
     color?: TextColor;