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

package/README.md

@@ -0,0 +1,110 @@
+# ⚡️ akku-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.
+
+## ✨ Features
+
+- 🎯 Tailored for Akku ecosystem  
+- ⚡ Lightweight and performant  
+- 🎨 Theming and responsive design support  
+- 🧩 Ready-to-use UI components  
+- 🧪 Powered by TypeScript  
+
+## 📦 Components (v1.0.0)
+
+- `Button`
+- `Input`
+- `Checkbox`
+- `Radio`
+- `Select`
+- `Modal`
+- `Avatar`
+- `Badge`
+- `Tooltip`
+- `Tabs`
+- `Card`
+- `Switch`
+- `Textarea`
+- `Loader`
+- `Alert`
+- `Breadcrumb`
+- `Pagination`
+
+> More components coming in future releases.
+
+## 📥 Installation
+
+```bash
+npm install akku-kit
+```
+
+## 🚀 Usage
+
+```tsx
+import { Button } from 'akku-kit';
+
+export default function App() {
+  return <Button variant="primary">Click Me</Button>;
+}
+```
+
+## 🧪 Run Storybook for Live Preview
+
+```bash
+npm start
+# or
+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:
+
+```bash
+npm version premajor --preid alpha
+npm run build
+npm publish --tag alpha
+```
+
+Next alpha releases:
+
+```bash
+npm version prerelease
+npm run build
+npm publish --tag alpha
+```
+
+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
+```
+
+## 🧑‍💻 Contribution
+
+1. Clone the repo
+2. Run `npm install`
+3. Develop with `npm start`
+4. Submit a PR!
+
+---
+
+License: MIT © 2025 akku-kit Team

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

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

package/dist/components/Tabs/Tabs.d.ts

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

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { StoryObj } from "@storybook/react";
+import Tabs from "./Tabs";
+import { TabsProps } from "./Tabs.types";
+declare const meta: {
+    title: string;
+    component: import("react").FC<TabsProps>;
+    tags: string[];
+    argTypes: {
+        onChange: {
+            action: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+export declare const Default: Story;
+export declare const WithDisabledTab: Story;
+export declare const WithInitialActiveTab: Story;
+export declare const WithMultipleTabs: Story;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export interface TabItem {
+    key: string;
+    label: string;
+    children: React.ReactNode;
+    disabled?: boolean;
+}
+export interface TabsProps {
+    activeKey: string;
+    items: TabItem[];
+    onChange: (key: string) => void;
+}

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

@@ -0,0 +1,2 @@
+export { default } from "./Tabs";
+export type { TabsProps, TabItem } from "./Tabs.types";

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

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

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export type DisplayVariant = "xs-semibold" | "sm-semibold" | "lg-semibold" | "md-semibold";
+export type DisplayVariant = "xs-semibold" | "xs-bold" | "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";

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

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

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+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;
+    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/index.d.ts

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

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

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+import { StoryObj } from "@storybook/react";
+import Label from "./Label";
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("./Label.types").LabelProps>;
+    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";
+            };
+        };
+        required: {
+            control: "boolean";
+        };
+        as: {
+            options: string[];
+            control: {
+                type: "select";
+            };
+        };
+        children: {
+            control: "text";
+        };
+    };
+    args: {
+        variant: "sm-medium";
+        children: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Label>;
+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 RequiredLabel: Story;
+export declare const WithSpanElement: Story;
+export declare const CenterAlignedLabel: Story;
+export declare const SmallMediumRequired: Story;