akku-kit 1.0.0-alpha.1 → 1.0.0-alpha.3

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { BadgeProps } from './Badge.types';
+import './Badge.scss';
 /**
  * A versatile Badge component for displaying small, informative labels.
  * It supports different visual variants and sizes.

package/dist/components/FileUploader/CloseIcon.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface CloseIconProps {
+    width?: number;
+    height?: number;
+    color?: string;
+}
+declare const CloseIcon: React.FC<CloseIconProps>;
+export default CloseIcon;

package/dist/components/FileUploader/FileUploader.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import "./FileUploader.scss";
+export interface FileUploaderProps {
+    onFileUpload: (file: File, previewUrl: string | null) => void;
+    acceptedTypes?: string[];
+    maxFileSizeInMB?: number;
+    customDescription?: string;
+    customFileName?: string;
+    className?: string;
+    icon?: React.ReactNode;
+    previewImage?: string;
+    onClear?: () => void;
+}
+declare const FileUploader: React.FC<FileUploaderProps>;
+export default FileUploader;

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

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

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

@@ -0,0 +1 @@
+export { default } from "./FileUploader";

package/dist/components/Time-picker/TimePicker.d.ts

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

package/dist/components/Time-picker/TimePicker.types.d.ts

@@ -0,0 +1,42 @@
+import { HTMLAttributes } from "react";
+export interface TimePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /**
+     * The current time value.
+     */
+    value?: Date | null;
+    /**
+     * Callback function triggered when the time changes.
+     * @param time - The selected Date object or null if cleared.
+     * @param timeString - The formatted time string.
+     */
+    onChange?: (time: Date | null, timeString: string) => void;
+    /**
+     * The format string for displaying the time (e.g., "HH:mm", "hh:mm A", "HH:mm:ss").
+     * Defaults to "HH:mm".
+     */
+    format?: string;
+    /**
+     * Whether to use 12-hour format with AM/PM.
+     * Defaults to false (24-hour format).
+     */
+    use12Hours?: boolean;
+    /**
+     * Placeholder text when no time is selected.
+     * Defaults to "Select time".
+     */
+    placeholder?: string;
+    /**
+     * Whether the time picker is disabled.
+     * Defaults to false.
+     */
+    disabled?: boolean;
+    /**
+     * Additional CSS class names to apply to the component.
+     */
+    className?: string;
+    /**
+     * Explicitly control whether the seconds column is shown, overriding `format` parsing.
+     * Defaults to `format.includes("s")`.
+     */
+    showSeconds?: boolean;
+}

package/dist/components/Time-picker/index.d.ts

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

package/dist/components/ToggleGroup/ToggleGorup.stories.d.ts

@@ -0,0 +1,68 @@
+import { StoryObj } from "@storybook/react";
+import React from "react";
+import ToggleGroup from "./ToggleGroup";
+import { ToggleGroupProps } from "./ToggleGroup.types";
+declare const meta: {
+    title: string;
+    component: React.FC<ToggleGroupProps>;
+    tags: string[];
+    argTypes: {
+        onChange: {
+            action: string;
+            description: string;
+        };
+        name: {
+            control: "text";
+            description: string;
+        };
+        required: {
+            control: "boolean";
+            description: string;
+        };
+        options: {
+            control: "object";
+            description: string;
+        };
+        className: {
+            control: "text";
+            description: string;
+        };
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof ToggleGroup>;
+/**
+ * Default ToggleGroup story demonstrating basic usage.
+ * Users can click options and see the `onChange` action logged.
+ */
+export declare const Default: Story;
+/**
+ * ToggleGroup story with an option initially selected.
+ * This demonstrates how to set an initial selection if the component were to accept a `defaultValue` prop,
+ * or how a parent might manage the initial state if it were a controlled component.
+ *
+ * NOTE: As the current ToggleGroup component uses `useState(null)` internally and doesn't
+ * accept a `value` prop, this story simulates an initial selection by providing a default
+ * value to the `useState` hook within the story's render function.
+ */
+export declare const WithInitialSelection: Story;
+/**
+ * ToggleGroup story demonstrating a disabled option.
+ * The disabled option should not be clickable.
+ */
+export declare const WithDisabledOption: Story;
+/**
+ * ToggleGroup story with a larger set of options.
+ */
+export declare const ManyOptions: Story;
+/**
+ * ToggleGroup story showing the `required` prop (no visual change in this component).
+ */
+export declare const RequiredField: Story;

package/dist/components/ToggleGroup/ToggleGroup.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { ToggleGroupProps } from "./ToggleGroup.types";
+/**
+ * A customizable ToggleGroup component that allows users to select one option
+ * from a predefined set. It manages its own selected state internally.
+ *
+ * @param {ToggleGroupProps} props - The props for the component.
+ * @param {string} props.name - A unique identifier for the toggle group.
+ * @param {boolean} [props.required=false] - If true, indicates the selection is required (no visual effect in this component, but for form logic).
+ * @param {Array<{value: string; label: string; disabled?: boolean}>} props.options - An array of objects defining the toggle options.
+ * @param {string} [props.className=""] - Additional CSS class names for the root element.
+ * @param {(selectedValue: string) => void} [props.onChange] - Optional callback function triggered when an option is selected.
+ */
+declare const ToggleGroup: React.FC<ToggleGroupProps>;
+export default ToggleGroup;

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

@@ -0,0 +1,32 @@
+/**
+ * Props for the ToggleGroup component.
+ */
+export interface ToggleGroupProps {
+    /**
+     * The name of the field.
+     */
+    name: string;
+    /**
+     * Indicates if the field is required.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * An array of options for the toggle group.
+     * Each option requires a `value`, `label`, and an optional `disabled` status.
+     */
+    options: {
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }[];
+    /**
+     * Additional CSS class names to apply to the component's root div.
+     */
+    className?: string;
+    /**
+     * Optional callback function triggered when a toggle option is selected.
+     * @param selectedValue The value of the newly selected option.
+     */
+    onChange?: (selectedValue: string) => void;
+}

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

@@ -7,7 +7,7 @@ declare const meta: {
     tags: string[];
     argTypes: {
         variant: {
-            options: ("xs-semibold" | "xs-bold" | "sm-semibold" | "lg-semibold" | "md-semibold")[];
+            options: ("sm-semibold" | "md-semibold" | "lg-semibold" | "xs-semibold" | "xs-bold")[];
             control: {
                 type: "radio";
             };

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

@@ -1,9 +1,11 @@
 /// <reference types="react" />
+export type LabelColor = "primary" | "secondary" | "tertiary" | "brand-600" | "brand-700" | "success" | "white" | "placeholder";
 export interface LabelProps {
     variant?: "xs-regular" | "xs-medium" | "xs-semibold" | "sm-regular" | "sm-medium" | "sm-semibold" | "md-regular" | "md-semibold" | "lg-semibold" | "lg-bold" | "xl-semibold";
     required?: boolean;
     children: React.ReactNode;
     className?: string;
+    color?: LabelColor;
     as?: React.ElementType;
 }
 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";

package/dist/components/Typography/Label/label.stories.d.ts

@@ -7,7 +7,7 @@ declare const meta: {
     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")[];
+            options: ("xs-medium" | "sm-regular" | "sm-medium" | "sm-semibold" | "md-regular" | "md-semibold" | "lg-semibold" | "lg-bold" | "xs-semibold" | "xl-semibold" | "xs-regular")[];
             control: {
                 type: "select";
             };

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

@@ -7,7 +7,7 @@ declare const meta: {
     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")[];
+            options: ("xs-medium" | "sm-regular" | "sm-medium" | "sm-semibold" | "md-regular" | "md-semibold" | "lg-semibold" | "lg-bold" | "xs-semibold" | "xl-semibold" | "xs-regular")[];
             control: {
                 type: "select";
             };