@ambuj.bhaskar/react-component-library 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/index.css +1 -1
- package/dist/index.d.ts +10 -1
- package/dist/index.js +11 -11
- package/package.json +2 -1
package/dist/assets/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*{box-sizing:border-box}body{margin:0
|
|
1
|
+
*{box-sizing:border-box}body{margin:0}mark{background-color:unset!important;padding:0rem!important}hr,p{margin:0}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}}.icon_svg{width:100%;height:100%}.size_xs{width:16px;height:16px}.size_s{width:20px;height:20px}.size_m{width:24px;height:24px}.size_l{width:32px;height:32px}.size_xl{width:48px;height:48px}.button{transition:all .2s ease-in-out;display:flex;align-items:center;cursor:pointer;position:relative;background-color:unset;border:none}.button .background{position:absolute;z-index:1;width:100%;height:100%;top:0;left:0;border-radius:500px}.button .background.primary{filter:opacity(.05)}.button .background.primary:hover{filter:opacity(.15)}.button .background.primary:active{filter:opacity(1)}.button .background.secondary{filter:opacity(.1)}.button .background.secondary:hover{filter:opacity(.15)}.button .background.secondary:active{filter:opacity(.2)}.button .background.tertiary{filter:opacity(0)}.button .background.tertiary:hover{filter:opacity(.1)}.button .background.tertiary:active{filter:opacity(.2)}.button .background.nav{filter:opacity(0)}.button .background.nav:hover{filter:opacity(.1)}.button .background.nav:active{filter:opacity(.2)}.button .background.disabled{filter:opacity(.05)!important}.button .background.disabled.tertiary,.button .background.disabled.nav{filter:opacity(0)!important}.button>p{align-self:center;font-weight:var(--hydra_font_weight_m);z-index:2}.button.disabled,.button.disabled:hover,.button.disabled:active{cursor:no-drop!important;color:var(--hydra_c_disabled)!important}.button.disabled{cursor:no-drop;color:var(--hydra_c_disabled)}.button.disabled.primary,.button.disabled.primary:hover,.button.disabled.primary:active{outline-width:1px!important}.button.disabled.secondary,.button.disabled.secondary:hover,.button.disabled.secondary:active,.button.disabled.tertiary,.button.disabled.tertiary:hover,.button.disabled.tertiary:active,.button.disabled.nav,.button.disabled.nav:hover,.button.disabled.nav:active{outline-width:0px!important}.button.disabled.primary{outline-width:1px!important}.button.secondary{outline-width:0px!important}.button.secondary:hover,.button.secondary:active{outline-width:1px!important}.button.nav,.button.nav:hover{outline-width:0px!important}.button.nav:active{outline-width:1px!important}.button>p,.button>svg{z-index:2;pointer-events:none}.button.primary:active>p{color:var(--hydra_c_text_tertiary)!important}.button.fixed.h_s{--button_height: 30px;height:var(--button_height);border-radius:calc(var(--button_height) / 2);font-size:var(--font_s);padding:0px calc(var(--button_height) / 5)}.button.fixed.h_m{--button_height: 40px;height:var(--button_height);border-radius:calc(var(--button_height) / 2);padding:0px calc(var(--button_height) / 5)}.button.fixed.h_l{--button_height: 50px;height:var(--button_height);border-radius:calc(var(--button_height) / 2);padding:0px calc(var(--button_height) / 5)}.button.hugging.p_s{padding:3px 10px;border-radius:500px;font-size:var(--font_s)}.button.hugging.p_m{padding:6px 18px;border-radius:500px}.button.hugging.p_l{padding:10px 22px;border-radius:500px}.button.fixed.h_s.icon{--button_height: 30px;height:var(--button_height);border-radius:calc(var(--button_height) / 2);font-size:var(--font_s);padding:calc(var(--button_height) / 5) calc(var(--button_height) / 5)}.button.fixed.h_m.icon{--button_height: 40px;height:var(--button_height);border-radius:calc(var(--button_height) / 2);padding:calc(var(--button_height) / 5) calc(var(--button_height) / 5)}.button.fixed.h_l.icon{--button_height: 50px;height:var(--button_height);border-radius:calc(var(--button_height) / 2);padding:calc(var(--button_height) / 5) calc(var(--button_height) / 5)}.button.hugging.p_s.icon{padding:5px;border-radius:500px;font-size:var(--font_s)}.button.hugging.p_m.icon{padding:10px;border-radius:500px}.button.hugging.p_l.icon{padding:15px;border-radius:500px}.button.text_xs{font-size:var(--font_xs)!important}.button.text_s{font-size:var(--font_s)!important}.button.text_m{font-size:var(--font_m)!important}.button.text_l{font-size:var(--font_l)!important}.button.text_xl{font-size:var(--font_xl)!important}.input_wrapper{--color_text_secondary: #292929;--color_input_box_default: rgb(224, 222, 222);--color_input_box_active: #ffffff;--color_input_box_border_primary: #292929;--color_input_box_disabled: rgb(168, 168, 168);--color_disabled: rgb(24, 24, 24);--font_s: 14px;transition:all .2s ease-in-out;display:flex;align-items:center;position:relative;border:none;box-sizing:border-box;gap:8px;color:var(--color_text_secondary);background-color:var(--color_input_box_default);border-radius:25px;--input_box_height_s: 30px;--input_box_height_m: 40px;--input_box_height_l: 50px;--input_box_padding_s: .5rem 1.25rem;--input_box_padding_m: .75rem 1.25rem;--input_box_padding_l: .5rem 1.5rem}.input_wrapper.disabled{cursor:no-drop!important}.input_wrapper.disabled>.input{cursor:no-drop!important}.input_wrapper.h_s{height:var(--input_box_height_s);padding:var(--input_box_padding_s)}.input_wrapper.h_m{height:var(--input_box_height_m);padding:var(--input_box_padding_m)}.input_wrapper.h_l{height:var(--input_box_height_l);padding:var(--input_box_padding_l)}.input_wrapper:focus-within{background-color:var(--color_input_box_active);outline:1px solid var(--color_input_box_border_primary)}.input_wrapper.icon_before{flex-direction:row}.input_wrapper.icon_after{flex-direction:row-reverse}.input{border:none!important;outline:none!important;background:transparent;text-overflow:ellipsis;overflow:hidden!important;min-width:0!important;flex-grow:1;font-size:var(--font_s)!important}.input_wrapper:not(.empty):not(.disabled):not(:focus-within){background-color:var(--color_input_box_result);color:var(--color_text_secondary)}.input::placeholder{font-size:var(--font_s)!important;color:var(--color_text_secondary)}.icon-wrapper{display:flex;align-items:center;justify-content:center}.input_wrapper.input-disabled{background-color:var(--color_input_box_disabled);color:var(--color_disabled)}
|
package/dist/index.d.ts
CHANGED
|
@@ -68,7 +68,16 @@ declare const IconRegistry: Record<string, any>;
|
|
|
68
68
|
export declare const Input: React.FC<InputProps>;
|
|
69
69
|
|
|
70
70
|
declare type InputProps = HTMLInputProps & {
|
|
71
|
-
|
|
71
|
+
height?: "s" | "m" | "l";
|
|
72
|
+
width?: CSSstring;
|
|
73
|
+
className?: string;
|
|
74
|
+
value?: string | number;
|
|
75
|
+
icon?: IconName;
|
|
76
|
+
placement?: JustifyContent;
|
|
77
|
+
iconPosition?: "before" | "after";
|
|
78
|
+
iconColor?: Color;
|
|
79
|
+
onChange?: any;
|
|
80
|
+
disabled?: boolean;
|
|
72
81
|
};
|
|
73
82
|
|
|
74
83
|
declare type JustifyContent = "center" | "start" | "end" | "flex-start" | "flex-end" | "left" | "right" | "baseline" | "first baseline" | "last baseline" | "space-between" | "space-around" | "space-evenly" | "stretch";
|