@damarkuncoro/ui-library 0.0.1

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.
Files changed (165) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +122 -0
  3. package/lib/cjs/components/button/button-base.d.ts +3 -0
  4. package/lib/cjs/components/button/button-base.d.ts.map +1 -0
  5. package/lib/cjs/components/button/button-base.js +21 -0
  6. package/lib/cjs/components/button/button-base.js.map +1 -0
  7. package/lib/cjs/components/button/button-contract.d.ts +54 -0
  8. package/lib/cjs/components/button/button-contract.d.ts.map +1 -0
  9. package/lib/cjs/components/button/button-contract.js +32 -0
  10. package/lib/cjs/components/button/button-contract.js.map +1 -0
  11. package/lib/cjs/components/button/button-examples.d.ts +11 -0
  12. package/lib/cjs/components/button/button-examples.d.ts.map +1 -0
  13. package/lib/cjs/components/button/button-examples.js +67 -0
  14. package/lib/cjs/components/button/button-examples.js.map +1 -0
  15. package/lib/cjs/components/button/button-skin-contract.d.ts +133 -0
  16. package/lib/cjs/components/button/button-skin-contract.d.ts.map +1 -0
  17. package/lib/cjs/components/button/button-skin-contract.js +118 -0
  18. package/lib/cjs/components/button/button-skin-contract.js.map +1 -0
  19. package/lib/cjs/components/button/button-skin-native.d.ts +3 -0
  20. package/lib/cjs/components/button/button-skin-native.d.ts.map +1 -0
  21. package/lib/cjs/components/button/button-skin-native.js +62 -0
  22. package/lib/cjs/components/button/button-skin-native.js.map +1 -0
  23. package/lib/cjs/components/button/button-skin-tailwind.d.ts +15 -0
  24. package/lib/cjs/components/button/button-skin-tailwind.d.ts.map +1 -0
  25. package/lib/cjs/components/button/button-skin-tailwind.js +46 -0
  26. package/lib/cjs/components/button/button-skin-tailwind.js.map +1 -0
  27. package/lib/cjs/components/button/index.d.ts +8 -0
  28. package/lib/cjs/components/button/index.d.ts.map +1 -0
  29. package/lib/cjs/components/button/index.js +28 -0
  30. package/lib/cjs/components/button/index.js.map +1 -0
  31. package/lib/cjs/components/input/index.d.ts +8 -0
  32. package/lib/cjs/components/input/index.d.ts.map +1 -0
  33. package/lib/cjs/components/input/index.js +28 -0
  34. package/lib/cjs/components/input/index.js.map +1 -0
  35. package/lib/cjs/components/input/input-base.d.ts +9 -0
  36. package/lib/cjs/components/input/input-base.d.ts.map +1 -0
  37. package/lib/cjs/components/input/input-base.js +17 -0
  38. package/lib/cjs/components/input/input-base.js.map +1 -0
  39. package/lib/cjs/components/input/input-contract.d.ts +40 -0
  40. package/lib/cjs/components/input/input-contract.d.ts.map +1 -0
  41. package/lib/cjs/components/input/input-contract.js +32 -0
  42. package/lib/cjs/components/input/input-contract.js.map +1 -0
  43. package/lib/cjs/components/input/input-examples.d.ts +12 -0
  44. package/lib/cjs/components/input/input-examples.d.ts.map +1 -0
  45. package/lib/cjs/components/input/input-examples.js +67 -0
  46. package/lib/cjs/components/input/input-examples.js.map +1 -0
  47. package/lib/cjs/components/input/input-skin-contract.d.ts +93 -0
  48. package/lib/cjs/components/input/input-skin-contract.d.ts.map +1 -0
  49. package/lib/cjs/components/input/input-skin-contract.js +97 -0
  50. package/lib/cjs/components/input/input-skin-contract.js.map +1 -0
  51. package/lib/cjs/components/input/input-skin-native.d.ts +3 -0
  52. package/lib/cjs/components/input/input-skin-native.d.ts.map +1 -0
  53. package/lib/cjs/components/input/input-skin-native.js +68 -0
  54. package/lib/cjs/components/input/input-skin-native.js.map +1 -0
  55. package/lib/cjs/components/input/input-skin-tailwind.d.ts +18 -0
  56. package/lib/cjs/components/input/input-skin-tailwind.d.ts.map +1 -0
  57. package/lib/cjs/components/input/input-skin-tailwind.js +49 -0
  58. package/lib/cjs/components/input/input-skin-tailwind.js.map +1 -0
  59. package/lib/cjs/index.d.ts +4 -0
  60. package/lib/cjs/index.d.ts.map +1 -0
  61. package/lib/cjs/index.js +20 -0
  62. package/lib/cjs/index.js.map +1 -0
  63. package/lib/cjs/package.json +1 -0
  64. package/lib/cjs/test-setup.d.ts +2 -0
  65. package/lib/cjs/test-setup.d.ts.map +1 -0
  66. package/lib/cjs/test-setup.js +4 -0
  67. package/lib/cjs/test-setup.js.map +1 -0
  68. package/lib/cjs/theme/design-tokens.d.ts +200 -0
  69. package/lib/cjs/theme/design-tokens.d.ts.map +1 -0
  70. package/lib/cjs/theme/design-tokens.js +177 -0
  71. package/lib/cjs/theme/design-tokens.js.map +1 -0
  72. package/lib/cjs/theme/index.d.ts +3 -0
  73. package/lib/cjs/theme/index.d.ts.map +1 -0
  74. package/lib/cjs/theme/index.js +19 -0
  75. package/lib/cjs/theme/index.js.map +1 -0
  76. package/lib/cjs/theme/theme-provider.d.ts +16 -0
  77. package/lib/cjs/theme/theme-provider.d.ts.map +1 -0
  78. package/lib/cjs/theme/theme-provider.js +39 -0
  79. package/lib/cjs/theme/theme-provider.js.map +1 -0
  80. package/lib/cjs/usage-example.d.ts +2 -0
  81. package/lib/cjs/usage-example.d.ts.map +1 -0
  82. package/lib/cjs/usage-example.js +13 -0
  83. package/lib/cjs/usage-example.js.map +1 -0
  84. package/lib/esm/components/button/button-base.d.ts +3 -0
  85. package/lib/esm/components/button/button-base.d.ts.map +1 -0
  86. package/lib/esm/components/button/button-base.js +18 -0
  87. package/lib/esm/components/button/button-base.js.map +1 -0
  88. package/lib/esm/components/button/button-contract.d.ts +54 -0
  89. package/lib/esm/components/button/button-contract.d.ts.map +1 -0
  90. package/lib/esm/components/button/button-contract.js +29 -0
  91. package/lib/esm/components/button/button-contract.js.map +1 -0
  92. package/lib/esm/components/button/button-examples.d.ts +11 -0
  93. package/lib/esm/components/button/button-examples.d.ts.map +1 -0
  94. package/lib/esm/components/button/button-examples.js +52 -0
  95. package/lib/esm/components/button/button-examples.js.map +1 -0
  96. package/lib/esm/components/button/button-skin-contract.d.ts +133 -0
  97. package/lib/esm/components/button/button-skin-contract.d.ts.map +1 -0
  98. package/lib/esm/components/button/button-skin-contract.js +115 -0
  99. package/lib/esm/components/button/button-skin-contract.js.map +1 -0
  100. package/lib/esm/components/button/button-skin-native.d.ts +3 -0
  101. package/lib/esm/components/button/button-skin-native.d.ts.map +1 -0
  102. package/lib/esm/components/button/button-skin-native.js +59 -0
  103. package/lib/esm/components/button/button-skin-native.js.map +1 -0
  104. package/lib/esm/components/button/button-skin-tailwind.d.ts +15 -0
  105. package/lib/esm/components/button/button-skin-tailwind.d.ts.map +1 -0
  106. package/lib/esm/components/button/button-skin-tailwind.js +43 -0
  107. package/lib/esm/components/button/button-skin-tailwind.js.map +1 -0
  108. package/lib/esm/components/button/index.d.ts +8 -0
  109. package/lib/esm/components/button/index.d.ts.map +1 -0
  110. package/lib/esm/components/button/index.js +8 -0
  111. package/lib/esm/components/button/index.js.map +1 -0
  112. package/lib/esm/components/input/index.d.ts +8 -0
  113. package/lib/esm/components/input/index.d.ts.map +1 -0
  114. package/lib/esm/components/input/index.js +8 -0
  115. package/lib/esm/components/input/index.js.map +1 -0
  116. package/lib/esm/components/input/input-base.d.ts +9 -0
  117. package/lib/esm/components/input/input-base.d.ts.map +1 -0
  118. package/lib/esm/components/input/input-base.js +14 -0
  119. package/lib/esm/components/input/input-base.js.map +1 -0
  120. package/lib/esm/components/input/input-contract.d.ts +40 -0
  121. package/lib/esm/components/input/input-contract.d.ts.map +1 -0
  122. package/lib/esm/components/input/input-contract.js +29 -0
  123. package/lib/esm/components/input/input-contract.js.map +1 -0
  124. package/lib/esm/components/input/input-examples.d.ts +12 -0
  125. package/lib/esm/components/input/input-examples.d.ts.map +1 -0
  126. package/lib/esm/components/input/input-examples.js +51 -0
  127. package/lib/esm/components/input/input-examples.js.map +1 -0
  128. package/lib/esm/components/input/input-skin-contract.d.ts +93 -0
  129. package/lib/esm/components/input/input-skin-contract.d.ts.map +1 -0
  130. package/lib/esm/components/input/input-skin-contract.js +94 -0
  131. package/lib/esm/components/input/input-skin-contract.js.map +1 -0
  132. package/lib/esm/components/input/input-skin-native.d.ts +3 -0
  133. package/lib/esm/components/input/input-skin-native.d.ts.map +1 -0
  134. package/lib/esm/components/input/input-skin-native.js +65 -0
  135. package/lib/esm/components/input/input-skin-native.js.map +1 -0
  136. package/lib/esm/components/input/input-skin-tailwind.d.ts +18 -0
  137. package/lib/esm/components/input/input-skin-tailwind.d.ts.map +1 -0
  138. package/lib/esm/components/input/input-skin-tailwind.js +46 -0
  139. package/lib/esm/components/input/input-skin-tailwind.js.map +1 -0
  140. package/lib/esm/index.d.ts +4 -0
  141. package/lib/esm/index.d.ts.map +1 -0
  142. package/lib/esm/index.js +4 -0
  143. package/lib/esm/index.js.map +1 -0
  144. package/lib/esm/package.json +1 -0
  145. package/lib/esm/test-setup.d.ts +2 -0
  146. package/lib/esm/test-setup.d.ts.map +1 -0
  147. package/lib/esm/test-setup.js +2 -0
  148. package/lib/esm/test-setup.js.map +1 -0
  149. package/lib/esm/theme/design-tokens.d.ts +200 -0
  150. package/lib/esm/theme/design-tokens.d.ts.map +1 -0
  151. package/lib/esm/theme/design-tokens.js +174 -0
  152. package/lib/esm/theme/design-tokens.js.map +1 -0
  153. package/lib/esm/theme/index.d.ts +3 -0
  154. package/lib/esm/theme/index.d.ts.map +1 -0
  155. package/lib/esm/theme/index.js +3 -0
  156. package/lib/esm/theme/index.js.map +1 -0
  157. package/lib/esm/theme/theme-provider.d.ts +16 -0
  158. package/lib/esm/theme/theme-provider.d.ts.map +1 -0
  159. package/lib/esm/theme/theme-provider.js +34 -0
  160. package/lib/esm/theme/theme-provider.js.map +1 -0
  161. package/lib/esm/usage-example.d.ts +2 -0
  162. package/lib/esm/usage-example.d.ts.map +1 -0
  163. package/lib/esm/usage-example.js +10 -0
  164. package/lib/esm/usage-example.js.map +1 -0
  165. package/package.json +48 -0
@@ -0,0 +1,133 @@
1
+ import { ReactNode } from 'react';
2
+ export declare const buttonSkinContractDef: {
3
+ readonly id: "contract_button_skin_v1";
4
+ readonly name: "button-skin";
5
+ readonly category: "ui.skin";
6
+ readonly description: "Visual contract for button skin implementations";
7
+ readonly variants: {
8
+ readonly primary: {
9
+ readonly backgroundColor: "var(--color-primary-main)";
10
+ readonly color: "var(--color-primary-contrast)";
11
+ readonly hover: {
12
+ readonly backgroundColor: "var(--color-primary-hover)";
13
+ };
14
+ readonly focus: {
15
+ readonly outline: "var(--shadow-focus-ring) var(--color-primary-focus)";
16
+ readonly outlineOffset: "2px";
17
+ readonly ringColor: "var(--color-primary-focus)";
18
+ };
19
+ };
20
+ readonly secondary: {
21
+ readonly backgroundColor: "var(--color-secondary-main)";
22
+ readonly color: "var(--color-secondary-contrast)";
23
+ readonly hover: {
24
+ readonly backgroundColor: "var(--color-secondary-hover)";
25
+ };
26
+ readonly focus: {
27
+ readonly outline: "var(--shadow-focus-ring) var(--color-secondary-focus)";
28
+ readonly outlineOffset: "2px";
29
+ readonly ringColor: "var(--color-secondary-focus)";
30
+ };
31
+ };
32
+ readonly outline: {
33
+ readonly backgroundColor: "transparent";
34
+ readonly borderColor: "var(--color-neutral-border)";
35
+ readonly color: "var(--color-neutral-text)";
36
+ readonly hover: {
37
+ readonly backgroundColor: "var(--color-neutral-bg)";
38
+ };
39
+ readonly focus: {
40
+ readonly outline: "var(--shadow-focus-ring) var(--color-primary-focus)";
41
+ readonly outlineOffset: "2px";
42
+ readonly ringColor: "var(--color-primary-focus)";
43
+ };
44
+ };
45
+ readonly ghost: {
46
+ readonly backgroundColor: "transparent";
47
+ readonly color: "var(--color-neutral-text)";
48
+ readonly hover: {
49
+ readonly backgroundColor: "var(--color-secondary-main)";
50
+ };
51
+ readonly focus: {
52
+ readonly outline: "var(--shadow-focus-ring) var(--color-secondary-focus)";
53
+ readonly outlineOffset: "2px";
54
+ readonly ringColor: "var(--color-secondary-focus)";
55
+ };
56
+ };
57
+ readonly danger: {
58
+ readonly backgroundColor: "var(--color-danger-main)";
59
+ readonly color: "var(--color-danger-contrast)";
60
+ readonly hover: {
61
+ readonly backgroundColor: "var(--color-danger-hover)";
62
+ };
63
+ readonly focus: {
64
+ readonly outline: "var(--shadow-focus-ring) var(--color-danger-focus)";
65
+ readonly outlineOffset: "2px";
66
+ readonly ringColor: "var(--color-danger-focus)";
67
+ };
68
+ };
69
+ };
70
+ readonly sizes: {
71
+ readonly sm: {
72
+ readonly height: "32px";
73
+ readonly padding: "0 12px";
74
+ readonly fontSize: "0.75rem";
75
+ readonly iconSize: "14px";
76
+ };
77
+ readonly md: {
78
+ readonly height: "40px";
79
+ readonly padding: "0 16px";
80
+ readonly fontSize: "0.875rem";
81
+ readonly iconSize: "16px";
82
+ };
83
+ readonly lg: {
84
+ readonly height: "48px";
85
+ readonly padding: "0 24px";
86
+ readonly fontSize: "1rem";
87
+ readonly iconSize: "20px";
88
+ };
89
+ };
90
+ readonly base: {
91
+ readonly display: "inline-flex";
92
+ readonly alignItems: "center";
93
+ readonly justifyContent: "center";
94
+ readonly borderRadius: "6px";
95
+ readonly border: "1px solid transparent";
96
+ readonly cursor: "pointer";
97
+ readonly transition: "all 0.2s ease";
98
+ readonly fontWeight: "500";
99
+ };
100
+ readonly disabled: {
101
+ readonly opacity: "0.5";
102
+ readonly cursor: "not-allowed";
103
+ };
104
+ readonly icons: {
105
+ readonly leftSpacing: "8px";
106
+ readonly rightSpacing: "8px";
107
+ readonly ariaHidden: true;
108
+ };
109
+ readonly loader: {
110
+ readonly size: "16px";
111
+ readonly borderWidth: "2px";
112
+ readonly animation: "spin";
113
+ };
114
+ };
115
+ export type ButtonSkinVariant = keyof typeof buttonSkinContractDef.variants;
116
+ export type ButtonSkinSize = keyof typeof buttonSkinContractDef.sizes;
117
+ export type VariantVisualProperties = typeof buttonSkinContractDef.variants[ButtonSkinVariant];
118
+ export type SizeSpecifications = typeof buttonSkinContractDef.sizes[ButtonSkinSize];
119
+ export type BaseStyles = typeof buttonSkinContractDef.base;
120
+ export type DisabledStyles = typeof buttonSkinContractDef.disabled;
121
+ export type IconBehavior = typeof buttonSkinContractDef.icons;
122
+ export type LoaderBehavior = typeof buttonSkinContractDef.loader;
123
+ export interface ButtonSkinContract {
124
+ variant?: ButtonSkinVariant;
125
+ size?: ButtonSkinSize;
126
+ disabled?: boolean;
127
+ isLoading?: boolean;
128
+ leftIcon?: ReactNode;
129
+ rightIcon?: ReactNode;
130
+ className?: string;
131
+ style?: React.CSSProperties;
132
+ }
133
+ //# sourceMappingURL=button-skin-contract.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"button-skin-contract.d.ts","sourceRoot":"","sources":["../../../../src/components/button/button-skin-contract.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAalC,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4HxB,CAAC;AAOX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,qBAAqB,CAAC,QAAQ,CAAC;AAK5E,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,qBAAqB,CAAC,KAAK,CAAC;AAKtE,MAAM,MAAM,uBAAuB,GAAG,OAAO,qBAAqB,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAK/F,MAAM,MAAM,kBAAkB,GAAG,OAAO,qBAAqB,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;AAKpF,MAAM,MAAM,UAAU,GAAG,OAAO,qBAAqB,CAAC,IAAI,CAAC;AAK3D,MAAM,MAAM,cAAc,GAAG,OAAO,qBAAqB,CAAC,QAAQ,CAAC;AAKnE,MAAM,MAAM,YAAY,GAAG,OAAO,qBAAqB,CAAC,KAAK,CAAC;AAK9D,MAAM,MAAM,cAAc,GAAG,OAAO,qBAAqB,CAAC,MAAM,CAAC;AAQjE,MAAM,WAAW,kBAAkB;IAIjC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAK5B,IAAI,CAAC,EAAE,cAAc,CAAC;IAKtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAKpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAKrB,SAAS,CAAC,EAAE,SAAS,CAAC;IAKtB,SAAS,CAAC,EAAE,MAAM,CAAC;IAKnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B"}
@@ -0,0 +1,115 @@
1
+ import { tokens } from '../../theme/design-tokens';
2
+ export const buttonSkinContractDef = {
3
+ id: "contract_button_skin_v1",
4
+ name: "button-skin",
5
+ category: "ui.skin",
6
+ description: "Visual contract for button skin implementations",
7
+ variants: {
8
+ primary: {
9
+ backgroundColor: tokens.colors.primary.main,
10
+ color: tokens.colors.primary.contrastText,
11
+ hover: {
12
+ backgroundColor: tokens.colors.primary.hover,
13
+ },
14
+ focus: {
15
+ outline: `${tokens.shadows.focusRing} ${tokens.colors.primary.focus}`,
16
+ outlineOffset: tokens.ui.outlineOffset,
17
+ ringColor: tokens.colors.primary.focus,
18
+ },
19
+ },
20
+ secondary: {
21
+ backgroundColor: tokens.colors.secondary.main,
22
+ color: tokens.colors.secondary.contrastText,
23
+ hover: {
24
+ backgroundColor: tokens.colors.secondary.hover,
25
+ },
26
+ focus: {
27
+ outline: `${tokens.shadows.focusRing} ${tokens.colors.secondary.focus}`,
28
+ outlineOffset: tokens.ui.outlineOffset,
29
+ ringColor: tokens.colors.secondary.focus,
30
+ },
31
+ },
32
+ outline: {
33
+ backgroundColor: tokens.colors.transparent,
34
+ borderColor: tokens.colors.neutral.border,
35
+ color: tokens.colors.neutral.text,
36
+ hover: {
37
+ backgroundColor: tokens.colors.neutral.bg,
38
+ },
39
+ focus: {
40
+ outline: `${tokens.shadows.focusRing} ${tokens.colors.primary.focus}`,
41
+ outlineOffset: tokens.ui.outlineOffset,
42
+ ringColor: tokens.colors.primary.focus,
43
+ },
44
+ },
45
+ ghost: {
46
+ backgroundColor: tokens.colors.transparent,
47
+ color: tokens.colors.neutral.text,
48
+ hover: {
49
+ backgroundColor: tokens.colors.secondary.main,
50
+ },
51
+ focus: {
52
+ outline: `${tokens.shadows.focusRing} ${tokens.colors.secondary.focus}`,
53
+ outlineOffset: tokens.ui.outlineOffset,
54
+ ringColor: tokens.colors.secondary.focus,
55
+ },
56
+ },
57
+ danger: {
58
+ backgroundColor: tokens.colors.danger.main,
59
+ color: tokens.colors.danger.contrastText,
60
+ hover: {
61
+ backgroundColor: tokens.colors.danger.hover,
62
+ },
63
+ focus: {
64
+ outline: `${tokens.shadows.focusRing} ${tokens.colors.danger.focus}`,
65
+ outlineOffset: tokens.ui.outlineOffset,
66
+ ringColor: tokens.colors.danger.focus,
67
+ },
68
+ },
69
+ },
70
+ sizes: {
71
+ sm: {
72
+ height: tokens.sizing[8],
73
+ padding: `0 ${tokens.spacing[3]}`,
74
+ fontSize: tokens.typography.fontSize.xs,
75
+ iconSize: tokens.sizing.icon.sm,
76
+ },
77
+ md: {
78
+ height: tokens.sizing[10],
79
+ padding: `0 ${tokens.spacing[4]}`,
80
+ fontSize: tokens.typography.fontSize.sm,
81
+ iconSize: tokens.sizing.icon.md,
82
+ },
83
+ lg: {
84
+ height: tokens.sizing[12],
85
+ padding: `0 ${tokens.spacing[6]}`,
86
+ fontSize: tokens.typography.fontSize.base,
87
+ iconSize: tokens.sizing.icon.lg,
88
+ },
89
+ },
90
+ base: {
91
+ display: 'inline-flex',
92
+ alignItems: 'center',
93
+ justifyContent: 'center',
94
+ borderRadius: tokens.borderRadius.md,
95
+ border: `1px solid ${tokens.colors.transparent}`,
96
+ cursor: 'pointer',
97
+ transition: tokens.transition.base,
98
+ fontWeight: tokens.typography.fontWeight.medium,
99
+ },
100
+ disabled: {
101
+ opacity: tokens.opacity.disabled,
102
+ cursor: 'not-allowed',
103
+ },
104
+ icons: {
105
+ leftSpacing: tokens.spacing[2],
106
+ rightSpacing: tokens.spacing[2],
107
+ ariaHidden: true,
108
+ },
109
+ loader: {
110
+ size: tokens.sizing.icon.md,
111
+ borderWidth: tokens.ui.outlineWidth,
112
+ animation: 'spin',
113
+ },
114
+ };
115
+ //# sourceMappingURL=button-skin-contract.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"button-skin-contract.js","sourceRoot":"","sources":["../../../../src/components/button/button-skin-contract.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAYnD,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,EAAE,EAAE,yBAAyB;IAC7B,IAAI,EAAE,aAAa;IACnB,QAAQ,EAAE,SAAS;IACnB,WAAW,EAAE,iDAAiD;IAG9D,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,eAAe,EAAE,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;YAC3C,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY;YACzC,KAAK,EAAE;gBACL,eAAe,EAAE,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK;aAC7C;YACD,KAAK,EAAE;gBACL,OAAO,EAAE,GAAG,MAAM,CAAC,OAAO,CAAC,SAAS,IAAI,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE;gBACrE,aAAa,EAAE,MAAM,CAAC,EAAE,CAAC,aAAa;gBACtC,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK;aACvC;SACF;QACD,SAAS,EAAE;YACT,eAAe,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI;YAC7C,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,YAAY;YAC3C,KAAK,EAAE;gBACL,eAAe,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK;aAC/C;YACD,KAAK,EAAE;gBACL,OAAO,EAAE,GAAG,MAAM,CAAC,OAAO,CAAC,SAAS,IAAI,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,EAAE;gBACvE,aAAa,EAAE,MAAM,CAAC,EAAE,CAAC,aAAa;gBACtC,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK;aACzC;SACF;QACD,OAAO,EAAE;YACP,eAAe,EAAE,MAAM,CAAC,MAAM,CAAC,WAAW;YAC1C,WAAW,EAAE,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM;YACzC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;YACjC,KAAK,EAAE;gBACL,eAAe,EAAE,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE;aAC1C;YACD,KAAK,EAAE;gBACL,OAAO,EAAE,GAAG,MAAM,CAAC,OAAO,CAAC,SAAS,IAAI,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE;gBACrE,aAAa,EAAE,MAAM,CAAC,EAAE,CAAC,aAAa;gBACtC,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK;aACvC;SACF;QACD,KAAK,EAAE;YACL,eAAe,EAAE,MAAM,CAAC,MAAM,CAAC,WAAW;YAC1C,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;YACjC,KAAK,EAAE;gBACL,eAAe,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI;aAC9C;YACD,KAAK,EAAE;gBACL,OAAO,EAAE,GAAG,MAAM,CAAC,OAAO,CAAC,SAAS,IAAI,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,EAAE;gBACvE,aAAa,EAAE,MAAM,CAAC,EAAE,CAAC,aAAa;gBACtC,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK;aACzC;SACF;QACD,MAAM,EAAE;YACN,eAAe,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI;YAC1C,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,YAAY;YACxC,KAAK,EAAE;gBACL,eAAe,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK;aAC5C;YACD,KAAK,EAAE;gBACL,OAAO,EAAE,GAAG,MAAM,CAAC,OAAO,CAAC,SAAS,IAAI,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE;gBACpE,aAAa,EAAE,MAAM,CAAC,EAAE,CAAC,aAAa;gBACtC,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK;aACtC;SACF;KACF;IAGD,KAAK,EAAE;QACL,EAAE,EAAE;YACF,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;YACxB,OAAO,EAAE,KAAK,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;YACjC,QAAQ,EAAE,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;YACvC,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;SAChC;QACD,EAAE,EAAE;YACF,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC;YACzB,OAAO,EAAE,KAAK,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;YACjC,QAAQ,EAAE,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;YACvC,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;SAChC;QACD,EAAE,EAAE;YACF,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC;YACzB,OAAO,EAAE,KAAK,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;YACjC,QAAQ,EAAE,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI;YACzC,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;SAChC;KACF;IAGD,IAAI,EAAE;QACJ,OAAO,EAAE,aAAa;QACtB,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,YAAY,EAAE,MAAM,CAAC,YAAY,CAAC,EAAE;QACpC,MAAM,EAAE,aAAa,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE;QAChD,MAAM,EAAE,SAAS;QACjB,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,IAAI;QAClC,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,UAAU,CAAC,MAAM;KAChD;IAGD,QAAQ,EAAE;QACR,OAAO,EAAE,MAAM,CAAC,OAAO,CAAC,QAAQ;QAChC,MAAM,EAAE,aAAa;KACtB;IAGD,KAAK,EAAE;QACL,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;QAC9B,YAAY,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;QAC/B,UAAU,EAAE,IAAI;KACjB;IAGD,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;QAC3B,WAAW,EAAE,MAAM,CAAC,EAAE,CAAC,YAAY;QACnC,SAAS,EAAE,MAAM;KAClB;CACO,CAAC"}
@@ -0,0 +1,3 @@
1
+ import { ButtonContract } from './button-contract';
2
+ export declare const ButtonNative: import("react").ForwardRefExoticComponent<ButtonContract & import("react").RefAttributes<HTMLButtonElement>>;
3
+ //# sourceMappingURL=button-skin-native.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"button-skin-native.d.ts","sourceRoot":"","sources":["../../../../src/components/button/button-skin-native.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAyDnD,eAAO,MAAM,YAAY,8GAqCxB,CAAC"}
@@ -0,0 +1,59 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { forwardRef } from 'react';
3
+ import { ButtonBase } from './button-base';
4
+ import { buttonSkinContractDef } from './button-skin-contract';
5
+ const baseStyles = buttonSkinContractDef.base;
6
+ const disabledStyles = buttonSkinContractDef.disabled;
7
+ const variantStyles = {
8
+ primary: {
9
+ backgroundColor: buttonSkinContractDef.variants.primary.backgroundColor,
10
+ color: buttonSkinContractDef.variants.primary.color,
11
+ },
12
+ secondary: {
13
+ backgroundColor: buttonSkinContractDef.variants.secondary.backgroundColor,
14
+ color: buttonSkinContractDef.variants.secondary.color,
15
+ },
16
+ outline: {
17
+ backgroundColor: buttonSkinContractDef.variants.outline.backgroundColor,
18
+ borderColor: buttonSkinContractDef.variants.outline.borderColor,
19
+ color: buttonSkinContractDef.variants.outline.color,
20
+ },
21
+ ghost: {
22
+ backgroundColor: buttonSkinContractDef.variants.ghost.backgroundColor,
23
+ color: buttonSkinContractDef.variants.ghost.color,
24
+ },
25
+ danger: {
26
+ backgroundColor: buttonSkinContractDef.variants.danger.backgroundColor,
27
+ color: buttonSkinContractDef.variants.danger.color,
28
+ },
29
+ };
30
+ const sizeStyles = {
31
+ sm: {
32
+ height: buttonSkinContractDef.sizes.sm.height,
33
+ padding: buttonSkinContractDef.sizes.sm.padding,
34
+ fontSize: buttonSkinContractDef.sizes.sm.fontSize,
35
+ },
36
+ md: {
37
+ height: buttonSkinContractDef.sizes.md.height,
38
+ padding: buttonSkinContractDef.sizes.md.padding,
39
+ fontSize: buttonSkinContractDef.sizes.md.fontSize,
40
+ },
41
+ lg: {
42
+ height: buttonSkinContractDef.sizes.lg.height,
43
+ padding: buttonSkinContractDef.sizes.lg.padding,
44
+ fontSize: buttonSkinContractDef.sizes.lg.fontSize,
45
+ },
46
+ };
47
+ export const ButtonNative = forwardRef(({ variant = 'primary', size = 'md', disabled, isLoading, style, ...props }, ref) => {
48
+ const isDisabled = disabled || isLoading;
49
+ const combinedStyle = {
50
+ ...baseStyles,
51
+ ...(variantStyles[variant] || variantStyles.primary),
52
+ ...(sizeStyles[size] || sizeStyles.md),
53
+ ...(isDisabled ? disabledStyles : {}),
54
+ ...style,
55
+ };
56
+ return (_jsx(ButtonBase, { ref: ref, style: combinedStyle, variant: variant, size: size, disabled: disabled, isLoading: isLoading, ...props }));
57
+ });
58
+ ButtonNative.displayName = 'ButtonNative';
59
+ //# sourceMappingURL=button-skin-native.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"button-skin-native.js","sourceRoot":"","sources":["../../../../src/components/button/button-skin-native.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,15 @@
1
+ import { ButtonContract } from './button-contract';
2
+ export declare const variantClasses: {
3
+ primary: string;
4
+ secondary: string;
5
+ outline: string;
6
+ ghost: string;
7
+ danger: string;
8
+ };
9
+ export declare const sizeClasses: {
10
+ sm: string;
11
+ md: string;
12
+ lg: string;
13
+ };
14
+ export declare const ButtonTailwind: import("react").ForwardRefExoticComponent<ButtonContract & import("react").RefAttributes<HTMLButtonElement>>;
15
+ //# sourceMappingURL=button-skin-tailwind.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"button-skin-tailwind.d.ts","sourceRoot":"","sources":["../../../../src/components/button/button-skin-tailwind.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAWnD,eAAO,MAAM,cAAc;;;;;;CAM1B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;CAIvB,CAAC;AA+BF,eAAO,MAAM,cAAc,8GA4B1B,CAAC"}
@@ -0,0 +1,43 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { forwardRef } from 'react';
3
+ import { ButtonBase } from './button-base';
4
+ import { buttonSkinContractDef } from './button-skin-contract';
5
+ import { tokens } from '../../theme/design-tokens';
6
+ const { variants, sizes, base, disabled, icons, loader } = buttonSkinContractDef;
7
+ export const variantClasses = {
8
+ primary: `bg-[${variants.primary.backgroundColor}] text-[${variants.primary.color}] hover:bg-[${variants.primary.hover.backgroundColor}] focus:ring-[${variants.primary.focus.ringColor}] focus:ring-[${tokens.ui.outlineWidth}] focus:ring-offset-[${variants.primary.focus.outlineOffset}]`,
9
+ secondary: `bg-[${variants.secondary.backgroundColor}] text-[${variants.secondary.color}] hover:bg-[${variants.secondary.hover.backgroundColor}] focus:ring-[${variants.secondary.focus.ringColor}] focus:ring-[${tokens.ui.outlineWidth}] focus:ring-offset-[${variants.secondary.focus.outlineOffset}]`,
10
+ outline: `border border-[${variants.outline.borderColor}] bg-[${variants.outline.backgroundColor}] text-[${variants.outline.color}] hover:bg-[${variants.outline.hover.backgroundColor}] focus:ring-[${variants.outline.focus.ringColor}] focus:ring-[${tokens.ui.outlineWidth}] focus:ring-offset-[${variants.outline.focus.outlineOffset}]`,
11
+ ghost: `bg-[${variants.ghost.backgroundColor}] text-[${variants.ghost.color}] hover:bg-[${variants.ghost.hover.backgroundColor}] focus:ring-[${variants.ghost.focus.ringColor}] focus:ring-[${tokens.ui.outlineWidth}] focus:ring-offset-[${variants.ghost.focus.outlineOffset}]`,
12
+ danger: `bg-[${variants.danger.backgroundColor}] text-[${variants.danger.color}] hover:bg-[${variants.danger.hover.backgroundColor}] focus:ring-[${variants.danger.focus.ringColor}] focus:ring-[${tokens.ui.outlineWidth}] focus:ring-offset-[${variants.danger.focus.outlineOffset}]`,
13
+ };
14
+ export const sizeClasses = {
15
+ sm: `h-[${sizes.sm.height}] [padding:${sizes.sm.padding.replace(/ /g, '_')}] text-[${sizes.sm.fontSize}]`,
16
+ md: `h-[${sizes.md.height}] [padding:${sizes.md.padding.replace(/ /g, '_')}] text-[${sizes.md.fontSize}]`,
17
+ lg: `h-[${sizes.lg.height}] [padding:${sizes.lg.padding.replace(/ /g, '_')}] text-[${sizes.lg.fontSize}]`,
18
+ };
19
+ const layoutClasses = `inline-flex items-center justify-center rounded-[${base.borderRadius}] font-[${base.fontWeight}] [transition:${base.transition.replace(/ /g, '_')}]`;
20
+ const stateClasses = `focus:outline-none disabled:opacity-[${disabled.opacity}] disabled:cursor-[${disabled.cursor}]`;
21
+ const childClasses = [
22
+ `[&_.button-icon-left]:mr-[${icons.rightSpacing}]`,
23
+ `[&_.button-icon-right]:ml-[${icons.leftSpacing}]`,
24
+ '[&_.button-loader]:animate-spin',
25
+ `[&_.button-loader]:border-[${loader.borderWidth}]`,
26
+ '[&_.button-loader]:border-current',
27
+ '[&_.button-loader]:border-t-transparent',
28
+ '[&_.button-loader]:rounded-full',
29
+ `[&_.button-loader]:h-[${loader.size}]`,
30
+ `[&_.button-loader]:w-[${loader.size}]`,
31
+ ].join(' ');
32
+ const baseClasses = `${layoutClasses} ${stateClasses} ${childClasses}`;
33
+ export const ButtonTailwind = forwardRef(({ variant = 'primary', size = 'md', className = '', ...props }, ref) => {
34
+ const combinedClassName = [
35
+ baseClasses,
36
+ variantClasses[variant],
37
+ sizeClasses[size],
38
+ className
39
+ ].filter(Boolean).join(' ');
40
+ return (_jsx(ButtonBase, { ref: ref, className: combinedClassName, variant: variant, size: size, ...props }));
41
+ });
42
+ ButtonTailwind.displayName = 'ButtonTailwind';
43
+ //# sourceMappingURL=button-skin-tailwind.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"button-skin-tailwind.js","sourceRoot":"","sources":["../../../../src/components/button/button-skin-tailwind.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,8 @@
1
+ export * from './button-contract';
2
+ export * from './button-skin-contract';
3
+ export * from './button-base';
4
+ export { ButtonTailwind as Button } from './button-skin-tailwind';
5
+ export { ButtonTailwind } from './button-skin-tailwind';
6
+ export { ButtonNative } from './button-skin-native';
7
+ export * from './button-examples';
8
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,cAAc,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,cAAc,mBAAmB,CAAC"}
@@ -0,0 +1,8 @@
1
+ export * from './button-contract';
2
+ export * from './button-skin-contract';
3
+ export * from './button-base';
4
+ export { ButtonTailwind as Button } from './button-skin-tailwind';
5
+ export { ButtonTailwind } from './button-skin-tailwind';
6
+ export { ButtonNative } from './button-skin-native';
7
+ export * from './button-examples';
8
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,cAAc,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,cAAc,mBAAmB,CAAC"}
@@ -0,0 +1,8 @@
1
+ export * from './input-contract';
2
+ export * from './input-skin-contract';
3
+ export * from './input-base';
4
+ export { InputTailwind as Input } from './input-skin-tailwind';
5
+ export { InputNative } from './input-skin-native';
6
+ export { InputTailwind } from './input-skin-tailwind';
7
+ export * from './input-examples';
8
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/input/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,aAAa,IAAI,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,cAAc,kBAAkB,CAAC"}
@@ -0,0 +1,8 @@
1
+ export * from './input-contract';
2
+ export * from './input-skin-contract';
3
+ export * from './input-base';
4
+ export { InputTailwind as Input } from './input-skin-tailwind';
5
+ export { InputNative } from './input-skin-native';
6
+ export { InputTailwind } from './input-skin-tailwind';
7
+ export * from './input-examples';
8
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,aAAa,IAAI,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,cAAc,kBAAkB,CAAC"}
@@ -0,0 +1,9 @@
1
+ import { InputContract } from './input-contract';
2
+ export interface InputBaseProps extends InputContract {
3
+ inputClassName?: string;
4
+ wrapperStyle?: React.CSSProperties;
5
+ isDisabled?: boolean;
6
+ isReadOnly?: boolean;
7
+ }
8
+ export declare const InputBase: import("react").ForwardRefExoticComponent<InputBaseProps & import("react").RefAttributes<HTMLInputElement>>;
9
+ //# sourceMappingURL=input-base.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"input-base.d.ts","sourceRoot":"","sources":["../../../../src/components/input/input-base.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,SAAS,6GAwDrB,CAAC"}
@@ -0,0 +1,14 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { forwardRef } from 'react';
3
+ export const InputBase = forwardRef(({ className = '', inputClassName = '', wrapperStyle, variant = 'outline', size = 'md', isInvalid = false, isDisabled = false, isReadOnly = false, leftIcon, rightIcon, disabled: _disabled, readOnly: _readOnly, ...props }, ref) => {
4
+ const disabled = isDisabled || _disabled;
5
+ const readOnly = isReadOnly || _readOnly;
6
+ const handleKeyDown = (event) => {
7
+ if (disabled || readOnly)
8
+ return;
9
+ props.onKeyDown?.(event);
10
+ };
11
+ return (_jsxs("div", { className: `input-wrapper ${className}`, style: wrapperStyle, "data-variant": variant, "data-size": size, children: [leftIcon && _jsx("div", { className: "input-icon-left", "aria-hidden": "true", children: leftIcon }), _jsx("input", { ref: ref, className: `input-element ${inputClassName}`, disabled: disabled, readOnly: readOnly, "aria-invalid": isInvalid, "aria-disabled": disabled, "aria-readonly": readOnly, onKeyDown: handleKeyDown, ...props }), rightIcon && _jsx("div", { className: "input-icon-right", "aria-hidden": "true", children: rightIcon })] }));
12
+ });
13
+ InputBase.displayName = 'InputBase';
14
+ //# sourceMappingURL=input-base.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"input-base.js","sourceRoot":"","sources":["../../../../src/components/input/input-base.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAUnC,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CACjC,CACE,EACE,SAAS,GAAG,EAAE,EACd,cAAc,GAAG,EAAE,EACnB,YAAY,EACZ,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,KAAK,EAClB,QAAQ,EACR,SAAS,EACT,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,SAAS,EACnB,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IAEF,MAAM,QAAQ,GAAG,UAAU,IAAI,SAAS,CAAC;IACzC,MAAM,QAAQ,GAAG,UAAU,IAAI,SAAS,CAAC;IAGzC,MAAM,aAAa,GAAG,CAAC,KAA4C,EAAE,EAAE;QACrE,IAAI,QAAQ,IAAI,QAAQ;YAAE,OAAO;QAGjC,KAAK,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,eACE,SAAS,EAAE,iBAAiB,SAAS,EAAE,EACvC,KAAK,EAAE,YAAY,kBACL,OAAO,eACV,IAAI,aAEd,QAAQ,IAAI,cAAK,SAAS,EAAC,iBAAiB,iBAAa,MAAM,YAAE,QAAQ,GAAO,EAEjF,gBACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,iBAAiB,cAAc,EAAE,EAC5C,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,kBACJ,SAAS,mBACR,QAAQ,mBACR,QAAQ,EACvB,SAAS,EAAE,aAAa,KACpB,KAAK,GACT,EAED,SAAS,IAAI,cAAK,SAAS,EAAC,kBAAkB,iBAAa,MAAM,YAAE,SAAS,GAAO,IAChF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC"}
@@ -0,0 +1,40 @@
1
+ import { ReactNode } from 'react';
2
+ export declare const inputContractDef: {
3
+ readonly id: "contract_input_v1";
4
+ readonly name: "input";
5
+ readonly category: "ui.component";
6
+ readonly description: "A text input component with support for icons and variants";
7
+ readonly variants: readonly [{
8
+ readonly name: "variant";
9
+ readonly type: "intent";
10
+ readonly values: readonly ["outline", "filled", "flushed"];
11
+ readonly defaultValue: "outline";
12
+ readonly description: "Visual style of the input";
13
+ }, {
14
+ readonly name: "size";
15
+ readonly type: "size";
16
+ readonly values: readonly ["sm", "md", "lg"];
17
+ readonly defaultValue: "md";
18
+ readonly description: "Size of the input";
19
+ }, {
20
+ readonly name: "isInvalid";
21
+ readonly type: "boolean";
22
+ readonly defaultValue: false;
23
+ readonly description: "Whether the input is invalid";
24
+ }];
25
+ };
26
+ type ExtractValues<T, Name> = T extends ReadonlyArray<infer U> ? U extends {
27
+ name: Name;
28
+ values: ReadonlyArray<infer V>;
29
+ } ? V : never : never;
30
+ export type InputVariant = ExtractValues<typeof inputContractDef.variants, "variant">;
31
+ export type InputSize = ExtractValues<typeof inputContractDef.variants, "size">;
32
+ export interface InputContract extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
33
+ variant?: InputVariant;
34
+ size?: InputSize;
35
+ isInvalid?: boolean;
36
+ leftIcon?: ReactNode;
37
+ rightIcon?: ReactNode;
38
+ }
39
+ export {};
40
+ //# sourceMappingURL=input-contract.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"input-contract.d.ts","sourceRoot":"","sources":["../../../../src/components/input/input-contract.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlC,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;CA2BnB,CAAC;AAIX,KAAK,aAAa,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,SAAS,aAAa,CAAC,MAAM,CAAC,CAAC,GAC1D,CAAC,SAAS;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC,CAAA;CAAE,GAAG,CAAC,GAAG,KAAK,GAAG,KAAK,CAAC;AAEjF,MAAM,MAAM,YAAY,GAAG,aAAa,CAAC,OAAO,gBAAgB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;AACtF,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC,OAAO,gBAAgB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;AAIhF,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC9F,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB"}
@@ -0,0 +1,29 @@
1
+ export const inputContractDef = {
2
+ id: "contract_input_v1",
3
+ name: "input",
4
+ category: "ui.component",
5
+ description: "A text input component with support for icons and variants",
6
+ variants: [
7
+ {
8
+ name: "variant",
9
+ type: "intent",
10
+ values: ["outline", "filled", "flushed"],
11
+ defaultValue: "outline",
12
+ description: "Visual style of the input"
13
+ },
14
+ {
15
+ name: "size",
16
+ type: "size",
17
+ values: ["sm", "md", "lg"],
18
+ defaultValue: "md",
19
+ description: "Size of the input"
20
+ },
21
+ {
22
+ name: "isInvalid",
23
+ type: "boolean",
24
+ defaultValue: false,
25
+ description: "Whether the input is invalid"
26
+ }
27
+ ]
28
+ };
29
+ //# sourceMappingURL=input-contract.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"input-contract.js","sourceRoot":"","sources":["../../../../src/components/input/input-contract.ts"],"names":[],"mappings":"AAKA,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,EAAE,EAAE,mBAAmB;IACvB,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,cAAc;IACxB,WAAW,EAAE,4DAA4D;IACzE,QAAQ,EAAE;QACR;YACE,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,QAAQ;YACd,MAAM,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC;YACxC,YAAY,EAAE,SAAS;YACvB,WAAW,EAAE,2BAA2B;SACzC;QACD;YACE,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,MAAM;YACZ,MAAM,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YAC1B,YAAY,EAAE,IAAI;YAClB,WAAW,EAAE,mBAAmB;SACjC;QACD;YACE,IAAI,EAAE,WAAW;YACjB,IAAI,EAAE,SAAS;YACf,YAAY,EAAE,KAAK;YACnB,WAAW,EAAE,8BAA8B;SAC5C;KACF;CACO,CAAC"}
@@ -0,0 +1,12 @@
1
+ export declare function InputVariantExamples(): import("react/jsx-runtime").JSX.Element;
2
+ export declare function InputSizeExamples(): import("react/jsx-runtime").JSX.Element;
3
+ export declare function InputIconExamples(): import("react/jsx-runtime").JSX.Element;
4
+ export declare function InputStateExamples(): import("react/jsx-runtime").JSX.Element;
5
+ export declare function InputCombinedExamples(): import("react/jsx-runtime").JSX.Element;
6
+ export declare function InputNativeSkinExamples(): import("react/jsx-runtime").JSX.Element;
7
+ export declare function InputInteractiveExamples(): import("react/jsx-runtime").JSX.Element;
8
+ export declare function InputAccessibilityExamples(): import("react/jsx-runtime").JSX.Element;
9
+ export declare function InputCustomStylingExamples(): import("react/jsx-runtime").JSX.Element;
10
+ export declare function FormExamples(): import("react/jsx-runtime").JSX.Element;
11
+ export declare function AllInputExamples(): import("react/jsx-runtime").JSX.Element;
12
+ //# sourceMappingURL=input-examples.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"input-examples.d.ts","sourceRoot":"","sources":["../../../../src/components/input/input-examples.tsx"],"names":[],"mappings":"AAeA,wBAAgB,oBAAoB,4CAQnC;AAMD,wBAAgB,iBAAiB,4CAQhC;AAMD,wBAAgB,iBAAiB,4CAYhC;AAMD,wBAAgB,kBAAkB,4CASjC;AAMD,wBAAgB,qBAAqB,4CA+BpC;AAMD,wBAAgB,uBAAuB,4CA2BtC;AAMD,wBAAgB,wBAAwB,4CA8BvC;AAMD,wBAAgB,0BAA0B,4CA2BzC;AAMD,wBAAgB,0BAA0B,4CAoBzC;AAMD,wBAAgB,YAAY,4CA0C3B;AAMD,wBAAgB,gBAAgB,4CAsD/B"}