@adam-milo/ui 1.0.32 → 1.0.34
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/index.cjs +1 -1
- package/dist/index.js +58 -22
- package/dist/index10.cjs +1 -1
- package/dist/index10.js +94 -56
- package/dist/index11.cjs +1 -1
- package/dist/index11.js +199 -40
- package/dist/index12.cjs +1 -1
- package/dist/index12.js +305 -105
- package/dist/index13.cjs +1 -1
- package/dist/index13.js +260 -74
- package/dist/index14.cjs +1 -1
- package/dist/index14.js +135 -27
- package/dist/index15.cjs +1 -1
- package/dist/index15.js +52 -469
- package/dist/index16.cjs +1 -1
- package/dist/index16.js +57 -111
- package/dist/index17.cjs +1 -1
- package/dist/index17.js +101 -20
- package/dist/index18.cjs +1 -1
- package/dist/index18.js +76 -21
- package/dist/index19.cjs +1 -1
- package/dist/index19.js +25 -29
- package/dist/index2.cjs +1 -1
- package/dist/index2.js +6 -4
- package/dist/index20.cjs +1 -1
- package/dist/index20.js +468 -31
- package/dist/index21.cjs +1 -1
- package/dist/index21.js +155 -41
- package/dist/index22.cjs +1 -1
- package/dist/index22.js +42 -12
- package/dist/index23.cjs +1 -0
- package/dist/index23.js +38 -0
- package/dist/index24.cjs +1 -1
- package/dist/index24.js +32 -287
- package/dist/index25.cjs +1 -1
- package/dist/index25.js +115 -13
- package/dist/index26.cjs +1 -0
- package/dist/index26.js +55 -0
- package/dist/index27.cjs +1 -0
- package/dist/index27.js +45 -0
- package/dist/index28.cjs +1 -0
- package/dist/index28.js +53 -0
- package/dist/index29.cjs +1 -0
- package/dist/index29.js +55 -0
- package/dist/index3.cjs +1 -1
- package/dist/index3.js +33 -33
- package/dist/index30.cjs +1 -0
- package/dist/index30.js +72 -0
- package/dist/index31.cjs +1 -0
- package/dist/index31.js +14 -0
- package/dist/index32.cjs +1 -0
- package/dist/index32.js +332 -0
- package/dist/index36.cjs +1 -0
- package/dist/index36.js +386 -0
- package/dist/index37.cjs +1 -0
- package/dist/index37.js +16 -0
- package/dist/index4.cjs +1 -1
- package/dist/index4.js +59 -11
- package/dist/index5.cjs +1 -1
- package/dist/index5.js +19 -35
- package/dist/index6.cjs +1 -1
- package/dist/index6.js +11 -101
- package/dist/index62.cjs +1 -0
- package/dist/index62.js +502 -0
- package/dist/index64.cjs +1 -0
- package/dist/index64.js +11 -0
- package/dist/index65.cjs +1 -0
- package/dist/index65.js +39 -0
- package/dist/index66.cjs +1 -0
- package/dist/index66.js +64 -0
- package/dist/index67.cjs +1 -0
- package/dist/index67.js +212 -0
- package/dist/index68.cjs +1 -0
- package/dist/index68.js +14 -0
- package/dist/index69.cjs +1 -0
- package/dist/index69.js +293 -0
- package/dist/index7.cjs +1 -1
- package/dist/index7.js +46 -97
- package/dist/index70.cjs +1 -0
- package/dist/index70.js +18 -0
- package/dist/index71.cjs +1 -0
- package/dist/index71.js +129 -0
- package/dist/index72.cjs +1 -0
- package/dist/index72.js +43 -0
- package/dist/index73.cjs +1 -0
- package/dist/index73.js +99 -0
- package/dist/index74.cjs +1 -0
- package/dist/index74.js +71 -0
- package/dist/index75.cjs +1 -0
- package/dist/index75.js +36 -0
- package/dist/index76.cjs +1 -0
- package/dist/index76.js +14 -0
- package/dist/index77.cjs +1 -0
- package/dist/index77.js +17 -0
- package/dist/index78.cjs +1 -0
- package/dist/index78.js +6 -0
- package/dist/index79.cjs +1 -0
- package/dist/index79.js +297 -0
- package/dist/index8.cjs +1 -1
- package/dist/index8.js +97 -88
- package/dist/index80.cjs +1 -0
- package/dist/index80.js +25 -0
- package/dist/index81.cjs +1 -0
- package/dist/index81.js +39 -0
- package/dist/index82.cjs +1 -0
- package/dist/index82.js +625 -0
- package/dist/index83.cjs +1 -0
- package/dist/index83.js +721 -0
- package/dist/index84.cjs +1 -0
- package/dist/index84.js +154 -0
- package/dist/index85.cjs +1 -0
- package/dist/index85.js +173 -0
- package/dist/index9.cjs +1 -1
- package/dist/index9.js +55 -197
- package/dist/src/components/core/button/Button.component.d.ts +13 -7
- package/dist/src/components/core/button/Button.component.d.ts.map +1 -1
- package/dist/src/components/core/icon/Icon.component.d.ts +1 -1
- package/dist/src/components/core/icon/Icon.component.d.ts.map +1 -1
- package/dist/src/components/core/icon-button/IconButton.component.d.ts +36 -0
- package/dist/src/components/core/icon-button/IconButton.component.d.ts.map +1 -0
- package/dist/src/components/core/menu-icon-button/MenuIconButton.component.d.ts +79 -0
- package/dist/src/components/core/menu-icon-button/MenuIconButton.component.d.ts.map +1 -0
- package/dist/src/components/feedback/spinner/Spinner.component.d.ts +62 -0
- package/dist/src/components/feedback/spinner/Spinner.component.d.ts.map +1 -0
- package/dist/src/components/forms/input/Input.component.d.ts +5 -0
- package/dist/src/components/forms/input/Input.component.d.ts.map +1 -1
- package/dist/src/components/forms/otp-input/OTPInput.component.d.ts +82 -0
- package/dist/src/components/forms/otp-input/OTPInput.component.d.ts.map +1 -0
- package/dist/src/components/forms/phone-input/PhoneInput.component.d.ts +96 -0
- package/dist/src/components/forms/phone-input/PhoneInput.component.d.ts.map +1 -0
- package/dist/src/components/forms/phone-input/countries.d.ts +93 -0
- package/dist/src/components/forms/phone-input/countries.d.ts.map +1 -0
- package/dist/src/components/forms/select/Select.component.d.ts +5 -1
- package/dist/src/components/forms/select/Select.component.d.ts.map +1 -1
- package/dist/src/components/forms/toggle/Toggle.component.d.ts +80 -0
- package/dist/src/components/forms/toggle/Toggle.component.d.ts.map +1 -0
- package/dist/src/components/layout/auth-layout/AuthLayout.component.d.ts +86 -0
- package/dist/src/components/layout/auth-layout/AuthLayout.component.d.ts.map +1 -0
- package/dist/src/components/overlays/dialog/Dialog.component.d.ts +36 -2
- package/dist/src/components/overlays/dialog/Dialog.component.d.ts.map +1 -1
- package/dist/src/components/typography/heading/Heading.component.d.ts +92 -0
- package/dist/src/components/typography/heading/Heading.component.d.ts.map +1 -0
- package/dist/src/components/typography/link/Link.component.d.ts +80 -0
- package/dist/src/components/typography/link/Link.component.d.ts.map +1 -0
- package/dist/src/index.d.ts +24 -5
- package/dist/src/index.d.ts.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +2 -1
- /package/dist/{index35.cjs → index50.cjs} +0 -0
- /package/dist/{index35.js → index50.js} +0 -0
- /package/dist/{index42.cjs → index61.cjs} +0 -0
- /package/dist/{index42.js → index61.js} +0 -0
|
@@ -2,17 +2,23 @@ import { ButtonHTMLAttributes, ReactNode } from 'react';
|
|
|
2
2
|
|
|
3
3
|
export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
|
|
4
4
|
/**
|
|
5
|
-
* Button variant based on
|
|
6
|
-
* -
|
|
7
|
-
* -
|
|
8
|
-
* - secondary: White background, border,
|
|
9
|
-
* -
|
|
5
|
+
* Button variant based on Figma design system
|
|
6
|
+
* - main-orange: Orange background (#F27424), white text (formerly primary-workspace)
|
|
7
|
+
* - main-blue: Blue background (#329CB2), white text
|
|
8
|
+
* - secondary-orange: White background, orange border (#ED6827), orange text
|
|
9
|
+
* - secondary-blue: White background, blue border (#329CB2), blue text
|
|
10
|
+
* - link: No background, blue text (#329CB2), underline on hover
|
|
11
|
+
* - no-stroke: No background/border, orange text (#ED6827), underline on hover
|
|
10
12
|
*/
|
|
11
|
-
variant?: '
|
|
13
|
+
variant?: 'main-orange' | 'main-blue' | 'secondary-orange' | 'secondary-blue' | 'link' | 'no-stroke';
|
|
12
14
|
/**
|
|
13
|
-
* Optional icon to display before
|
|
15
|
+
* Optional icon to display (can be before or after text)
|
|
14
16
|
*/
|
|
15
17
|
icon?: ReactNode;
|
|
18
|
+
/**
|
|
19
|
+
* Position of the icon
|
|
20
|
+
*/
|
|
21
|
+
iconPosition?: 'left' | 'right';
|
|
16
22
|
/**
|
|
17
23
|
* Full width button
|
|
18
24
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/button/Button.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpE,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IACzF
|
|
1
|
+
{"version":3,"file":"Button.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/button/Button.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpE,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IACzF;;;;;;;;OAQG;IACH,OAAO,CAAC,EACJ,aAAa,GACb,WAAW,GACX,kBAAkB,GAClB,gBAAgB,GAChB,MAAM,GACN,WAAW,CAAC;IAEhB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEhC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,2GAiClB,CAAC"}
|
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
* Icon component - Re-exported from @adam-milo/icons
|
|
3
3
|
* This maintains backward compatibility while using the centralized icons package
|
|
4
4
|
*/
|
|
5
|
-
export { Icon, type IconProps, type IconName, type IconSize, type IconColor, availableIcons, } from '@adam-milo/icons';
|
|
5
|
+
export { Icon, type IconProps, type IconName, type IconSize, type IconColor, availableIcons, figmaIconMapping, type FigmaIconName, getRadixIconName, } from '@adam-milo/icons';
|
|
6
6
|
//# sourceMappingURL=Icon.component.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EACL,IAAI,EACJ,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,cAAc,
|
|
1
|
+
{"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EACL,IAAI,EACJ,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,cAAc,EAEd,gBAAgB,EAChB,KAAK,aAAa,EAClB,gBAAgB,GACjB,MAAM,kBAAkB,CAAC"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { ButtonHTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
import { IconName } from '@adam-milo/icons';
|
|
3
|
+
|
|
4
|
+
export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style' | 'className'> {
|
|
5
|
+
/**
|
|
6
|
+
* Icon name from @adam-milo/icons
|
|
7
|
+
* Example: "Plus", "Cross2", "GearIcon"
|
|
8
|
+
*/
|
|
9
|
+
icon: IconName;
|
|
10
|
+
/**
|
|
11
|
+
* Optional text label to display alongside the icon
|
|
12
|
+
*/
|
|
13
|
+
children?: ReactNode;
|
|
14
|
+
/**
|
|
15
|
+
* Size of the button (controls padding and icon size)
|
|
16
|
+
* - sm: Small button with 14px icon
|
|
17
|
+
* - md: Medium button with 16px icon (default)
|
|
18
|
+
* - lg: Large button with 20px icon
|
|
19
|
+
*/
|
|
20
|
+
size?: 'sm' | 'md' | 'lg';
|
|
21
|
+
/**
|
|
22
|
+
* Accessible label for screen readers
|
|
23
|
+
* Required if no children (text) provided
|
|
24
|
+
*/
|
|
25
|
+
'aria-label'?: string;
|
|
26
|
+
/**
|
|
27
|
+
* An ID for testing purposes, used by Vitest/React Testing Library.
|
|
28
|
+
*/
|
|
29
|
+
'data-testid'?: string;
|
|
30
|
+
/**
|
|
31
|
+
* An ID for Cypress E2E testing purposes.
|
|
32
|
+
*/
|
|
33
|
+
'data-cy'?: string;
|
|
34
|
+
}
|
|
35
|
+
export declare const IconButton: import('react').ForwardRefExoticComponent<IconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
36
|
+
//# sourceMappingURL=IconButton.component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconButton.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/icon-button/IconButton.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpE,OAAO,EAAQ,QAAQ,EAAY,MAAM,kBAAkB,CAAC;AAC5D,OAAO,kBAAkB,CAAC;AAE1B,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,OAAO,GAAG,WAAW,CACtB;IACC;;;OAGG;IACH,IAAI,EAAE,QAAQ,CAAC;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAE1B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAWD,eAAO,MAAM,UAAU,+GAoCtB,CAAC"}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { ButtonHTMLAttributes } from 'react';
|
|
2
|
+
|
|
3
|
+
export interface MenuIconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style' | 'className'> {
|
|
4
|
+
/**
|
|
5
|
+
* Variant of the menu icon button
|
|
6
|
+
* - settings: Shows gear/settings icon
|
|
7
|
+
* - user: Shows user icon or initials
|
|
8
|
+
*/
|
|
9
|
+
variant: 'settings' | 'user';
|
|
10
|
+
/**
|
|
11
|
+
* Whether the button is in selected/active state
|
|
12
|
+
* @default false
|
|
13
|
+
*/
|
|
14
|
+
selected?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* User initials to display instead of icon (for existing users)
|
|
17
|
+
* Only applies when variant is 'user'
|
|
18
|
+
* Example: "AB", "JD"
|
|
19
|
+
*/
|
|
20
|
+
initials?: string;
|
|
21
|
+
/**
|
|
22
|
+
* Accessible label for screen readers
|
|
23
|
+
* Required for accessibility
|
|
24
|
+
*/
|
|
25
|
+
'aria-label': string;
|
|
26
|
+
/**
|
|
27
|
+
* An ID for testing purposes, used by Vitest/React Testing Library.
|
|
28
|
+
*/
|
|
29
|
+
'data-testid'?: string;
|
|
30
|
+
/**
|
|
31
|
+
* An ID for Cypress E2E testing purposes.
|
|
32
|
+
*/
|
|
33
|
+
'data-cy'?: string;
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* MenuIconButton - Circular menu icon button for navigation
|
|
37
|
+
*
|
|
38
|
+
* Based on Figma design: node-id=40247-9831
|
|
39
|
+
*
|
|
40
|
+
* A circular button used in navigation menus, supporting:
|
|
41
|
+
* - Settings icon variant
|
|
42
|
+
* - User icon variant (with optional initials for existing users)
|
|
43
|
+
* - Rest, hover, and selected states
|
|
44
|
+
* - Full keyboard accessibility
|
|
45
|
+
*
|
|
46
|
+
* @example
|
|
47
|
+
* ```tsx
|
|
48
|
+
* // Settings button
|
|
49
|
+
* <MenuIconButton
|
|
50
|
+
* variant="settings"
|
|
51
|
+
* aria-label="Settings"
|
|
52
|
+
* onClick={handleSettings}
|
|
53
|
+
* />
|
|
54
|
+
*
|
|
55
|
+
* // User button (new user)
|
|
56
|
+
* <MenuIconButton
|
|
57
|
+
* variant="user"
|
|
58
|
+
* aria-label="User profile"
|
|
59
|
+
* onClick={handleProfile}
|
|
60
|
+
* />
|
|
61
|
+
*
|
|
62
|
+
* // User button (existing user with initials)
|
|
63
|
+
* <MenuIconButton
|
|
64
|
+
* variant="user"
|
|
65
|
+
* initials="AB"
|
|
66
|
+
* aria-label="User profile - Adam Brown"
|
|
67
|
+
* onClick={handleProfile}
|
|
68
|
+
* />
|
|
69
|
+
*
|
|
70
|
+
* // Selected state
|
|
71
|
+
* <MenuIconButton
|
|
72
|
+
* variant="settings"
|
|
73
|
+
* selected
|
|
74
|
+
* aria-label="Settings (current page)"
|
|
75
|
+
* />
|
|
76
|
+
* ```
|
|
77
|
+
*/
|
|
78
|
+
export declare const MenuIconButton: import('react').ForwardRefExoticComponent<MenuIconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
79
|
+
//# sourceMappingURL=MenuIconButton.component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MenuIconButton.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/menu-icon-button/MenuIconButton.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAc,MAAM,OAAO,CAAC;AAGzD,OAAO,sBAAsB,CAAC;AAE9B,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,OAAO,GAAG,WAAW,CACtB;IACC;;;;OAIG;IACH,OAAO,EAAE,UAAU,GAAG,MAAM,CAAC;IAE7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,YAAY,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,cAAc,mHAkE1B,CAAC"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Spinner size variants
|
|
5
|
+
*/
|
|
6
|
+
export type SpinnerSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
7
|
+
/**
|
|
8
|
+
* Spinner color variants
|
|
9
|
+
*/
|
|
10
|
+
export type SpinnerColor = 'action' | 'orange' | 'white' | 'text';
|
|
11
|
+
export interface SpinnerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'className'> {
|
|
12
|
+
/**
|
|
13
|
+
* Spinner size
|
|
14
|
+
* - sm: 16px
|
|
15
|
+
* - md: 24px (default)
|
|
16
|
+
* - lg: 32px
|
|
17
|
+
* - xl: 48px
|
|
18
|
+
* @default 'md'
|
|
19
|
+
*/
|
|
20
|
+
size?: SpinnerSize;
|
|
21
|
+
/**
|
|
22
|
+
* Spinner color
|
|
23
|
+
* - action: Teal (--color-action)
|
|
24
|
+
* - orange: Orange (--color-button-orange)
|
|
25
|
+
* - white: White (for dark backgrounds)
|
|
26
|
+
* - text: Default text color
|
|
27
|
+
* @default 'action'
|
|
28
|
+
*/
|
|
29
|
+
color?: SpinnerColor;
|
|
30
|
+
/**
|
|
31
|
+
* Accessible label for screen readers
|
|
32
|
+
* @default 'Loading'
|
|
33
|
+
*/
|
|
34
|
+
label?: string;
|
|
35
|
+
/**
|
|
36
|
+
* Custom data-cy attribute for Cypress testing
|
|
37
|
+
*/
|
|
38
|
+
'data-cy'?: string;
|
|
39
|
+
/**
|
|
40
|
+
* Custom data-testid attribute for unit testing
|
|
41
|
+
*/
|
|
42
|
+
'data-testid'?: string;
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* Spinner component for loading states.
|
|
46
|
+
*
|
|
47
|
+
* Based on Figma design for verification loading state.
|
|
48
|
+
*
|
|
49
|
+
* @example
|
|
50
|
+
* ```tsx
|
|
51
|
+
* // Basic usage
|
|
52
|
+
* <Spinner />
|
|
53
|
+
*
|
|
54
|
+
* // Large orange spinner
|
|
55
|
+
* <Spinner size="lg" color="orange" />
|
|
56
|
+
*
|
|
57
|
+
* // With custom label
|
|
58
|
+
* <Spinner label="Verifying your account..." />
|
|
59
|
+
* ```
|
|
60
|
+
*/
|
|
61
|
+
export declare const Spinner: import('react').ForwardRefExoticComponent<SpinnerProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
62
|
+
//# sourceMappingURL=Spinner.component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Spinner.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/spinner/Spinner.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,eAAe,CAAC;AAEvB;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAElE,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAC/F;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,OAAO,yGAyDnB,CAAC"}
|
|
@@ -5,6 +5,11 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
|
5
5
|
* Label text for the input
|
|
6
6
|
*/
|
|
7
7
|
label?: string;
|
|
8
|
+
/**
|
|
9
|
+
* Tooltip text to display next to the label (info icon)
|
|
10
|
+
* Based on Figma: node-id=40239-7863
|
|
11
|
+
*/
|
|
12
|
+
tooltip?: string;
|
|
8
13
|
/**
|
|
9
14
|
* Error message to display below the input
|
|
10
15
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/forms/input/Input.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EAQpB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Input.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/forms/input/Input.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EAQpB,MAAM,OAAO,CAAC;AAGf,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IACvE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IAEjD;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAEhD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,eAAO,MAAM,KAAK,yGAicjB,CAAC"}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
|
|
2
|
+
export interface OTPInputProps {
|
|
3
|
+
/**
|
|
4
|
+
* Number of OTP digits/inputs
|
|
5
|
+
* @default 4
|
|
6
|
+
*/
|
|
7
|
+
length?: number;
|
|
8
|
+
/**
|
|
9
|
+
* Label text for the OTP input
|
|
10
|
+
*/
|
|
11
|
+
label?: string;
|
|
12
|
+
/**
|
|
13
|
+
* Current OTP value as a string
|
|
14
|
+
*/
|
|
15
|
+
value?: string;
|
|
16
|
+
/**
|
|
17
|
+
* Callback when OTP value changes
|
|
18
|
+
*/
|
|
19
|
+
onChange?: (value: string) => void;
|
|
20
|
+
/**
|
|
21
|
+
* Callback when all digits are filled
|
|
22
|
+
*/
|
|
23
|
+
onComplete?: (value: string) => void;
|
|
24
|
+
/**
|
|
25
|
+
* Error message to display
|
|
26
|
+
*/
|
|
27
|
+
error?: string;
|
|
28
|
+
/**
|
|
29
|
+
* Helper text to display below the input
|
|
30
|
+
*/
|
|
31
|
+
helperText?: string;
|
|
32
|
+
/**
|
|
33
|
+
* Whether the input is disabled
|
|
34
|
+
* @default false
|
|
35
|
+
*/
|
|
36
|
+
disabled?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* Whether to auto-focus the first input on mount
|
|
39
|
+
* @default false
|
|
40
|
+
*/
|
|
41
|
+
autoFocus?: boolean;
|
|
42
|
+
/**
|
|
43
|
+
* Whether the input should take full width of container
|
|
44
|
+
* @default false
|
|
45
|
+
*/
|
|
46
|
+
fullWidth?: boolean;
|
|
47
|
+
/**
|
|
48
|
+
* Whether to center the inputs within the container
|
|
49
|
+
* @default false
|
|
50
|
+
*/
|
|
51
|
+
centered?: boolean;
|
|
52
|
+
/**
|
|
53
|
+
* Input type - can be 'numeric' (numbers only) or 'alphanumeric'
|
|
54
|
+
* @default 'numeric'
|
|
55
|
+
*/
|
|
56
|
+
type?: 'numeric' | 'alphanumeric';
|
|
57
|
+
/**
|
|
58
|
+
* Whether the field is required
|
|
59
|
+
* @default false
|
|
60
|
+
*/
|
|
61
|
+
required?: boolean;
|
|
62
|
+
/**
|
|
63
|
+
* Custom data-cy attribute for Cypress testing
|
|
64
|
+
* @default "otp-input"
|
|
65
|
+
*/
|
|
66
|
+
'data-cy'?: string;
|
|
67
|
+
/**
|
|
68
|
+
* Custom data-testid attribute for unit testing
|
|
69
|
+
* @default "otp-input"
|
|
70
|
+
*/
|
|
71
|
+
'data-testid'?: string;
|
|
72
|
+
}
|
|
73
|
+
export interface OTPInputRef {
|
|
74
|
+
/** Focus the first empty input or the last input */
|
|
75
|
+
focus: () => void;
|
|
76
|
+
/** Clear all inputs */
|
|
77
|
+
clear: () => void;
|
|
78
|
+
/** Get the current OTP value */
|
|
79
|
+
getValue: () => string;
|
|
80
|
+
}
|
|
81
|
+
export declare const OTPInput: import('react').ForwardRefExoticComponent<OTPInputProps & import('react').RefAttributes<OTPInputRef>>;
|
|
82
|
+
//# sourceMappingURL=OTPInput.component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"OTPInput.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/forms/otp-input/OTPInput.component.tsx"],"names":[],"mappings":"AAcA,OAAO,gBAAgB,CAAC;AAExB,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;IAElC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,WAAW;IAC1B,oDAAoD;IACpD,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,uBAAuB;IACvB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,gCAAgC;IAChC,QAAQ,EAAE,MAAM,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,QAAQ,uGA6UpB,CAAC"}
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
import { InputHTMLAttributes } from 'react';
|
|
2
|
+
import { Country } from './countries';
|
|
3
|
+
|
|
4
|
+
export type { Country, PhoneMask } from './countries';
|
|
5
|
+
export { allCountries, commonCountries, defaultCountries, getCountryByCode, getCountryByDialCode, getCountriesByDialCode, searchCountries, phoneMasks, defaultPhoneMask, getPhoneMask, formatPhoneNumber, getPhoneDigits, isValidPhoneLength, } from './countries';
|
|
6
|
+
export interface PhoneInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'onChange'> {
|
|
7
|
+
/**
|
|
8
|
+
* Label text for the input
|
|
9
|
+
*/
|
|
10
|
+
label?: string;
|
|
11
|
+
/**
|
|
12
|
+
* Error message to display below the input
|
|
13
|
+
*/
|
|
14
|
+
error?: string;
|
|
15
|
+
/**
|
|
16
|
+
* Helper text to display below the input (only shown when no error)
|
|
17
|
+
*/
|
|
18
|
+
helperText?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Whether the input should take full width
|
|
21
|
+
* @default true
|
|
22
|
+
*/
|
|
23
|
+
fullWidth?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* The phone number value (without country code)
|
|
26
|
+
*/
|
|
27
|
+
value?: string;
|
|
28
|
+
/**
|
|
29
|
+
* Callback when the phone number changes
|
|
30
|
+
*/
|
|
31
|
+
onChange?: (value: string) => void;
|
|
32
|
+
/**
|
|
33
|
+
* The selected country code (ISO 3166-1 alpha-2)
|
|
34
|
+
* @default "US"
|
|
35
|
+
*/
|
|
36
|
+
countryCode?: string;
|
|
37
|
+
/**
|
|
38
|
+
* Callback when the country selection changes
|
|
39
|
+
*/
|
|
40
|
+
onCountryChange?: (country: Country) => void;
|
|
41
|
+
/**
|
|
42
|
+
* List of available countries
|
|
43
|
+
* @default commonCountries
|
|
44
|
+
*/
|
|
45
|
+
countries?: Country[];
|
|
46
|
+
/**
|
|
47
|
+
* Enable phone number formatting based on country mask
|
|
48
|
+
* When enabled, the phone number will be formatted as the user types
|
|
49
|
+
* @default true
|
|
50
|
+
*/
|
|
51
|
+
enableFormatting?: boolean;
|
|
52
|
+
/**
|
|
53
|
+
* Callback when validation state changes
|
|
54
|
+
* Called with true when phone number length matches country mask
|
|
55
|
+
*/
|
|
56
|
+
onValidationChange?: (isValid: boolean) => void;
|
|
57
|
+
/**
|
|
58
|
+
* Custom data-cy attribute for Cypress testing
|
|
59
|
+
* @default "phone-input"
|
|
60
|
+
*/
|
|
61
|
+
'data-cy'?: string;
|
|
62
|
+
/**
|
|
63
|
+
* Custom data-testid attribute for unit testing
|
|
64
|
+
* @default "phone-input"
|
|
65
|
+
*/
|
|
66
|
+
'data-testid'?: string;
|
|
67
|
+
}
|
|
68
|
+
/**
|
|
69
|
+
* PhoneInput - Phone number input with country selector
|
|
70
|
+
*
|
|
71
|
+
* A form input component for phone numbers featuring:
|
|
72
|
+
* - Country selector dropdown with flags
|
|
73
|
+
* - Automatic dial code display
|
|
74
|
+
* - Phone number validation (numeric only)
|
|
75
|
+
* - Full keyboard accessibility
|
|
76
|
+
* - RTL support
|
|
77
|
+
*
|
|
78
|
+
* Design from Figma: node-id=40268-12095
|
|
79
|
+
*
|
|
80
|
+
* @example
|
|
81
|
+
* ```tsx
|
|
82
|
+
* const [phone, setPhone] = useState('');
|
|
83
|
+
* const [country, setCountry] = useState('US');
|
|
84
|
+
*
|
|
85
|
+
* <PhoneInput
|
|
86
|
+
* label="Mobile No."
|
|
87
|
+
* value={phone}
|
|
88
|
+
* onChange={setPhone}
|
|
89
|
+
* countryCode={country}
|
|
90
|
+
* onCountryChange={(c) => setCountry(c.code)}
|
|
91
|
+
* required
|
|
92
|
+
* />
|
|
93
|
+
* ```
|
|
94
|
+
*/
|
|
95
|
+
export declare const PhoneInput: import('react').ForwardRefExoticComponent<PhoneInputProps & import('react').RefAttributes<HTMLInputElement>>;
|
|
96
|
+
//# sourceMappingURL=PhoneInput.component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PhoneInput.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/forms/phone-input/PhoneInput.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,mBAAmB,EAEpB,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,OAAO,EAKR,MAAM,aAAa,CAAC;AACrB,OAAO,kBAAkB,CAAC;AAG1B,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EACL,YAAY,EACZ,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,oBAAoB,EACpB,sBAAsB,EACtB,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,iBAAiB,EACjB,cAAc,EACd,kBAAkB,GACnB,MAAM,aAAa,CAAC;AAErB,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,OAAO,GAAG,UAAU,CAC9B;IACC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7C;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,EAAE,CAAC;IAEtB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAEhD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,UAAU,8GAoVtB,CAAC"}
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Country data for PhoneInput component
|
|
3
|
+
*
|
|
4
|
+
* Contains country codes, names, dial codes, and flag emojis.
|
|
5
|
+
* Countries are sorted alphabetically by name.
|
|
6
|
+
*/
|
|
7
|
+
/**
|
|
8
|
+
* Country data structure
|
|
9
|
+
*/
|
|
10
|
+
export interface Country {
|
|
11
|
+
/** ISO 3166-1 alpha-2 country code (e.g., "US", "IL") */
|
|
12
|
+
code: string;
|
|
13
|
+
/** Country name in English */
|
|
14
|
+
name: string;
|
|
15
|
+
/** International dial code with + prefix (e.g., "+1", "+972") */
|
|
16
|
+
dialCode: string;
|
|
17
|
+
/** Flag emoji */
|
|
18
|
+
flag: string;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* Comprehensive list of countries with dial codes
|
|
22
|
+
* Sorted alphabetically by country name
|
|
23
|
+
*/
|
|
24
|
+
export declare const allCountries: Country[];
|
|
25
|
+
/**
|
|
26
|
+
* Common countries - a subset of frequently used countries
|
|
27
|
+
* Good for default/priority display in dropdowns
|
|
28
|
+
*/
|
|
29
|
+
export declare const commonCountries: Country[];
|
|
30
|
+
/**
|
|
31
|
+
* Default countries for backward compatibility
|
|
32
|
+
* @deprecated Use `commonCountries` or `allCountries` instead
|
|
33
|
+
*/
|
|
34
|
+
export declare const defaultCountries: Country[];
|
|
35
|
+
/**
|
|
36
|
+
* Find a country by its ISO code
|
|
37
|
+
*/
|
|
38
|
+
export declare function getCountryByCode(code: string): Country | undefined;
|
|
39
|
+
/**
|
|
40
|
+
* Find a country by its dial code
|
|
41
|
+
* Note: Some dial codes are shared (e.g., +1 for US, CA, etc.)
|
|
42
|
+
* Returns the first match
|
|
43
|
+
*/
|
|
44
|
+
export declare function getCountryByDialCode(dialCode: string): Country | undefined;
|
|
45
|
+
/**
|
|
46
|
+
* Get all countries that share a dial code
|
|
47
|
+
* Useful for +1 (US, Canada, etc.)
|
|
48
|
+
*/
|
|
49
|
+
export declare function getCountriesByDialCode(dialCode: string): Country[];
|
|
50
|
+
/**
|
|
51
|
+
* Search countries by name (case-insensitive)
|
|
52
|
+
*/
|
|
53
|
+
export declare function searchCountries(query: string): Country[];
|
|
54
|
+
/**
|
|
55
|
+
* Phone number mask configuration
|
|
56
|
+
* - mask: Pattern where # represents a digit
|
|
57
|
+
* - placeholder: Visual placeholder for the mask
|
|
58
|
+
* - maxLength: Maximum number of digits (without formatting)
|
|
59
|
+
*/
|
|
60
|
+
export interface PhoneMask {
|
|
61
|
+
mask: string;
|
|
62
|
+
placeholder: string;
|
|
63
|
+
maxLength: number;
|
|
64
|
+
}
|
|
65
|
+
/**
|
|
66
|
+
* Phone masks by country code
|
|
67
|
+
* Format: # = digit
|
|
68
|
+
*/
|
|
69
|
+
export declare const phoneMasks: Record<string, PhoneMask>;
|
|
70
|
+
/**
|
|
71
|
+
* Default phone mask for countries without specific masks
|
|
72
|
+
*/
|
|
73
|
+
export declare const defaultPhoneMask: PhoneMask;
|
|
74
|
+
/**
|
|
75
|
+
* Get phone mask for a country
|
|
76
|
+
*/
|
|
77
|
+
export declare function getPhoneMask(countryCode: string): PhoneMask;
|
|
78
|
+
/**
|
|
79
|
+
* Format a phone number according to the country mask
|
|
80
|
+
* @param value - Raw phone number (digits only)
|
|
81
|
+
* @param countryCode - ISO country code
|
|
82
|
+
* @returns Formatted phone number
|
|
83
|
+
*/
|
|
84
|
+
export declare function formatPhoneNumber(value: string, countryCode: string): string;
|
|
85
|
+
/**
|
|
86
|
+
* Get raw digits from a formatted phone number
|
|
87
|
+
*/
|
|
88
|
+
export declare function getPhoneDigits(formattedValue: string): string;
|
|
89
|
+
/**
|
|
90
|
+
* Validate phone number length for a country
|
|
91
|
+
*/
|
|
92
|
+
export declare function isValidPhoneLength(value: string, countryCode: string): boolean;
|
|
93
|
+
//# sourceMappingURL=countries.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"countries.d.ts","sourceRoot":"","sources":["../../../../../src/components/forms/phone-input/countries.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;GAEG;AACH,MAAM,WAAW,OAAO;IACtB,yDAAyD;IACzD,IAAI,EAAE,MAAM,CAAC;IACb,8BAA8B;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,iEAAiE;IACjE,QAAQ,EAAE,MAAM,CAAC;IACjB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,OAAO,EAgLjC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,OAAO,EA+BpC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,OAAO,EAKrC,CAAC;AAEF;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAElE;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAG1E;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,EAAE,CAGlE;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,EAAE,CAGxD;AAED;;;;;GAKG;AACH,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CA4DhD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,SAI9B,CAAC;AAEF;;GAEG;AACH,wBAAgB,YAAY,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,CAE3D;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,MAAM,CAoB5E;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,CAE7D;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,OAAO,CAI9E"}
|
|
@@ -21,9 +21,13 @@ export interface SelectTriggerProps extends ComponentPropsWithoutRef<typeof Sele
|
|
|
21
21
|
*/
|
|
22
22
|
fullWidth?: boolean;
|
|
23
23
|
/**
|
|
24
|
-
* Whether the select has a value selected
|
|
24
|
+
* Whether the select has a value selected
|
|
25
25
|
*/
|
|
26
26
|
hasValue?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Placeholder text when no value is selected
|
|
29
|
+
*/
|
|
30
|
+
placeholder?: string;
|
|
27
31
|
/**
|
|
28
32
|
* Whether the select is required for form validation
|
|
29
33
|
* Note: Sets aria-required for accessibility. For actual form validation,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/forms/select/Select.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,wBAAwB,EAAqB,MAAM,OAAO,CAAC;AAChF,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,OAAO,cAAc,CAAC;AAMtB,eAAO,MAAM,MAAM,iDAAuB,CAAC;AAM3C,MAAM,WAAW,kBAAmB,SAAQ,wBAAwB,CAClE,OAAO,eAAe,CAAC,OAAO,CAC/B;IACC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"Select.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/forms/select/Select.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,wBAAwB,EAAqB,MAAM,OAAO,CAAC;AAChF,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,OAAO,cAAc,CAAC;AAMtB,eAAO,MAAM,MAAM,iDAAuB,CAAC;AAM3C,MAAM,WAAW,kBAAmB,SAAQ,wBAAwB,CAClE,OAAO,eAAe,CAAC,OAAO,CAC/B;IACC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,aAAa,kHA0IzB,CAAC;AAOF,eAAO,MAAM,WAAW,8HAAwB,CAAC;AAMjD,MAAM,WAAW,kBAAmB,SAAQ,wBAAwB,CAClE,OAAO,eAAe,CAAC,OAAO,CAC/B;IACC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,aAAa,+GAoCzB,CAAC;AAOF,MAAM,WAAW,eAAgB,SAAQ,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;IAC5F;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,4GAkBtB,CAAC;AAOF,eAAO,MAAM,WAAW,6HAAwB,CAAC;AAMjD,MAAM,WAAW,gBAAiB,SAAQ,wBAAwB,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC;IAC9F;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,6GAevB,CAAC;AAOF,MAAM,WAAW,oBAAqB,SAAQ,wBAAwB,CACpE,OAAO,eAAe,CAAC,SAAS,CACjC;IACC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,eAAe,iHAgB1B,CAAC"}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { InputHTMLAttributes } from 'react';
|
|
2
|
+
|
|
3
|
+
export interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
|
|
4
|
+
/**
|
|
5
|
+
* Label text for the toggle
|
|
6
|
+
*/
|
|
7
|
+
label?: string;
|
|
8
|
+
/**
|
|
9
|
+
* Position of the label relative to the toggle
|
|
10
|
+
* @default 'end'
|
|
11
|
+
*/
|
|
12
|
+
labelPosition?: 'start' | 'end';
|
|
13
|
+
/**
|
|
14
|
+
* Helper text to display below the toggle
|
|
15
|
+
*/
|
|
16
|
+
helperText?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Size of the toggle
|
|
19
|
+
* @default 'md'
|
|
20
|
+
*/
|
|
21
|
+
size?: 'sm' | 'md' | 'lg';
|
|
22
|
+
/**
|
|
23
|
+
* Callback fired when the toggle state changes
|
|
24
|
+
* @param event - The change event from the input element
|
|
25
|
+
*/
|
|
26
|
+
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
27
|
+
/**
|
|
28
|
+
* Callback fired when the toggle loses focus
|
|
29
|
+
* @param event - The blur event from the input element
|
|
30
|
+
*/
|
|
31
|
+
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
32
|
+
/**
|
|
33
|
+
* Callback fired when the toggle gains focus
|
|
34
|
+
* @param event - The focus event from the input element
|
|
35
|
+
*/
|
|
36
|
+
onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
37
|
+
/**
|
|
38
|
+
* Custom data-cy attribute for Cypress testing
|
|
39
|
+
* Auto-generates as "toggle" if not provided
|
|
40
|
+
*/
|
|
41
|
+
'data-cy'?: string;
|
|
42
|
+
/**
|
|
43
|
+
* Custom data-testid attribute for unit testing
|
|
44
|
+
* Auto-generates as "toggle" if not provided
|
|
45
|
+
*/
|
|
46
|
+
'data-testid'?: string;
|
|
47
|
+
}
|
|
48
|
+
/**
|
|
49
|
+
* Toggle - Accessible toggle/switch component for the Adam Milo Design System
|
|
50
|
+
*
|
|
51
|
+
* A fully accessible toggle component that supports:
|
|
52
|
+
* - Standard on/off states
|
|
53
|
+
* - Hover and focus states
|
|
54
|
+
* - Disabled state
|
|
55
|
+
* - Label positioning
|
|
56
|
+
* - Helper text
|
|
57
|
+
* - Full keyboard accessibility
|
|
58
|
+
* - RTL support
|
|
59
|
+
*
|
|
60
|
+
* @example
|
|
61
|
+
* ```tsx
|
|
62
|
+
* // Simple toggle
|
|
63
|
+
* <Toggle label="Enable notifications" />
|
|
64
|
+
*
|
|
65
|
+
* // Controlled toggle
|
|
66
|
+
* <Toggle
|
|
67
|
+
* label="Dark mode"
|
|
68
|
+
* checked={isDarkMode}
|
|
69
|
+
* onChange={(e) => setIsDarkMode(e.target.checked)}
|
|
70
|
+
* />
|
|
71
|
+
*
|
|
72
|
+
* // With label on the left
|
|
73
|
+
* <Toggle label="Auto-save" labelPosition="start" />
|
|
74
|
+
*
|
|
75
|
+
* // Disabled toggle
|
|
76
|
+
* <Toggle label="Feature flag" disabled />
|
|
77
|
+
* ```
|
|
78
|
+
*/
|
|
79
|
+
export declare const Toggle: import('react').ForwardRefExoticComponent<ToggleProps & import('react').RefAttributes<HTMLInputElement>>;
|
|
80
|
+
//# sourceMappingURL=Toggle.component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Toggle.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/forms/toggle/Toggle.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,mBAAmB,EAAwC,MAAM,OAAO,CAAC;AAE9F,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/F;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAEhC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAE1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAEhE;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE7D;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE9D;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,MAAM,0GAoJlB,CAAC"}
|