@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.
- package/LICENSE +21 -0
- package/README.md +122 -0
- package/lib/cjs/components/button/button-base.d.ts +3 -0
- package/lib/cjs/components/button/button-base.d.ts.map +1 -0
- package/lib/cjs/components/button/button-base.js +21 -0
- package/lib/cjs/components/button/button-base.js.map +1 -0
- package/lib/cjs/components/button/button-contract.d.ts +54 -0
- package/lib/cjs/components/button/button-contract.d.ts.map +1 -0
- package/lib/cjs/components/button/button-contract.js +32 -0
- package/lib/cjs/components/button/button-contract.js.map +1 -0
- package/lib/cjs/components/button/button-examples.d.ts +11 -0
- package/lib/cjs/components/button/button-examples.d.ts.map +1 -0
- package/lib/cjs/components/button/button-examples.js +67 -0
- package/lib/cjs/components/button/button-examples.js.map +1 -0
- package/lib/cjs/components/button/button-skin-contract.d.ts +133 -0
- package/lib/cjs/components/button/button-skin-contract.d.ts.map +1 -0
- package/lib/cjs/components/button/button-skin-contract.js +118 -0
- package/lib/cjs/components/button/button-skin-contract.js.map +1 -0
- package/lib/cjs/components/button/button-skin-native.d.ts +3 -0
- package/lib/cjs/components/button/button-skin-native.d.ts.map +1 -0
- package/lib/cjs/components/button/button-skin-native.js +62 -0
- package/lib/cjs/components/button/button-skin-native.js.map +1 -0
- package/lib/cjs/components/button/button-skin-tailwind.d.ts +15 -0
- package/lib/cjs/components/button/button-skin-tailwind.d.ts.map +1 -0
- package/lib/cjs/components/button/button-skin-tailwind.js +46 -0
- package/lib/cjs/components/button/button-skin-tailwind.js.map +1 -0
- package/lib/cjs/components/button/index.d.ts +8 -0
- package/lib/cjs/components/button/index.d.ts.map +1 -0
- package/lib/cjs/components/button/index.js +28 -0
- package/lib/cjs/components/button/index.js.map +1 -0
- package/lib/cjs/components/input/index.d.ts +8 -0
- package/lib/cjs/components/input/index.d.ts.map +1 -0
- package/lib/cjs/components/input/index.js +28 -0
- package/lib/cjs/components/input/index.js.map +1 -0
- package/lib/cjs/components/input/input-base.d.ts +9 -0
- package/lib/cjs/components/input/input-base.d.ts.map +1 -0
- package/lib/cjs/components/input/input-base.js +17 -0
- package/lib/cjs/components/input/input-base.js.map +1 -0
- package/lib/cjs/components/input/input-contract.d.ts +40 -0
- package/lib/cjs/components/input/input-contract.d.ts.map +1 -0
- package/lib/cjs/components/input/input-contract.js +32 -0
- package/lib/cjs/components/input/input-contract.js.map +1 -0
- package/lib/cjs/components/input/input-examples.d.ts +12 -0
- package/lib/cjs/components/input/input-examples.d.ts.map +1 -0
- package/lib/cjs/components/input/input-examples.js +67 -0
- package/lib/cjs/components/input/input-examples.js.map +1 -0
- package/lib/cjs/components/input/input-skin-contract.d.ts +93 -0
- package/lib/cjs/components/input/input-skin-contract.d.ts.map +1 -0
- package/lib/cjs/components/input/input-skin-contract.js +97 -0
- package/lib/cjs/components/input/input-skin-contract.js.map +1 -0
- package/lib/cjs/components/input/input-skin-native.d.ts +3 -0
- package/lib/cjs/components/input/input-skin-native.d.ts.map +1 -0
- package/lib/cjs/components/input/input-skin-native.js +68 -0
- package/lib/cjs/components/input/input-skin-native.js.map +1 -0
- package/lib/cjs/components/input/input-skin-tailwind.d.ts +18 -0
- package/lib/cjs/components/input/input-skin-tailwind.d.ts.map +1 -0
- package/lib/cjs/components/input/input-skin-tailwind.js +49 -0
- package/lib/cjs/components/input/input-skin-tailwind.js.map +1 -0
- package/lib/cjs/index.d.ts +4 -0
- package/lib/cjs/index.d.ts.map +1 -0
- package/lib/cjs/index.js +20 -0
- package/lib/cjs/index.js.map +1 -0
- package/lib/cjs/package.json +1 -0
- package/lib/cjs/test-setup.d.ts +2 -0
- package/lib/cjs/test-setup.d.ts.map +1 -0
- package/lib/cjs/test-setup.js +4 -0
- package/lib/cjs/test-setup.js.map +1 -0
- package/lib/cjs/theme/design-tokens.d.ts +200 -0
- package/lib/cjs/theme/design-tokens.d.ts.map +1 -0
- package/lib/cjs/theme/design-tokens.js +177 -0
- package/lib/cjs/theme/design-tokens.js.map +1 -0
- package/lib/cjs/theme/index.d.ts +3 -0
- package/lib/cjs/theme/index.d.ts.map +1 -0
- package/lib/cjs/theme/index.js +19 -0
- package/lib/cjs/theme/index.js.map +1 -0
- package/lib/cjs/theme/theme-provider.d.ts +16 -0
- package/lib/cjs/theme/theme-provider.d.ts.map +1 -0
- package/lib/cjs/theme/theme-provider.js +39 -0
- package/lib/cjs/theme/theme-provider.js.map +1 -0
- package/lib/cjs/usage-example.d.ts +2 -0
- package/lib/cjs/usage-example.d.ts.map +1 -0
- package/lib/cjs/usage-example.js +13 -0
- package/lib/cjs/usage-example.js.map +1 -0
- package/lib/esm/components/button/button-base.d.ts +3 -0
- package/lib/esm/components/button/button-base.d.ts.map +1 -0
- package/lib/esm/components/button/button-base.js +18 -0
- package/lib/esm/components/button/button-base.js.map +1 -0
- package/lib/esm/components/button/button-contract.d.ts +54 -0
- package/lib/esm/components/button/button-contract.d.ts.map +1 -0
- package/lib/esm/components/button/button-contract.js +29 -0
- package/lib/esm/components/button/button-contract.js.map +1 -0
- package/lib/esm/components/button/button-examples.d.ts +11 -0
- package/lib/esm/components/button/button-examples.d.ts.map +1 -0
- package/lib/esm/components/button/button-examples.js +52 -0
- package/lib/esm/components/button/button-examples.js.map +1 -0
- package/lib/esm/components/button/button-skin-contract.d.ts +133 -0
- package/lib/esm/components/button/button-skin-contract.d.ts.map +1 -0
- package/lib/esm/components/button/button-skin-contract.js +115 -0
- package/lib/esm/components/button/button-skin-contract.js.map +1 -0
- package/lib/esm/components/button/button-skin-native.d.ts +3 -0
- package/lib/esm/components/button/button-skin-native.d.ts.map +1 -0
- package/lib/esm/components/button/button-skin-native.js +59 -0
- package/lib/esm/components/button/button-skin-native.js.map +1 -0
- package/lib/esm/components/button/button-skin-tailwind.d.ts +15 -0
- package/lib/esm/components/button/button-skin-tailwind.d.ts.map +1 -0
- package/lib/esm/components/button/button-skin-tailwind.js +43 -0
- package/lib/esm/components/button/button-skin-tailwind.js.map +1 -0
- package/lib/esm/components/button/index.d.ts +8 -0
- package/lib/esm/components/button/index.d.ts.map +1 -0
- package/lib/esm/components/button/index.js +8 -0
- package/lib/esm/components/button/index.js.map +1 -0
- package/lib/esm/components/input/index.d.ts +8 -0
- package/lib/esm/components/input/index.d.ts.map +1 -0
- package/lib/esm/components/input/index.js +8 -0
- package/lib/esm/components/input/index.js.map +1 -0
- package/lib/esm/components/input/input-base.d.ts +9 -0
- package/lib/esm/components/input/input-base.d.ts.map +1 -0
- package/lib/esm/components/input/input-base.js +14 -0
- package/lib/esm/components/input/input-base.js.map +1 -0
- package/lib/esm/components/input/input-contract.d.ts +40 -0
- package/lib/esm/components/input/input-contract.d.ts.map +1 -0
- package/lib/esm/components/input/input-contract.js +29 -0
- package/lib/esm/components/input/input-contract.js.map +1 -0
- package/lib/esm/components/input/input-examples.d.ts +12 -0
- package/lib/esm/components/input/input-examples.d.ts.map +1 -0
- package/lib/esm/components/input/input-examples.js +51 -0
- package/lib/esm/components/input/input-examples.js.map +1 -0
- package/lib/esm/components/input/input-skin-contract.d.ts +93 -0
- package/lib/esm/components/input/input-skin-contract.d.ts.map +1 -0
- package/lib/esm/components/input/input-skin-contract.js +94 -0
- package/lib/esm/components/input/input-skin-contract.js.map +1 -0
- package/lib/esm/components/input/input-skin-native.d.ts +3 -0
- package/lib/esm/components/input/input-skin-native.d.ts.map +1 -0
- package/lib/esm/components/input/input-skin-native.js +65 -0
- package/lib/esm/components/input/input-skin-native.js.map +1 -0
- package/lib/esm/components/input/input-skin-tailwind.d.ts +18 -0
- package/lib/esm/components/input/input-skin-tailwind.d.ts.map +1 -0
- package/lib/esm/components/input/input-skin-tailwind.js +46 -0
- package/lib/esm/components/input/input-skin-tailwind.js.map +1 -0
- package/lib/esm/index.d.ts +4 -0
- package/lib/esm/index.d.ts.map +1 -0
- package/lib/esm/index.js +4 -0
- package/lib/esm/index.js.map +1 -0
- package/lib/esm/package.json +1 -0
- package/lib/esm/test-setup.d.ts +2 -0
- package/lib/esm/test-setup.d.ts.map +1 -0
- package/lib/esm/test-setup.js +2 -0
- package/lib/esm/test-setup.js.map +1 -0
- package/lib/esm/theme/design-tokens.d.ts +200 -0
- package/lib/esm/theme/design-tokens.d.ts.map +1 -0
- package/lib/esm/theme/design-tokens.js +174 -0
- package/lib/esm/theme/design-tokens.js.map +1 -0
- package/lib/esm/theme/index.d.ts +3 -0
- package/lib/esm/theme/index.d.ts.map +1 -0
- package/lib/esm/theme/index.js +3 -0
- package/lib/esm/theme/index.js.map +1 -0
- package/lib/esm/theme/theme-provider.d.ts +16 -0
- package/lib/esm/theme/theme-provider.d.ts.map +1 -0
- package/lib/esm/theme/theme-provider.js +34 -0
- package/lib/esm/theme/theme-provider.js.map +1 -0
- package/lib/esm/usage-example.d.ts +2 -0
- package/lib/esm/usage-example.d.ts.map +1 -0
- package/lib/esm/usage-example.js +10 -0
- package/lib/esm/usage-example.js.map +1 -0
- package/package.json +48 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button-skin-contract.js","sourceRoot":"","sources":["../../../../src/components/button/button-skin-contract.ts"],"names":[],"mappings":"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"}
|
|
@@ -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,62 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.ButtonNative = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_1 = require("react");
|
|
6
|
+
const button_base_1 = require("./button-base");
|
|
7
|
+
const button_skin_contract_1 = require("./button-skin-contract");
|
|
8
|
+
const baseStyles = button_skin_contract_1.buttonSkinContractDef.base;
|
|
9
|
+
const disabledStyles = button_skin_contract_1.buttonSkinContractDef.disabled;
|
|
10
|
+
const variantStyles = {
|
|
11
|
+
primary: {
|
|
12
|
+
backgroundColor: button_skin_contract_1.buttonSkinContractDef.variants.primary.backgroundColor,
|
|
13
|
+
color: button_skin_contract_1.buttonSkinContractDef.variants.primary.color,
|
|
14
|
+
},
|
|
15
|
+
secondary: {
|
|
16
|
+
backgroundColor: button_skin_contract_1.buttonSkinContractDef.variants.secondary.backgroundColor,
|
|
17
|
+
color: button_skin_contract_1.buttonSkinContractDef.variants.secondary.color,
|
|
18
|
+
},
|
|
19
|
+
outline: {
|
|
20
|
+
backgroundColor: button_skin_contract_1.buttonSkinContractDef.variants.outline.backgroundColor,
|
|
21
|
+
borderColor: button_skin_contract_1.buttonSkinContractDef.variants.outline.borderColor,
|
|
22
|
+
color: button_skin_contract_1.buttonSkinContractDef.variants.outline.color,
|
|
23
|
+
},
|
|
24
|
+
ghost: {
|
|
25
|
+
backgroundColor: button_skin_contract_1.buttonSkinContractDef.variants.ghost.backgroundColor,
|
|
26
|
+
color: button_skin_contract_1.buttonSkinContractDef.variants.ghost.color,
|
|
27
|
+
},
|
|
28
|
+
danger: {
|
|
29
|
+
backgroundColor: button_skin_contract_1.buttonSkinContractDef.variants.danger.backgroundColor,
|
|
30
|
+
color: button_skin_contract_1.buttonSkinContractDef.variants.danger.color,
|
|
31
|
+
},
|
|
32
|
+
};
|
|
33
|
+
const sizeStyles = {
|
|
34
|
+
sm: {
|
|
35
|
+
height: button_skin_contract_1.buttonSkinContractDef.sizes.sm.height,
|
|
36
|
+
padding: button_skin_contract_1.buttonSkinContractDef.sizes.sm.padding,
|
|
37
|
+
fontSize: button_skin_contract_1.buttonSkinContractDef.sizes.sm.fontSize,
|
|
38
|
+
},
|
|
39
|
+
md: {
|
|
40
|
+
height: button_skin_contract_1.buttonSkinContractDef.sizes.md.height,
|
|
41
|
+
padding: button_skin_contract_1.buttonSkinContractDef.sizes.md.padding,
|
|
42
|
+
fontSize: button_skin_contract_1.buttonSkinContractDef.sizes.md.fontSize,
|
|
43
|
+
},
|
|
44
|
+
lg: {
|
|
45
|
+
height: button_skin_contract_1.buttonSkinContractDef.sizes.lg.height,
|
|
46
|
+
padding: button_skin_contract_1.buttonSkinContractDef.sizes.lg.padding,
|
|
47
|
+
fontSize: button_skin_contract_1.buttonSkinContractDef.sizes.lg.fontSize,
|
|
48
|
+
},
|
|
49
|
+
};
|
|
50
|
+
exports.ButtonNative = (0, react_1.forwardRef)(({ variant = 'primary', size = 'md', disabled, isLoading, style, ...props }, ref) => {
|
|
51
|
+
const isDisabled = disabled || isLoading;
|
|
52
|
+
const combinedStyle = {
|
|
53
|
+
...baseStyles,
|
|
54
|
+
...(variantStyles[variant] || variantStyles.primary),
|
|
55
|
+
...(sizeStyles[size] || sizeStyles.md),
|
|
56
|
+
...(isDisabled ? disabledStyles : {}),
|
|
57
|
+
...style,
|
|
58
|
+
};
|
|
59
|
+
return ((0, jsx_runtime_1.jsx)(button_base_1.ButtonBase, { ref: ref, style: combinedStyle, variant: variant, size: size, disabled: disabled, isLoading: isLoading, ...props }));
|
|
60
|
+
});
|
|
61
|
+
exports.ButtonNative.displayName = 'ButtonNative';
|
|
62
|
+
//# 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,46 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.ButtonTailwind = exports.sizeClasses = exports.variantClasses = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_1 = require("react");
|
|
6
|
+
const button_base_1 = require("./button-base");
|
|
7
|
+
const button_skin_contract_1 = require("./button-skin-contract");
|
|
8
|
+
const design_tokens_1 = require("../../theme/design-tokens");
|
|
9
|
+
const { variants, sizes, base, disabled, icons, loader } = button_skin_contract_1.buttonSkinContractDef;
|
|
10
|
+
exports.variantClasses = {
|
|
11
|
+
primary: `bg-[${variants.primary.backgroundColor}] text-[${variants.primary.color}] hover:bg-[${variants.primary.hover.backgroundColor}] focus:ring-[${variants.primary.focus.ringColor}] focus:ring-[${design_tokens_1.tokens.ui.outlineWidth}] focus:ring-offset-[${variants.primary.focus.outlineOffset}]`,
|
|
12
|
+
secondary: `bg-[${variants.secondary.backgroundColor}] text-[${variants.secondary.color}] hover:bg-[${variants.secondary.hover.backgroundColor}] focus:ring-[${variants.secondary.focus.ringColor}] focus:ring-[${design_tokens_1.tokens.ui.outlineWidth}] focus:ring-offset-[${variants.secondary.focus.outlineOffset}]`,
|
|
13
|
+
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-[${design_tokens_1.tokens.ui.outlineWidth}] focus:ring-offset-[${variants.outline.focus.outlineOffset}]`,
|
|
14
|
+
ghost: `bg-[${variants.ghost.backgroundColor}] text-[${variants.ghost.color}] hover:bg-[${variants.ghost.hover.backgroundColor}] focus:ring-[${variants.ghost.focus.ringColor}] focus:ring-[${design_tokens_1.tokens.ui.outlineWidth}] focus:ring-offset-[${variants.ghost.focus.outlineOffset}]`,
|
|
15
|
+
danger: `bg-[${variants.danger.backgroundColor}] text-[${variants.danger.color}] hover:bg-[${variants.danger.hover.backgroundColor}] focus:ring-[${variants.danger.focus.ringColor}] focus:ring-[${design_tokens_1.tokens.ui.outlineWidth}] focus:ring-offset-[${variants.danger.focus.outlineOffset}]`,
|
|
16
|
+
};
|
|
17
|
+
exports.sizeClasses = {
|
|
18
|
+
sm: `h-[${sizes.sm.height}] [padding:${sizes.sm.padding.replace(/ /g, '_')}] text-[${sizes.sm.fontSize}]`,
|
|
19
|
+
md: `h-[${sizes.md.height}] [padding:${sizes.md.padding.replace(/ /g, '_')}] text-[${sizes.md.fontSize}]`,
|
|
20
|
+
lg: `h-[${sizes.lg.height}] [padding:${sizes.lg.padding.replace(/ /g, '_')}] text-[${sizes.lg.fontSize}]`,
|
|
21
|
+
};
|
|
22
|
+
const layoutClasses = `inline-flex items-center justify-center rounded-[${base.borderRadius}] font-[${base.fontWeight}] [transition:${base.transition.replace(/ /g, '_')}]`;
|
|
23
|
+
const stateClasses = `focus:outline-none disabled:opacity-[${disabled.opacity}] disabled:cursor-[${disabled.cursor}]`;
|
|
24
|
+
const childClasses = [
|
|
25
|
+
`[&_.button-icon-left]:mr-[${icons.rightSpacing}]`,
|
|
26
|
+
`[&_.button-icon-right]:ml-[${icons.leftSpacing}]`,
|
|
27
|
+
'[&_.button-loader]:animate-spin',
|
|
28
|
+
`[&_.button-loader]:border-[${loader.borderWidth}]`,
|
|
29
|
+
'[&_.button-loader]:border-current',
|
|
30
|
+
'[&_.button-loader]:border-t-transparent',
|
|
31
|
+
'[&_.button-loader]:rounded-full',
|
|
32
|
+
`[&_.button-loader]:h-[${loader.size}]`,
|
|
33
|
+
`[&_.button-loader]:w-[${loader.size}]`,
|
|
34
|
+
].join(' ');
|
|
35
|
+
const baseClasses = `${layoutClasses} ${stateClasses} ${childClasses}`;
|
|
36
|
+
exports.ButtonTailwind = (0, react_1.forwardRef)(({ variant = 'primary', size = 'md', className = '', ...props }, ref) => {
|
|
37
|
+
const combinedClassName = [
|
|
38
|
+
baseClasses,
|
|
39
|
+
exports.variantClasses[variant],
|
|
40
|
+
exports.sizeClasses[size],
|
|
41
|
+
className
|
|
42
|
+
].filter(Boolean).join(' ');
|
|
43
|
+
return ((0, jsx_runtime_1.jsx)(button_base_1.ButtonBase, { ref: ref, className: combinedClassName, variant: variant, size: size, ...props }));
|
|
44
|
+
});
|
|
45
|
+
exports.ButtonTailwind.displayName = 'ButtonTailwind';
|
|
46
|
+
//# 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,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.ButtonNative = exports.ButtonTailwind = exports.Button = void 0;
|
|
18
|
+
__exportStar(require("./button-contract"), exports);
|
|
19
|
+
__exportStar(require("./button-skin-contract"), exports);
|
|
20
|
+
__exportStar(require("./button-base"), exports);
|
|
21
|
+
var button_skin_tailwind_1 = require("./button-skin-tailwind");
|
|
22
|
+
Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return button_skin_tailwind_1.ButtonTailwind; } });
|
|
23
|
+
var button_skin_tailwind_2 = require("./button-skin-tailwind");
|
|
24
|
+
Object.defineProperty(exports, "ButtonTailwind", { enumerable: true, get: function () { return button_skin_tailwind_2.ButtonTailwind; } });
|
|
25
|
+
var button_skin_native_1 = require("./button-skin-native");
|
|
26
|
+
Object.defineProperty(exports, "ButtonNative", { enumerable: true, get: function () { return button_skin_native_1.ButtonNative; } });
|
|
27
|
+
__exportStar(require("./button-examples"), exports);
|
|
28
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/button/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,oDAAkC;AAClC,yDAAuC;AACvC,gDAA8B;AAC9B,+DAAkE;AAAzD,8GAAA,cAAc,OAAU;AACjC,+DAAwD;AAA/C,sHAAA,cAAc,OAAA;AACvB,2DAAoD;AAA3C,kHAAA,YAAY,OAAA;AACrB,oDAAkC"}
|
|
@@ -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,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.InputTailwind = exports.InputNative = exports.Input = void 0;
|
|
18
|
+
__exportStar(require("./input-contract"), exports);
|
|
19
|
+
__exportStar(require("./input-skin-contract"), exports);
|
|
20
|
+
__exportStar(require("./input-base"), exports);
|
|
21
|
+
var input_skin_tailwind_1 = require("./input-skin-tailwind");
|
|
22
|
+
Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return input_skin_tailwind_1.InputTailwind; } });
|
|
23
|
+
var input_skin_native_1 = require("./input-skin-native");
|
|
24
|
+
Object.defineProperty(exports, "InputNative", { enumerable: true, get: function () { return input_skin_native_1.InputNative; } });
|
|
25
|
+
var input_skin_tailwind_2 = require("./input-skin-tailwind");
|
|
26
|
+
Object.defineProperty(exports, "InputTailwind", { enumerable: true, get: function () { return input_skin_tailwind_2.InputTailwind; } });
|
|
27
|
+
__exportStar(require("./input-examples"), exports);
|
|
28
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,mDAAiC;AACjC,wDAAsC;AACtC,+CAA6B;AAC7B,6DAA+D;AAAtD,4GAAA,aAAa,OAAS;AAC/B,yDAAkD;AAAzC,gHAAA,WAAW,OAAA;AACpB,6DAAsD;AAA7C,oHAAA,aAAa,OAAA;AACtB,mDAAiC"}
|
|
@@ -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,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.InputBase = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_1 = require("react");
|
|
6
|
+
exports.InputBase = (0, react_1.forwardRef)(({ className = '', inputClassName = '', wrapperStyle, variant = 'outline', size = 'md', isInvalid = false, isDisabled = false, isReadOnly = false, leftIcon, rightIcon, disabled: _disabled, readOnly: _readOnly, ...props }, ref) => {
|
|
7
|
+
const disabled = isDisabled || _disabled;
|
|
8
|
+
const readOnly = isReadOnly || _readOnly;
|
|
9
|
+
const handleKeyDown = (event) => {
|
|
10
|
+
if (disabled || readOnly)
|
|
11
|
+
return;
|
|
12
|
+
props.onKeyDown?.(event);
|
|
13
|
+
};
|
|
14
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: `input-wrapper ${className}`, style: wrapperStyle, "data-variant": variant, "data-size": size, children: [leftIcon && (0, jsx_runtime_1.jsx)("div", { className: "input-icon-left", "aria-hidden": "true", children: leftIcon }), (0, jsx_runtime_1.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 && (0, jsx_runtime_1.jsx)("div", { className: "input-icon-right", "aria-hidden": "true", children: rightIcon })] }));
|
|
15
|
+
});
|
|
16
|
+
exports.InputBase.displayName = 'InputBase';
|
|
17
|
+
//# 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,iCAAmC;AAUtB,QAAA,SAAS,GAAG,IAAA,kBAAU,EACjC,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,iCACE,SAAS,EAAE,iBAAiB,SAAS,EAAE,EACvC,KAAK,EAAE,YAAY,kBACL,OAAO,eACV,IAAI,aAEd,QAAQ,IAAI,gCAAK,SAAS,EAAC,iBAAiB,iBAAa,MAAM,YAAE,QAAQ,GAAO,EAEjF,kCACE,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,gCAAK,SAAS,EAAC,kBAAkB,iBAAa,MAAM,YAAE,SAAS,GAAO,IAChF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,iBAAS,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,32 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.inputContractDef = void 0;
|
|
4
|
+
exports.inputContractDef = {
|
|
5
|
+
id: "contract_input_v1",
|
|
6
|
+
name: "input",
|
|
7
|
+
category: "ui.component",
|
|
8
|
+
description: "A text input component with support for icons and variants",
|
|
9
|
+
variants: [
|
|
10
|
+
{
|
|
11
|
+
name: "variant",
|
|
12
|
+
type: "intent",
|
|
13
|
+
values: ["outline", "filled", "flushed"],
|
|
14
|
+
defaultValue: "outline",
|
|
15
|
+
description: "Visual style of the input"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
name: "size",
|
|
19
|
+
type: "size",
|
|
20
|
+
values: ["sm", "md", "lg"],
|
|
21
|
+
defaultValue: "md",
|
|
22
|
+
description: "Size of the input"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
name: "isInvalid",
|
|
26
|
+
type: "boolean",
|
|
27
|
+
defaultValue: false,
|
|
28
|
+
description: "Whether the input is invalid"
|
|
29
|
+
}
|
|
30
|
+
]
|
|
31
|
+
};
|
|
32
|
+
//# 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,QAAA,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"}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.InputVariantExamples = InputVariantExamples;
|
|
7
|
+
exports.InputSizeExamples = InputSizeExamples;
|
|
8
|
+
exports.InputIconExamples = InputIconExamples;
|
|
9
|
+
exports.InputStateExamples = InputStateExamples;
|
|
10
|
+
exports.InputCombinedExamples = InputCombinedExamples;
|
|
11
|
+
exports.InputNativeSkinExamples = InputNativeSkinExamples;
|
|
12
|
+
exports.InputInteractiveExamples = InputInteractiveExamples;
|
|
13
|
+
exports.InputAccessibilityExamples = InputAccessibilityExamples;
|
|
14
|
+
exports.InputCustomStylingExamples = InputCustomStylingExamples;
|
|
15
|
+
exports.FormExamples = FormExamples;
|
|
16
|
+
exports.AllInputExamples = AllInputExamples;
|
|
17
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
18
|
+
const react_1 = __importDefault(require("react"));
|
|
19
|
+
const input_skin_tailwind_1 = require("./input-skin-tailwind");
|
|
20
|
+
const input_skin_native_1 = require("./input-skin-native");
|
|
21
|
+
function InputVariantExamples() {
|
|
22
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { variant: "outline", placeholder: "Outline input" }), (0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { variant: "filled", placeholder: "Filled input" }), (0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { variant: "flushed", placeholder: "Flushed input" })] }));
|
|
23
|
+
}
|
|
24
|
+
function InputSizeExamples() {
|
|
25
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { size: "sm", placeholder: "Small input" }), (0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { size: "md", placeholder: "Medium input" }), (0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { size: "lg", placeholder: "Large input" })] }));
|
|
26
|
+
}
|
|
27
|
+
function InputIconExamples() {
|
|
28
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { leftIcon: (0, jsx_runtime_1.jsx)("span", { children: "\uD83D\uDD0D" }), placeholder: "Search..." }), (0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { rightIcon: (0, jsx_runtime_1.jsx)("span", { children: "\uD83D\uDCC5" }), placeholder: "Select date" }), (0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { leftIcon: (0, jsx_runtime_1.jsx)("span", { children: "\uD83D\uDC64" }), rightIcon: (0, jsx_runtime_1.jsx)("span", { children: "\u2713" }), placeholder: "Username" })] }));
|
|
29
|
+
}
|
|
30
|
+
function InputStateExamples() {
|
|
31
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { placeholder: "Normal input" }), (0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { isInvalid: true, placeholder: "Invalid input" }), (0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { disabled: true, placeholder: "Disabled input" }), (0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { readOnly: true, placeholder: "Read only input" })] }));
|
|
32
|
+
}
|
|
33
|
+
function InputCombinedExamples() {
|
|
34
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { variant: "outline", size: "sm", placeholder: "Small outline" }), (0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { variant: "outline", size: "md", placeholder: "Medium outline" }), (0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { variant: "outline", size: "lg", placeholder: "Large outline" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { variant: "filled", leftIcon: (0, jsx_runtime_1.jsx)("span", { children: "\uD83D\uDCE7" }), placeholder: "Email" }), (0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { variant: "filled", rightIcon: (0, jsx_runtime_1.jsx)("span", { children: "\uD83D\uDD12" }), placeholder: "Password" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { variant: "flushed", placeholder: "Normal" }), (0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { variant: "flushed", isInvalid: true, placeholder: "Invalid" }), (0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { variant: "flushed", disabled: true, placeholder: "Disabled" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { variant: "outline", leftIcon: (0, jsx_runtime_1.jsx)("span", { children: "\uD83D\uDD0D" }), placeholder: "Search" }), (0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { variant: "filled", leftIcon: (0, jsx_runtime_1.jsx)("span", { children: "\uD83D\uDC64" }), placeholder: "Username" }), (0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { variant: "flushed", rightIcon: (0, jsx_runtime_1.jsx)("span", { children: "\u2713" }), placeholder: "Confirm" })] })] }));
|
|
35
|
+
}
|
|
36
|
+
function InputNativeSkinExamples() {
|
|
37
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)(input_skin_native_1.InputNative, { variant: "outline", placeholder: "Outline Native" }), (0, jsx_runtime_1.jsx)(input_skin_native_1.InputNative, { variant: "filled", placeholder: "Filled Native" }), (0, jsx_runtime_1.jsx)(input_skin_native_1.InputNative, { variant: "flushed", placeholder: "Flushed Native" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)(input_skin_native_1.InputNative, { size: "sm", placeholder: "Small" }), (0, jsx_runtime_1.jsx)(input_skin_native_1.InputNative, { size: "md", placeholder: "Medium" }), (0, jsx_runtime_1.jsx)(input_skin_native_1.InputNative, { size: "lg", placeholder: "Large" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)(input_skin_native_1.InputNative, { leftIcon: (0, jsx_runtime_1.jsx)("span", { children: "\uD83D\uDD0D" }), placeholder: "Search" }), (0, jsx_runtime_1.jsx)(input_skin_native_1.InputNative, { rightIcon: (0, jsx_runtime_1.jsx)("span", { children: "\uD83D\uDCC5" }), placeholder: "Date" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)(input_skin_native_1.InputNative, { isInvalid: true, placeholder: "Invalid" }), (0, jsx_runtime_1.jsx)(input_skin_native_1.InputNative, { disabled: true, placeholder: "Disabled" }), (0, jsx_runtime_1.jsx)(input_skin_native_1.InputNative, { readOnly: true, placeholder: "Read only" })] })] }));
|
|
38
|
+
}
|
|
39
|
+
function InputInteractiveExamples() {
|
|
40
|
+
const [value, setValue] = react_1.default.useState('');
|
|
41
|
+
const [isInvalid, setIsInvalid] = react_1.default.useState(false);
|
|
42
|
+
const handleChange = (e) => {
|
|
43
|
+
setValue(e.target.value);
|
|
44
|
+
setIsInvalid(e.target.value.length < 3 && e.target.value.length > 0);
|
|
45
|
+
};
|
|
46
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { value: value, onChange: handleChange, isInvalid: isInvalid, placeholder: "Type at least 3 characters" }), isInvalid && (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-red-600", children: "Must be at least 3 characters" })] }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-4", children: (0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { type: "password", rightIcon: (0, jsx_runtime_1.jsx)("span", { children: "\uD83D\uDC41" }), placeholder: "Password" }) })] }));
|
|
47
|
+
}
|
|
48
|
+
function InputAccessibilityExamples() {
|
|
49
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "email", className: "text-sm font-medium", children: "Email" }), (0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { id: "email", type: "email", placeholder: "your@email.com", "aria-describedby": "email-help" }), (0, jsx_runtime_1.jsx)("p", { id: "email-help", className: "text-sm text-gray-600", children: "We'll never share your email with anyone else." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "search", className: "text-sm font-medium", children: "Search" }), (0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { id: "search", leftIcon: (0, jsx_runtime_1.jsx)("span", { children: "\uD83D\uDD0D" }), placeholder: "Search...", "aria-label": "Search products" })] })] }));
|
|
50
|
+
}
|
|
51
|
+
function InputCustomStylingExamples() {
|
|
52
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { className: "shadow-lg", placeholder: "With shadow" }), (0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { className: "rounded-full", placeholder: "Rounded full" }), (0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { className: "w-full", placeholder: "Full width" })] }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-4", children: (0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { style: {
|
|
53
|
+
backgroundColor: '#F3F4F6',
|
|
54
|
+
borderColor: '#3B82F6',
|
|
55
|
+
}, placeholder: "Custom style" }) })] }));
|
|
56
|
+
}
|
|
57
|
+
function FormExamples() {
|
|
58
|
+
const handleSubmit = (e) => {
|
|
59
|
+
e.preventDefault();
|
|
60
|
+
alert('Form submitted!');
|
|
61
|
+
};
|
|
62
|
+
return ((0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "name", className: "text-sm font-medium", children: "Name" }), (0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { id: "name", placeholder: "Enter your name", required: true })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "email", className: "text-sm font-medium", children: "Email" }), (0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { id: "email", type: "email", placeholder: "Enter your email", required: true })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "password", className: "text-sm font-medium", children: "Password" }), (0, jsx_runtime_1.jsx)(input_skin_tailwind_1.InputTailwind, { id: "password", type: "password", placeholder: "Enter your password", required: true })] }), (0, jsx_runtime_1.jsx)("button", { type: "submit", className: "px-4 py-2 bg-blue-600 text-white rounded", children: "Submit" })] }));
|
|
63
|
+
}
|
|
64
|
+
function AllInputExamples() {
|
|
65
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-8 p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "p-4 border rounded space-y-2", children: [(0, jsx_runtime_1.jsx)("h3", { className: "font-bold", children: "Variants" }), (0, jsx_runtime_1.jsx)(InputVariantExamples, {})] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4 border rounded space-y-2", children: [(0, jsx_runtime_1.jsx)("h3", { className: "font-bold", children: "Sizes" }), (0, jsx_runtime_1.jsx)(InputSizeExamples, {})] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4 border rounded space-y-2", children: [(0, jsx_runtime_1.jsx)("h3", { className: "font-bold", children: "Icons" }), (0, jsx_runtime_1.jsx)(InputIconExamples, {})] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4 border rounded space-y-2", children: [(0, jsx_runtime_1.jsx)("h3", { className: "font-bold", children: "States" }), (0, jsx_runtime_1.jsx)(InputStateExamples, {})] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4 border rounded space-y-2", children: [(0, jsx_runtime_1.jsx)("h3", { className: "font-bold", children: "Combined" }), (0, jsx_runtime_1.jsx)(InputCombinedExamples, {})] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4 border rounded space-y-2", children: [(0, jsx_runtime_1.jsx)("h3", { className: "font-bold", children: "Native Skin" }), (0, jsx_runtime_1.jsx)(InputNativeSkinExamples, {})] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4 border rounded space-y-2", children: [(0, jsx_runtime_1.jsx)("h3", { className: "font-bold", children: "Interactive" }), (0, jsx_runtime_1.jsx)(InputInteractiveExamples, {})] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4 border rounded space-y-2", children: [(0, jsx_runtime_1.jsx)("h3", { className: "font-bold", children: "Accessibility" }), (0, jsx_runtime_1.jsx)(InputAccessibilityExamples, {})] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4 border rounded space-y-2", children: [(0, jsx_runtime_1.jsx)("h3", { className: "font-bold", children: "Custom Styling" }), (0, jsx_runtime_1.jsx)(InputCustomStylingExamples, {})] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-bold mb-4", children: "Form" }), (0, jsx_runtime_1.jsx)(FormExamples, {})] })] }));
|
|
66
|
+
}
|
|
67
|
+
//# sourceMappingURL=input-examples.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input-examples.js","sourceRoot":"","sources":["../../../../src/components/input/input-examples.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
export declare const inputSkinContractDef: {
|
|
2
|
+
readonly id: "contract_input_skin_v1";
|
|
3
|
+
readonly name: "input-skin";
|
|
4
|
+
readonly variants: {
|
|
5
|
+
readonly outline: {
|
|
6
|
+
readonly backgroundColor: "transparent";
|
|
7
|
+
readonly borderColor: "var(--color-neutral-border)";
|
|
8
|
+
readonly color: "var(--color-neutral-text)";
|
|
9
|
+
readonly placeholderColor: "var(--color-neutral-text-secondary)";
|
|
10
|
+
readonly hover: {
|
|
11
|
+
readonly borderColor: "var(--color-neutral-text)";
|
|
12
|
+
};
|
|
13
|
+
readonly focus: {
|
|
14
|
+
readonly borderColor: "var(--color-primary-main)";
|
|
15
|
+
readonly ringColor: "var(--color-primary-main)";
|
|
16
|
+
};
|
|
17
|
+
readonly invalid: {
|
|
18
|
+
readonly borderColor: "var(--color-danger-main)";
|
|
19
|
+
readonly ringColor: "var(--color-danger-main)";
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
readonly filled: {
|
|
23
|
+
readonly backgroundColor: "var(--color-secondary-main)";
|
|
24
|
+
readonly borderColor: "transparent";
|
|
25
|
+
readonly color: "var(--color-neutral-text)";
|
|
26
|
+
readonly placeholderColor: "var(--color-neutral-text-secondary)";
|
|
27
|
+
readonly hover: {
|
|
28
|
+
readonly backgroundColor: "var(--color-secondary-hover)";
|
|
29
|
+
};
|
|
30
|
+
readonly focus: {
|
|
31
|
+
readonly backgroundColor: "transparent";
|
|
32
|
+
readonly borderColor: "var(--color-primary-main)";
|
|
33
|
+
readonly ringColor: "var(--color-primary-main)";
|
|
34
|
+
};
|
|
35
|
+
readonly invalid: {
|
|
36
|
+
readonly borderColor: "var(--color-danger-main)";
|
|
37
|
+
readonly ringColor: "var(--color-danger-main)";
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
readonly flushed: {
|
|
41
|
+
readonly backgroundColor: "transparent";
|
|
42
|
+
readonly borderColor: "transparent";
|
|
43
|
+
readonly borderBottomColor: "var(--color-neutral-border)";
|
|
44
|
+
readonly color: "var(--color-neutral-text)";
|
|
45
|
+
readonly placeholderColor: "var(--color-neutral-text-secondary)";
|
|
46
|
+
readonly hover: {
|
|
47
|
+
readonly borderBottomColor: "var(--color-neutral-text)";
|
|
48
|
+
};
|
|
49
|
+
readonly focus: {
|
|
50
|
+
readonly borderBottomColor: "var(--color-primary-main)";
|
|
51
|
+
readonly ringColor: "transparent";
|
|
52
|
+
};
|
|
53
|
+
readonly invalid: {
|
|
54
|
+
readonly borderBottomColor: "var(--color-danger-main)";
|
|
55
|
+
readonly ringColor: "transparent";
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
};
|
|
59
|
+
readonly icons: {
|
|
60
|
+
readonly padding: "40px";
|
|
61
|
+
readonly position: "12px";
|
|
62
|
+
readonly color: "var(--color-neutral-text-secondary)";
|
|
63
|
+
};
|
|
64
|
+
readonly sizes: {
|
|
65
|
+
readonly sm: {
|
|
66
|
+
readonly height: "32px";
|
|
67
|
+
readonly padding: "0 12px";
|
|
68
|
+
readonly fontSize: "0.75rem";
|
|
69
|
+
};
|
|
70
|
+
readonly md: {
|
|
71
|
+
readonly height: "40px";
|
|
72
|
+
readonly padding: "0 16px";
|
|
73
|
+
readonly fontSize: "0.875rem";
|
|
74
|
+
};
|
|
75
|
+
readonly lg: {
|
|
76
|
+
readonly height: "48px";
|
|
77
|
+
readonly padding: "0 24px";
|
|
78
|
+
readonly fontSize: "1rem";
|
|
79
|
+
};
|
|
80
|
+
};
|
|
81
|
+
readonly base: {
|
|
82
|
+
readonly borderRadius: "6px";
|
|
83
|
+
readonly transition: "all 0.2s ease";
|
|
84
|
+
readonly width: "100%";
|
|
85
|
+
readonly outline: "none";
|
|
86
|
+
};
|
|
87
|
+
readonly disabled: {
|
|
88
|
+
readonly opacity: "0.5";
|
|
89
|
+
readonly cursor: "not-allowed";
|
|
90
|
+
readonly backgroundColor: "var(--color-secondary-main)";
|
|
91
|
+
};
|
|
92
|
+
};
|
|
93
|
+
//# sourceMappingURL=input-skin-contract.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input-skin-contract.d.ts","sourceRoot":"","sources":["../../../../src/components/input/input-skin-contract.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoGvB,CAAC"}
|