akku-kit 1.0.0-alpha.8 → 1.0.1-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/svg/TickIcon.d.ts +9 -0
- package/dist/assets/svg/TickIcon.tsx +16 -0
- package/dist/assets/svg/TickWithBgIcon.d.ts +9 -0
- package/dist/assets/svg/TickWithBgIcon.tsx +25 -0
- package/dist/components/Form/MultiSelect/MultiSelect.d.ts +1 -0
- package/dist/components/Form/MultiSelect/MultiSelect.types.d.ts +3 -0
- package/dist/components/Steps/Stepper.d.ts +15 -0
- package/dist/components/Steps/Stepper.types.d.ts +45 -0
- package/dist/components/Typography/Text/Text.d.ts +1 -0
- package/dist/components/Typography/Text/Text.types.d.ts +3 -2
- package/dist/index.cjs.js +7 -7
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.esm.js +6 -6
- package/dist/index.esm.js.map +1 -1
- package/dist/styles/index.css +7 -1
- package/package.json +1 -1
@@ -0,0 +1,16 @@
|
|
1
|
+
interface TickIconProps {
|
2
|
+
size?: number;
|
3
|
+
color?: string;
|
4
|
+
strokeWidth?: number;
|
5
|
+
className?: string;
|
6
|
+
}
|
7
|
+
|
8
|
+
const TickIcon: React.FC<TickIconProps> = ({ size = 24, color = "white", strokeWidth = 2, className = "" }) => {
|
9
|
+
return (
|
10
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
11
|
+
<path d="M16.6663 5L7.49967 14.1667L3.33301 10" stroke="#7F56D9" strokeWidth="1.66667" strokeLinecap="round" strokeLinejoin="round" />
|
12
|
+
</svg>
|
13
|
+
);
|
14
|
+
};
|
15
|
+
|
16
|
+
export default TickIcon;
|
@@ -0,0 +1,25 @@
|
|
1
|
+
|
2
|
+
import React from "react";
|
3
|
+
|
4
|
+
interface TickWithBgIconProps {
|
5
|
+
size?: number;
|
6
|
+
color?: string;
|
7
|
+
strokeWidth?: number;
|
8
|
+
className?: string;
|
9
|
+
}
|
10
|
+
|
11
|
+
const TickWithBgIcon: React.FC<TickWithBgIconProps> = ({ size = 24, color = "white", strokeWidth = 2, className = "" }) => {
|
12
|
+
return (
|
13
|
+
<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none">
|
14
|
+
<rect width="24" height="24" rx="12" fill="#7F56D9" />
|
15
|
+
<path
|
16
|
+
fill-rule="evenodd"
|
17
|
+
clip-rule="evenodd"
|
18
|
+
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"
|
19
|
+
fill="white"
|
20
|
+
/>
|
21
|
+
</svg>
|
22
|
+
);
|
23
|
+
};
|
24
|
+
|
25
|
+
export default TickWithBgIcon;
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import "./Stepper.scss";
|
3
|
+
interface Step {
|
4
|
+
title: string;
|
5
|
+
subtitle: string;
|
6
|
+
icon?: React.ReactNode;
|
7
|
+
}
|
8
|
+
interface StepperProps {
|
9
|
+
steps: Step[];
|
10
|
+
currentStep: number;
|
11
|
+
onChange?: (step: number) => void;
|
12
|
+
isStepValid?: (stepIndex: number) => boolean;
|
13
|
+
}
|
14
|
+
declare const Stepper: React.FC<StepperProps>;
|
15
|
+
export default Stepper;
|
@@ -0,0 +1,45 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
/**
|
3
|
+
* Defines the structure for each step in the Stepper component.
|
4
|
+
*/
|
5
|
+
export interface Step {
|
6
|
+
/**
|
7
|
+
* The main title for the step.
|
8
|
+
*/
|
9
|
+
title: string;
|
10
|
+
/**
|
11
|
+
* A descriptive subtitle for the step.
|
12
|
+
*/
|
13
|
+
subtitle: string;
|
14
|
+
/**
|
15
|
+
* An optional React node to be used as an icon for the step.
|
16
|
+
* If not provided, a number or a checkmark will be displayed.
|
17
|
+
*/
|
18
|
+
icon?: React.ReactNode;
|
19
|
+
}
|
20
|
+
/**
|
21
|
+
* Defines the props for the Stepper component.
|
22
|
+
*/
|
23
|
+
export interface StepperProps {
|
24
|
+
/**
|
25
|
+
* An array of step objects that define the sequence and content of the stepper.
|
26
|
+
*/
|
27
|
+
steps: Step[];
|
28
|
+
/**
|
29
|
+
* The 0-based index of the currently active step.
|
30
|
+
*/
|
31
|
+
currentStep: number;
|
32
|
+
/**
|
33
|
+
* Callback function triggered when a step is clicked.
|
34
|
+
* It receives the new step index as an argument.
|
35
|
+
* @param step The index of the clicked step.
|
36
|
+
*/
|
37
|
+
onChange?: (step: number) => void;
|
38
|
+
/**
|
39
|
+
* Optional function to determine if a step can be navigated to.
|
40
|
+
* If it returns `true`, the step is clickable; otherwise, it's not.
|
41
|
+
* @param stepIndex The index of the step being evaluated for validity.
|
42
|
+
* @returns `true` if the step is valid for navigation, `false` otherwise.
|
43
|
+
*/
|
44
|
+
isStepValid?: (stepIndex: number) => boolean;
|
45
|
+
}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
-
export type TextColor = "primary" | "secondary" | "tertiary" | "brand-600" | "brand-700" | "success" | "white" | "placeholder" | "danger";
|
2
|
+
export type TextColor = "primary" | "secondary" | "tertiary" | "brand-600" | "brand-700" | "success" | "white" | "placeholder" | "danger" | (string);
|
3
3
|
export type TextAlign = "left" | "center" | "right";
|
4
|
-
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";
|
4
|
+
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" | (string);
|
5
5
|
export interface TextProps extends React.HTMLAttributes<HTMLElement> {
|
6
6
|
variant?: TextVariant;
|
7
7
|
color?: TextColor;
|
@@ -10,4 +10,5 @@ export interface TextProps extends React.HTMLAttributes<HTMLElement> {
|
|
10
10
|
className?: string;
|
11
11
|
children: React.ReactNode;
|
12
12
|
as?: React.ElementType;
|
13
|
+
lines?: number;
|
13
14
|
}
|