@vincentgraul/react-components 1.0.63 → 1.0.65
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/README.md +3 -1
- package/dist/drop-zone/drop-zone.d.ts +23 -0
- package/dist/drop-zone/index.d.ts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/input/input.d.ts +2 -1
- package/dist/input/input.types.d.ts +1 -1
- package/dist/react-components.css +1 -1
- package/dist/react-components.js +8354 -8231
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
## Hooks and UI components
|
|
4
4
|
|
|
5
5
|
| Component | Description |
|
|
6
|
-
|
|
6
|
+
| ------------------ | ----------------------------------------------------------------------------------- |
|
|
7
7
|
| useVisible | React hook to know if an element is visible |
|
|
8
8
|
| useMatchResolution | React hook to detect the resolution (desktop, laptop, tablet, mobile...) |
|
|
9
9
|
| useMatchDevice | React hook to detect the device (mobile, tablet or desktop) based on the user agent |
|
|
@@ -22,6 +22,8 @@
|
|
|
22
22
|
| Input | React component used to display an input |
|
|
23
23
|
| Wizard | React component used to display a wizard |
|
|
24
24
|
| Flex | React component used to display a flex layout |
|
|
25
|
+
| Button | React component used to display a button |
|
|
26
|
+
| DropZone | React component used to display a drop zone |
|
|
25
27
|
|
|
26
28
|
## License
|
|
27
29
|
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
type DropZoneProps = {
|
|
2
|
+
onFileChanged: (file: File | undefined) => void;
|
|
3
|
+
label?: string;
|
|
4
|
+
labelSize?: number;
|
|
5
|
+
labelGap?: number;
|
|
6
|
+
previewIcon?: string;
|
|
7
|
+
previewIconSize?: number;
|
|
8
|
+
removeIcon?: string;
|
|
9
|
+
removeIconSize?: number;
|
|
10
|
+
text?: string;
|
|
11
|
+
textSize?: number;
|
|
12
|
+
width?: number;
|
|
13
|
+
height?: number;
|
|
14
|
+
gap?: number;
|
|
15
|
+
padding?: string;
|
|
16
|
+
borderSize?: number;
|
|
17
|
+
borderColor?: string;
|
|
18
|
+
borderStyle?: "solid" | "dashed" | "dotted" | "double";
|
|
19
|
+
removeAriaLabel?: string;
|
|
20
|
+
className?: string;
|
|
21
|
+
};
|
|
22
|
+
export declare const DropZone: ({ onFileChanged, label, labelSize, labelGap, previewIcon, previewIconSize, removeIcon, removeIconSize, text, textSize, width, height, gap, padding, borderSize, borderColor, borderStyle, removeAriaLabel, className, }: DropZoneProps) => import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './drop-zone';
|
package/dist/index.d.ts
CHANGED
package/dist/input/input.d.ts
CHANGED
|
@@ -9,10 +9,11 @@ export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type
|
|
|
9
9
|
width?: number;
|
|
10
10
|
height?: number;
|
|
11
11
|
borderWidth?: number;
|
|
12
|
+
borderWidthFocus?: number;
|
|
12
13
|
labelWeight?: 400 | 500 | 600 | 700 | 800 | 900;
|
|
13
14
|
labelSize?: number;
|
|
14
15
|
messageWeight?: 400 | 500 | 600 | 700 | 800 | 900;
|
|
15
16
|
messageSize?: number;
|
|
16
17
|
className?: string;
|
|
17
18
|
};
|
|
18
|
-
export declare const Input: ({ className, label, message, colors, status, width, height, borderWidth, labelWeight, labelSize, messageWeight, messageSize, ...rest }: InputProps) => import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export declare const Input: ({ className, label, message, colors, status, width, height, borderWidth, borderWidthFocus, labelWeight, labelSize, messageWeight, messageSize, onFocus, onBlur, ...rest }: InputProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._container_1mzhz_1{display:flex;align-items:center;align-self:flex-start;margin:0 0 2rem 2rem}._link_1mzhz_8{color:#fff;font-size:2rem;text-decoration:none}._arrow_1mzhz_14{margin:0 1rem;width:1rem}._flag_1ci92_1{display:block;margin:auto;border-radius:2px}.
|
|
1
|
+
._container_1mzhz_1{display:flex;align-items:center;align-self:flex-start;margin:0 0 2rem 2rem}._link_1mzhz_8{color:#fff;font-size:2rem;text-decoration:none}._arrow_1mzhz_14{margin:0 1rem;width:1rem}._flag_1ci92_1{display:block;margin:auto;border-radius:2px}._container_qbw16_1{position:relative}._input-container_qbw16_5{display:inline-flex;align-items:center;position:relative;width:100%;height:100%}._input_qbw16_5{width:100%;height:100%;padding:10px;border:0;background-color:transparent;outline:none;z-index:1;color:#000}._input_qbw16_5:focus+._fieldset_qbw16_23:not(.success,.warning,.error){color:var(--focus-color, blue);border-color:var(--focus-color, blue)}._fieldset_qbw16_23{border:1px solid black;border-radius:5px;position:absolute;inset:-8.5px 0 0;font-size:15px;margin:0}._fieldset_qbw16_23.success{border-color:var(--success-color, green);color:var(--success-color, green)}._fieldset_qbw16_23.warning{border-color:var(--warning-color, orange);color:var(--warning-color, orange)}._fieldset_qbw16_23.error{border-color:var(--error-color, red);color:var(--error-color, red)}._legend_qbw16_55{padding:0 5px}._message-container_qbw16_59{display:flex;align-items:center;gap:5px;margin-top:5px}._message-container_qbw16_59.success{color:var(--success-color, green)}._message-container_qbw16_59.warning{color:var(--warning-color, orange)}._message-container_qbw16_59.error{color:var(--error-color, red)}._overlay_krtsr_1{position:fixed;inset:0;background-color:#000c;overflow-y:auto;z-index:2}._container_krtsr_12{position:absolute;top:50%;left:50%;width:50%;color:#f9fbff}._image-container_krtsr_20{display:flex;flex-flow:column;align-items:center;transform:translate(-50%)}@keyframes _loading_krtsr_1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}._image_krtsr_20{animation:_loading_krtsr_1 3s linear infinite;margin-bottom:2rem}._container_e4hb2_1{position:absolute;top:0;left:50%;transform:translate(-50%);background-color:#f9fbff;border-radius:.5rem;padding:1rem;z-index:1;margin:5rem 0}._overlay_e4hb2_13{position:fixed;inset:0;background-color:#00000080;overflow-y:auto;z-index:1}._container_12891_1{--hover-background-color: lightgrey;--hover-text-color: black;--selected-background-color: black;--selected-text-color: white;display:flex}._item_12891_10{border-style:solid;border-width:1px 1px 1px 0;padding:.5rem 1rem;display:flex;align-items:center;cursor:pointer}._item_12891_10:first-child{border-width:1px 1px 1px 1px}._item_12891_10:hover:not(._selected_12891_22){background-color:var(--hover-background-color);color:var(--hover-text-color)}._item_12891_10._selected_12891_22{background-color:var(--selected-background-color);color:var(--selected-text-color)}._container_1syfi_1{width:fit-content}._selected-option-container_1syfi_5{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;padding:10px;background-color:#fff;border-radius:5px}._selected-option-text_1syfi_15{padding-right:10px;border-right:1px solid black}._selected-option-arrow_1syfi_20{width:15px;margin-left:10px}._options-list_1syfi_25{width:100%;list-style:none;padding:0;margin:10px 0 0;-webkit-user-select:none;user-select:none;background-color:#fff;border-radius:5px}._option_1syfi_25{padding:10px;cursor:pointer}._option_1syfi_25:hover{background-color:#ecf0f1}._option_1syfi_25:hover:first-child{border-radius:5px 5px 0 0}._option_1syfi_25:hover:last-child{border-radius:0 0 5px 5px}._option_1syfi_25:hover:only-child{border-radius:5px}._container_cds7q_1{display:flex;flex-flow:column}._main_cds7q_6{width:100%;table-layout:fixed;border-collapse:collapse}._tbody_cds7q_12{-webkit-user-select:text;user-select:text}._tbody_cds7q_12 tr:last-child{border:none}._th_cds7q_19{padding:2rem 1rem 1rem 0;word-wrap:break-word;white-space:nowrap}._tr_cds7q_25{text-align:center;border-bottom:2px solid black}._td_cds7q_30{padding:2rem 1rem 1rem 0;word-wrap:break-word}._container_ldyam_1{display:flex}._container_fn9zh_1{padding:.5rem 1rem;cursor:pointer;border-style:solid}._container_neqab_1{display:flex;flex-direction:column;align-items:center}._drop-zone_neqab_7{display:flex;width:100%;flex-direction:column;border:5px dashed black;align-items:center;cursor:pointer;padding:1rem}._drop-zone--dragging_neqab_17{opacity:.5}._text_neqab_21{margin:0}._preview-file_neqab_25{width:100%}._remove-button_neqab_29{background:none;border:none;padding:0;cursor:pointer}
|