@liujip0/components 0.1.0 → 0.2.0

package/README.md

@@ -1,3 +1,38 @@
 # @liujip0/components
 
 Just a simple components library for my own personal use!
+
+CSS variables to customize:
+
+| Variable                          | Description                                                                      | Default              |
+| --------------------------------- | -------------------------------------------------------------------------------- | -------------------- |
+| `--text-font-family`              | Text font family                                                                 | `sans-serif`         |
+| `--text-body-size`                | Size of body text                                                                | `1em`                |
+| `--text-h1-size`                  | Size of h1 text                                                                  | `2em`                |
+| `--text-h2-size`                  | Size of h2 text                                                                  | `1.5em`              |
+| `--text-label-size`               | Size of labels for input components                                              | `0.9em`              |
+| `--text-helperText-size`          | Size of helper text for input components                                         | `0.75em`             |
+|                                   |                                                                                  |                      |
+| `--color-primary`                 | Primary theme color                                                              | `blue`               |
+| `--color-primary-contrastText`    | Text color when background color is `--color-primary`                            | `white`              |
+| `--color-secondary`               | Secondary theme color                                                            | `orange`             |
+| `--color-secondary-contrastText`  | Text color when background color is `--color-secondary`                          | `white`              |
+| `--color-background`              | Background color                                                                 | `white`              |
+| `--color-background-contrastText` | Text color when background color is `--color-background`                         | `black`              |
+| `--color-paper`                   | Background color for modals, dialogs, popups, snackbars, etc.                    | `gray`               |
+| `--color-paper-contrastText`      | Text color when background color is `--color-paper`                              | `black`              |
+| `--color-error`                   | Color to indicate errors                                                         | `red`                |
+|                                   |                                                                                  |                      |
+| `--z-index-backdrop`              | z-index of backdrops or overlays                                                 | `99`                 |
+| `--z-index-snackbar`              | z-index of snackbars                                                             | `100`                |
+| `--z-index-modal`                 | z-index of modals, dialogs, popups, etc.                                         | `101`                |
+| `--z-index-tooltip`               | z-index of tooltips                                                              | `102`                |
+|                                   |                                                                                  |                      |
+| `--border-radius`                 | Border radius for buttons, input components, etc.                                | `0`                  |
+| `--border-width`                  | Border width for buttons, input components, etc.                                 | `1px`                |
+| `--input-height`                  | [Only used in the `Counter` component] Calculated height of an `Input` component | `calc(37.6px + 8px)` |
+| `--hover-dim`                     | Filter effect to apply to buttons, etc. on hover                                 | `brightness(0.8)`    |
+|                                   |                                                                                  |                      |
+| `--table-cell-padding`            | Padding for table cells                                                          | `8px`                |
+| `--table-border-width`            | Border width for tables                                                          | `3px`                |
+| `--table-cell-border-width`       | Border width for cells within tables                                             | `2px`                |

package/dist/Input.module-C7oR_KDs.js

@@ -0,0 +1,13 @@
+import './assets/Input.css';const e = "_container_1dgl9_1", t = "_outline_1dgl9_6", l = "_errorOutline_1dgl9_18", r = "_input_1dgl9_22", n = "_inputDisabled_1dgl9_41", _ = "_helperText_1dgl9_53", o = "_helperTextError_1dgl9_60", i = "_label_1dgl9_64", s = {
+  container: e,
+  outline: t,
+  errorOutline: l,
+  input: r,
+  inputDisabled: n,
+  helperText: _,
+  helperTextError: o,
+  label: i
+};
+export {
+  s
+};

package/dist/assets/Backdrop.css

@@ -0,0 +1 @@
+._backdrop_qbjym_1{position:absolute;top:0;left:0;width:100%;height:100%;z-index:var(--z-index-backdrop, var(--z-index-backdrop-fallback));background-color:#00000080;pointer-events:none}

package/dist/assets/Button.css

@@ -1 +1 @@
-._button_7qhy4_1{min-width:64px;padding:6px 16px;border:none;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;gap:4px;font-size:1.25rem;font-family:var(--text-font-family);text-transform:uppercase;font-weight:500;line-height:1.75;letter-spacing:.02857em;cursor:pointer}._button_7qhy4_1:hover{filter:var(--hover-dim)}
+._button_y7o2r_1{min-width:64px;padding:6px 16px;border:none;border-radius:var(--border-radius, var(--border-radius-fallback));display:flex;align-items:center;justify-content:center;gap:4px;font-size:1.25rem;font-family:var(--text-font-family, var(--text-font-family-fallback));text-transform:uppercase;font-weight:500;line-height:1.75;letter-spacing:.02857em;cursor:pointer}._button_y7o2r_1:hover{filter:var(--hover-dim, var(--hover-dim-fallback))}

package/dist/assets/Counter.css

@@ -1 +1 @@
-._container_whykh_1{display:flex;align-items:flex-end}._button_whykh_6{height:var(--input-height);width:var(--input-height);min-width:0;min-height:0;background-color:var(--color-primary);color:var(--color-primary-contrastText);border:none}._buttonDisabled_whykh_16{background-color:color-mix(in srgb,var(--color-primary) 50%,#888);cursor:default}._buttonDisabled_whykh_16:hover{filter:none}._input_whykh_24{flex:1}
+._container_12kgw_1{display:flex;align-items:flex-end}._button_12kgw_6{height:var(--input-height, var(--input-height-fallback));width:var(--input-height, var(--input-height-fallback));min-width:0;min-height:0;background-color:var(--color-primary, var(--color-primary-fallback));color:var( --color-primary-contrastText, var(--color-primary-contrastText-fallback) );border:none}._buttonDisabled_12kgw_19{background-color:color-mix(in srgb,var(--color-primary, var(--color-primary-fallback)) 50%,#888);cursor:default}._buttonDisabled_12kgw_19:hover{filter:none}._input_12kgw_31{flex:1}

package/dist/assets/Dialog.css

@@ -1 +1 @@
-._screenDarken_17c5i_1{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background-color:#00000080;z-index:var(--z-index-modal)}._dialog_17c5i_16{max-width:80vw;max-height:80vh;display:flex;flex-direction:column;padding:24px;background-color:var(--color-paper-background);border-radius:var(--border-radius);border:var(--button-border-width) solid var(--color-primary)}._dialogTitle_17c5i_28{margin-bottom:16px;font-family:var(--text-font-family);font-size:var(--text-h2-size)}._dialogContent_17c5i_35{flex:1;overflow-y:auto}._dialogActions_17c5i_40{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
+._screenDarken_9wfqy_1{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background-color:#00000080;z-index:var(--z-index-modal, var(--z-index-modal-fallback))}._dialog_9wfqy_16{max-width:80vw;max-height:80vh;display:flex;flex-direction:column;padding:24px;background-color:var(--color-paper, var(--color-paper-fallback));border-radius:var(--border-radius, var(--border-radius-fallback));border:var(--border-width, var(--border-width-fallback)) solid var(--color-primary, var(--color-primary-fallback))}._dialogTitle_9wfqy_29{margin-bottom:16px;font-family:var(--text-font-family, var(--text-font-family-fallback));font-size:var(--text-h2-size, var(--text-h2-size-fallback))}._dialogContent_9wfqy_36{flex:1;overflow-y:auto}._dialogActions_9wfqy_41{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}

package/dist/assets/Divider.css

@@ -1 +1 @@
-._divider_nvu4k_1{border-width:.5px;border-style:solid;border-color:var(--color-primary);margin:8px}._horizontalDivider_nvu4k_8{width:100%;height:0}._verticalDivider_nvu4k_13{height:100%;width:0}
+._divider_rubc3_1{border-width:.5px;border-style:solid;border-color:var(--color-primary, var(--color-primary-fallback));margin:8px}._horizontalDivider_rubc3_8{width:100%;height:0}._verticalDivider_rubc3_13{height:100%;width:0}

package/dist/assets/IconButton.css

@@ -1 +1 @@
-._button_rs8jj_1{display:flex;align-items:center;justify-content:center;padding:6px;border:none;color:var(--color-primary);background-color:var(--color-background);cursor:pointer;clip-path:circle(50%)}._button_rs8jj_1:hover{filter:var(--hover-dim)}
+._button_180ek_1{display:flex;align-items:center;justify-content:center;padding:6px;border:none;color:var(--color-primary, var(--color-primary-fallback));background-color:var(--color-background, var(--color-background-fallback));cursor:pointer;clip-path:circle(50%)}._button_180ek_1:hover{filter:var(--hover-dim, var(--hover-dim-fallback))}

package/dist/assets/Input.css

@@ -1 +1 @@
-._container_82euj_1{display:flex;flex-direction:column}._outline_82euj_6{display:flex;padding:4px 8px;gap:4px;align-items:center;width:100%;border-width:var(--button-border-width);border-style:solid;border-color:var(--color-primary);border-radius:var(--border-radius)}._errorOutline_82euj_18{border-color:var(--color-error)}._input_82euj_22{min-width:1em;flex:1;padding:6px;width:100%;height:100%;border:none;background-color:transparent;color:var(--color-background-contrastText);font-family:var(--text-font-family);font-size:var(--text-body-size)}._input_82euj_22:focus{outline:none}._inputDisabled_82euj_38{color:color-mix(in srgb,var(--color-background-contrastText) 50%,#888)}._helperText_82euj_42{margin:4px 8px;font-family:var(--text-font-family);font-size:.75em;color:var(--color-primary)}._helperTextError_82euj_49{color:var(--color-error)}._label_82euj_53{font-family:var(--text-font-family);font-size:var(--text-label-size)}
+._container_1dgl9_1{display:flex;flex-direction:column}._outline_1dgl9_6{display:flex;padding:4px 8px;gap:4px;align-items:center;width:100%;border-width:var(--border-width, var(--border-width-fallback));border-style:solid;border-color:var(--color-primary, var(--color-primary-fallback));border-radius:var(--border-radius, var(--border-radius-fallback))}._errorOutline_1dgl9_18{border-color:var(--color-error, var(--color-error-fallback))}._input_1dgl9_22{min-width:1em;flex:1;padding:6px;width:100%;height:100%;border:none;background-color:transparent;color:var( --color-background-contrastText, var(--color-background-contrastText-fallback) );font-family:var(--text-font-family, var(--text-font-family-fallback));font-size:var(--text-body-size, var(--text-body-size-fallback))}._input_1dgl9_22:focus{outline:none}._inputDisabled_1dgl9_41{color:color-mix(in srgb,var( --color-background-contrastText, var(--color-background-contrastText-fallback) ) 50%,#888)}._helperText_1dgl9_53{margin:4px 8px;font-family:var(--text-font-family, var(--text-font-family-fallback));font-size:var(--text-helperText-size, var(--text-helperText-size-fallback));color:var(--color-primary, var(--color-primary-fallback))}._helperTextError_1dgl9_60{color:var(--color-error, var(--color-error-fallback))}._label_1dgl9_64{font-family:var(--text-font-family, var(--text-font-family-fallback));font-size:var(--text-label-size, var(--text-label-size-fallback))}

package/dist/assets/Radio.css

@@ -1 +1 @@
-._container_bc6cu_1{display:flex;align-items:center;gap:8px}._label_bc6cu_7{font-family:var(--text-font-family);font-size:var(--text-body-size);cursor:pointer}
+._container_12u6r_1{display:flex;align-items:center;gap:8px}._label_12u6r_7{font-family:var(--text-font-family, var(--text-font-family-fallback));font-size:var(--text-body-size, var(--text-body-size-fallback));cursor:pointer}

package/dist/assets/RadioGroup.css

@@ -1 +1 @@
-._container_qo0l5_1{display:flex;flex-direction:column}._outline_qo0l5_6{display:flex;flex-direction:column;gap:4px}._label_qo0l5_12{font-family:var(--text-font-family);font-size:var(--text-label-size)}._helperText_qo0l5_17{margin:4px 8px;font-family:var(--text-font-family);font-size:.75em;color:var(--color-primary)}._helperTextError_qo0l5_24{color:var(--color-error)}
+._container_1ygqk_1{display:flex;flex-direction:column}._outline_1ygqk_6{display:flex;flex-direction:column;gap:4px}._label_1ygqk_12{font-family:var(--text-font-family, var(--text-font-family-fallback));font-size:var(--text-label-size, var(--text-label-size-fallback))}._helperText_1ygqk_17{margin:4px 8px;font-family:var(--text-font-family, var(--text-font-family-fallback));font-size:var(--text-helperText-size, var(--text-helperText-size-fallback));color:var(--color-primary, var(--color-primary-fallback))}._helperTextError_1ygqk_24{color:var(--color-error, var(--color-error-fallback))}

package/dist/assets/Select.css

@@ -1 +1 @@
-._container_6qy7m_1{display:flex;flex-direction:column}._outline_6qy7m_6{display:flex;padding:4px 8px;gap:4px;align-items:center;width:100%;border-width:1px;border-style:solid;border-color:var(--color-primary);border-radius:var(--border-radius)}._errorOutline_6qy7m_18{border-color:var(--color-error)}._select_6qy7m_22{min-width:1em;flex:1;padding:6px;border:none;background-color:transparent;color:var(--color-background-contrastText);font-family:var(--text-font-family);font-size:var(--text-body-size)}._select_6qy7m_22:focus{outline:none}._selectDisabled_6qy7m_36{color:color-mix(in srgb,var(--color-background-contrastText) 50%,#888)}._helperText_6qy7m_40{margin:4px 8px;font-family:var(--text-font-family);font-size:.75em;color:var(--color-primary)}._helperTextError_6qy7m_47{color:var(--color-error)}._label_6qy7m_51{font-family:var(--text-font-family);font-size:var(--text-label-size)}
+._container_14cji_1{display:flex;flex-direction:column}._outline_14cji_6{display:flex;padding:4px 8px;gap:4px;align-items:center;width:100%;border-width:1px;border-style:solid;border-color:var(--color-primary, var(--color-primary-fallback));border-radius:var(--border-radius, var(--border-radius-fallback))}._errorOutline_14cji_18{border-color:var(--color-error, var(--color-error-fallback))}._select_14cji_22{min-width:1em;flex:1;padding:6px;border:none;background-color:transparent;color:var( --color-background-contrastText, var(--color-background-contrastText-fallback) );font-family:var(--text-font-family, var(--text-font-family-fallback));font-size:var(--text-body-size, var(--text-body-size-fallback))}._select_14cji_22:focus{outline:none}._selectDisabled_14cji_39{color:color-mix(in srgb,var( --color-background-contrastText, var(--color-background-contrastText-fallback) ) 50%,#888)}._helperText_14cji_51{margin:4px 8px;font-family:var(--text-font-family, var(--text-font-family-fallback));font-size:var(--text-helperText-size, var(--text-helperText-size-fallback));color:var(--color-primary, var(--color-primary-fallback))}._helperTextError_14cji_58{color:var(--color-error, var(--color-error-fallback))}._label_14cji_62{font-family:var(--text-font-family, var(--text-font-family-fallback));font-size:var(--text-label-size, var(--text-label-size-fallback))}

package/dist/assets/Snackbar.css

@@ -1 +1 @@
-._snackbar_b5ton_1{position:fixed;bottom:16px;left:16px;display:flex;gap:16px;padding:8px 16px;align-items:center;max-width:500px;z-index:var(--z-index-snackbar);background-color:var(--color-paper-background);border:var(--button-border-width) solid var(--color-primary);border-radius:var(--border-radius)}._message_b5ton_17{font-family:var(--text-font-family);font-size:var(--text-label-size);color:var(--color-paper-background-contrastText)}
+._snackbar_tl00m_1{position:fixed;bottom:16px;left:16px;display:flex;gap:16px;padding:8px 16px;align-items:center;max-width:500px;z-index:var(--z-index-snackbar, var(--z-index-snackbar-fallback));background-color:var(--color-paper, var(--color-paper-fallback));border:var(--border-width, var(--border-width-fallback)) solid var(--color-primary, var(--color-primary-fallback));border-radius:var(--border-radius, var(--border-radius-fallback))}._message_tl00m_18{font-family:var(--text-font-family, var(--text-font-family-fallback));font-size:var(--text-label-size, var(--text-label-size-fallback));color:var( --color-paper-contrastText, var(--color-paper-contrastText-fallback) )}

package/dist/assets/Tab.css

@@ -0,0 +1 @@
+._tab_1m0oo_1{padding:.5em;cursor:pointer;color:var(--color-primary, var(--color-primary-fallback));font-family:var(--text-font-family, var(--text-font-family-fallback));font-size:var(--text-body-size, var(--text-body-size-fallback));text-transform:uppercase;font-weight:500;background-color:var(--color-background, var(--color-background-fallback))}._tab_1m0oo_1:hover{filter:var(--hover-dim, var(--hover-dim-fallback))}._activeTab_1m0oo_15{font-weight:700;border-bottom:4px solid var(--color-primary, var(--color-primary-fallback))}

package/dist/assets/TabBar.css

@@ -1 +1 @@
-._tabBar_1gpqs_1{display:flex;width:100%}._tab_1gpqs_1{padding:.5em;cursor:pointer;color:var(--color-primary);font-family:var(--text-font-family);font-size:var(--text-body-size);text-transform:uppercase;font-weight:500;background-color:var(--color-background)}._tab_1gpqs_1:hover{filter:var(--hover-dim)}._activeTab_1gpqs_20{font-weight:700;border-bottom:4px solid var(--color-primary)}
+._tabBar_1oym3_1{display:flex;width:100%}

package/dist/assets/Table.css

@@ -1 +1 @@
-._table_1sfmn_1{--table-cell-padding: 8px;--table-border-width: 3px;--table-cell-border-width: 2px;border-collapse:separate;border:var(--table-border-width) solid var(--color-primary);border-spacing:0}._tableHead_1sfmn_11{position:sticky;top:var(--table-cell-border-width);z-index:1;background-color:var(--color-background);outline:var(--table-cell-border-width) solid var(--color-primary)}._th_1sfmn_20{padding:var(--table-cell-padding);font-family:var(--text-font-family);font-size:var(--text-body-size);font-weight:700;border-style:solid;border-color:var(--color-primary);border-width:var(--table-border-width) var(--table-cell-border-width)}._td_1sfmn_31{padding:var(--table-cell-padding);font-family:var(--text-font-family);font-size:var(--text-body-size);border:var(--table-cell-border-width) solid var(--color-primary)}
+._table_10gvy_1{border-collapse:separate;border:var(--table-border-width, var(--table-border-width-fallback)) solid var(--color-primary, var(--color-primary-fallback));border-spacing:0}._tableHead_10gvy_8{position:sticky;top:var(--table-cell-border-width, var(--table-cell-border-width-fallback));z-index:1;background-color:var(--color-background, var(--color-background-fallback));outline:var( --table-cell-border-width, var(--table-cell-border-width-fallback) ) solid var(--color-primary, var(--color-primary-fallback))}._th_10gvy_21{padding:var(--table-cell-padding, var(--table-cell-padding-fallback));font-family:var(--text-font-family, var(--text-font-family-fallback));font-size:var(--text-body-size, var(--text-body-size-fallback));font-weight:700;border-style:solid;border-color:var(--color-primary, var(--color-primary-fallback));border-width:var(--table-border-width, var(--table-border-width-fallback)) var(--table-cell-border-width, var(--table-cell-border-width-fallback))}._td_10gvy_33{padding:var(--table-cell-padding, var(--table-cell-padding-fallback));font-family:var(--text-font-family, var(--text-font-family-fallback));font-size:var(--text-body-size, var(--text-body-size-fallback));border:var( --table-cell-border-width, var(--table-cell-border-width-fallback) ) solid var(--color-primary, var(--color-primary-fallback))}

package/dist/assets/ToggleButton.css

@@ -1 +1 @@
-._buttonFalse_1ssvl_1{color:var(--color-primary);border:var(--button-border-width) solid var(--color-primary);background-color:var(--color-background)}._buttonTrue_1ssvl_7{color:var(--color-primary-contrastText);border:none;background-color:var(--color-primary)}
+._buttonFalse_1ed44_1{color:var(--color-primary, var(--color-primary-fallback));border:var(--border-width, var(--border-width-fallback)) solid var(--color-primary, var(--color-primary-fallback));background-color:var(--color-background, var(--color-background-fallback))}._buttonTrue_1ed44_8{color:var( --color-primary-contrastText, var(--color-primary-contrastText-fallback) );border:none;background-color:var(--color-primary, var(--color-primary-fallback))}

package/dist/assets/ToggleButtonGroup.css

@@ -1 +1 @@
-._container_12l5n_1{display:flex;flex-direction:column}._outline_12l5n_6{display:flex;gap:4px}._label_12l5n_11{font-family:var(--text-font-family);font-size:var(--text-label-size)}._helperText_12l5n_16{margin:4px 8px;font-family:var(--text-font-family);font-size:.75em;color:var(--color-primary)}._helperTextError_12l5n_23{color:var(--color-error)}
+._container_1ngm3_1{display:flex;flex-direction:column}._outline_1ngm3_6{display:flex;gap:4px}._label_1ngm3_11{font-family:var(--text-font-family, var(--text-font-family-fallback));font-size:var(--text-label-size, var(--text-label-size-fallback))}._helperText_1ngm3_16{margin:4px 8px;font-family:var(--text-font-family, var(--text-font-family-fallback));font-size:var(--text-helperText-size, var(--text-helperText-size-fallback));color:var(--color-primary, var(--color-primary-fallback))}._helperTextError_1ngm3_23{color:var(--color-error)}

package/dist/assets/Tooltip.css

@@ -1 +1 @@
-._container_1rv9k_1{display:inline;position:static}._tooltipContainer_1rv9k_7{position:fixed;transform:translate(-50%)}._tooltip_1rv9k_7{position:absolute;padding:4px;left:-50%;background-color:#000;opacity:.8;z-index:var(--z-index-tooltip);border-radius:var(--border-radius);font-size:var(--text-label-size)}._tooltip_1rv9k_7:after{content:"";position:absolute}
+._container_147qb_1{display:inline;position:static}._tooltipContainer_147qb_7{position:fixed;transform:translate(-50%)}._tooltip_147qb_7{position:absolute;padding:4px;left:-50%;background-color:#000;opacity:.8;z-index:var(--z-index-tooltip, var(--z-index-tooltip-fallback));border-radius:var(--border-radius, var(--border-radius-fallback));font-size:var(--text-label-size)}._tooltip_147qb_7:after{content:"";position:absolute}

package/dist/assets/main.css

@@ -1 +1 @@
-.material-symbols-outlined{font-variation-settings:"FILL" 1}
+:root{--text-font-family-fallback: sans-serif;--text-body-size-fallback: 1em;--text-h1-size-fallback: 2em;--text-h2-size-fallback: 1.5em;--text-label-size-fallback: .9em;--text-helperText-size-fallback: .75em;--color-primary-fallback: blue;--color-primary-contrastText-fallback: white;--color-secondary-fallback: orange;--color-secondary-contrastText-fallback: white;--color-background-fallback: white;--color-background-contrastText-fallback: black;--color-paper-fallback: gray;--color-paper-contrastText-fallback: black;--color-error-fallback: red;--z-index-backdrop-fallback: 99;--z-index-snackbar-fallback: 100;--z-index-modal-fallback: 101;--z-index-tooltip-fallback: 102;--border-radius-fallback: 0;--border-width-fallback: 1px;--input-height-fallback: 45.6px ;--hover-dim-fallback: brightness(.8);--table-cell-padding-fallback: 8px;--table-border-width-fallback: 3px;--table-cell-border-width-fallback: 2px}.material-symbols-outlined{font-variation-settings:"FILL" 1}

package/dist/components/Backdrop/Backdrop.d.ts

@@ -0,0 +1,6 @@
+type BackdropProps = {
+    open: boolean;
+    onClose?: () => void;
+};
+export declare function Backdrop({ open, onClose }: BackdropProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Backdrop/Backdrop.js

@@ -0,0 +1,18 @@
+import { jsx as c, Fragment as a } from "react/jsx-runtime";
+import '../../assets/Backdrop.css';const t = "_backdrop_qbjym_1", p = {
+  backdrop: t
+};
+function k({ open: o, onClose: r }) {
+  return o ? /* @__PURE__ */ c(
+    "div",
+    {
+      onClick: () => {
+        r && r();
+      },
+      className: p.backdrop
+    }
+  ) : /* @__PURE__ */ c(a, {});
+}
+export {
+  k as Backdrop
+};

package/dist/components/Button/Button.js

@@ -1,13 +1,13 @@
 import { jsx as s } from "react/jsx-runtime";
-import '../../assets/Button.css';const b = "_button_7qhy4_1", r = {
-  button: b
+import '../../assets/Button.css';const r = "_button_y7o2r_1", b = {
+  button: r
 };
 function e({ children: t, className: o, ref: n, ...u }) {
   return /* @__PURE__ */ s(
     "button",
     {
       ref: n,
-      className: r.button + " " + (o || ""),
+      className: b.button + " " + (o || ""),
       ...u,
       children: t
     }

package/dist/components/Button/IconButton/IconButton.js

@@ -1,17 +1,17 @@
-import { jsx as s } from "react/jsx-runtime";
-import '../../../assets/IconButton.css';const u = "_button_rs8jj_1", r = {
-  button: u
+import { jsx as u } from "react/jsx-runtime";
+import '../../../assets/IconButton.css';const s = "_button_180ek_1", b = {
+  button: s
 };
-function c({ children: t, className: o, ...n }) {
-  return /* @__PURE__ */ s(
+function e({ children: t, className: o, ...n }) {
+  return /* @__PURE__ */ u(
     "button",
     {
-      className: r.button + " " + (o || ""),
+      className: b.button + " " + (o || ""),
       ...n,
       children: t
     }
   );
 }
 export {
-  c as IconButton
+  e as IconButton
 };

package/dist/components/Button/ToggleButton/ToggleButton.js

@@ -1,32 +1,32 @@
-import { jsx as a } from "react/jsx-runtime";
-import { Button as b } from "../Button.js";
-import '../../../assets/ToggleButton.css';const C = "_buttonFalse_1ssvl_1", _ = "_buttonTrue_1ssvl_7", e = {
+import { jsx as b } from "react/jsx-runtime";
+import { Button as s } from "../Button.js";
+import '../../../assets/ToggleButton.css';const C = "_buttonFalse_1ed44_1", d = "_buttonTrue_1ed44_8", e = {
   buttonFalse: C,
-  buttonTrue: _
+  buttonTrue: d
 };
-function m({
+function g({
   value: n,
   children: o,
-  className: l,
-  classNameTrue: u,
-  classNameFalse: i,
-  disabled: s,
-  ref: c,
+  className: u,
+  classNameTrue: i,
+  classNameFalse: l,
+  disabled: c,
+  ref: a,
   ...t
 }) {
-  return /* @__PURE__ */ a(
-    b,
+  return /* @__PURE__ */ b(
+    s,
     {
-      ref: c,
-      className: (("selected" in t ? t.selected : n) ? e.buttonTrue + " " + (u || "") : e.buttonFalse + " " + (i || "")) + " " + (l || ""),
+      ref: a,
+      className: (("selected" in t ? t.selected : n) ? e.buttonTrue + " " + (i || "") : e.buttonFalse + " " + (l || "")) + " " + (u || ""),
       onClick: () => {
         "onChange" in t && t.onChange !== void 0 ? t.onChange(!n) : "onClick" in t && t.onClick !== void 0 && t.onClick();
       },
-      disabled: s,
+      disabled: c,
       children: o
     }
   );
 }
 export {
-  m as ToggleButton
+  g as ToggleButton
 };

package/dist/components/Button/ToggleButton/ToggleButtonGroup.js

@@ -1,14 +1,14 @@
-import { jsxs as u, jsx as l } from "react/jsx-runtime";
-import n from "react";
-import '../../../assets/ToggleButtonGroup.css';const m = "_container_12l5n_1", x = "_outline_12l5n_6", h = "_label_12l5n_11", T = "_helperText_12l5n_16", E = "_helperTextError_12l5n_23", r = {
-  container: m,
+import { jsxs as _, jsx as n } from "react/jsx-runtime";
+import t from "react";
+import '../../../assets/ToggleButtonGroup.css';const u = "_container_1ngm3_1", x = "_outline_1ngm3_6", h = "_label_1ngm3_11", T = "_helperText_1ngm3_16", g = "_helperTextError_1ngm3_23", r = {
+  container: u,
   outline: x,
   label: h,
   helperText: T,
-  helperTextError: E
+  helperTextError: g
 };
-function v({
-  value: t,
+function f({
+  value: l,
   onChange: o,
   children: c,
   label: s,
@@ -16,16 +16,16 @@ function v({
   helperText: p,
   className: a
 }) {
-  const _ = n.Children.map(c, (e) => n.isValidElement(e) ? n.cloneElement(e, {
-    selected: t === e.props.value,
+  const m = t.Children.map(c, (e) => t.isValidElement(e) ? t.cloneElement(e, {
+    selected: l === e.props.value,
     onClick: () => {
-      t === e.props.value ? o("") : o(e.props.value);
+      l === e.props.value ? o("") : o(e.props.value);
     }
   }) : e);
-  return /* @__PURE__ */ u("div", { className: r.container + " " + (a || ""), children: [
-    s && /* @__PURE__ */ l("p", { className: r.label, children: s }),
-    /* @__PURE__ */ l("div", { className: r.outline, children: _ }),
-    p && /* @__PURE__ */ l(
+  return /* @__PURE__ */ _("div", { className: r.container + " " + (a || ""), children: [
+    s && /* @__PURE__ */ n("p", { className: r.label, children: s }),
+    /* @__PURE__ */ n("div", { className: r.outline, children: m }),
+    p && /* @__PURE__ */ n(
       "p",
       {
         className: r.helperText + " " + (i ? r.helperTextError : ""),
@@ -35,5 +35,5 @@ function v({
   ] });
 }
 export {
-  v as ToggleButtonGroup
+  f as ToggleButtonGroup
 };

package/dist/components/Dialog/Dialog.js

@@ -1,23 +1,23 @@
-import { jsx as o, Fragment as l } from "react/jsx-runtime";
-import '../../assets/Dialog.css';const c = "_screenDarken_17c5i_1", s = "_dialog_17c5i_16", g = "_dialogTitle_17c5i_28", r = "_dialogContent_17c5i_35", d = "_dialogActions_17c5i_40", n = {
-  screenDarken: c,
-  dialog: s,
+import { jsx as n, Fragment as l } from "react/jsx-runtime";
+import '../../assets/Dialog.css';const s = "_screenDarken_9wfqy_1", c = "_dialog_9wfqy_16", g = "_dialogTitle_9wfqy_29", r = "_dialogContent_9wfqy_36", d = "_dialogActions_9wfqy_41", i = {
+  screenDarken: s,
+  dialog: c,
   dialogTitle: g,
   dialogContent: r,
   dialogActions: d
 };
-function m({ open: i, onClose: t, children: a }) {
-  return i ? /* @__PURE__ */ o(
+function f({ open: o, onClose: t, children: a }) {
+  return o ? /* @__PURE__ */ n(
     "div",
     {
-      className: n.screenDarken,
+      className: i.screenDarken,
       onClick: () => {
         t && t();
       },
-      children: /* @__PURE__ */ o(
+      children: /* @__PURE__ */ n(
         "div",
         {
-          className: n.dialog,
+          className: i.dialog,
           onClick: (e) => {
             e.stopPropagation();
           },
@@ -25,20 +25,20 @@ function m({ open: i, onClose: t, children: a }) {
         }
       )
     }
-  ) : /* @__PURE__ */ o(l, {});
+  ) : /* @__PURE__ */ n(l, {});
 }
-function u({ children: i }) {
-  return /* @__PURE__ */ o("h2", { className: n.dialogTitle, children: i });
+function m({ children: o }) {
+  return /* @__PURE__ */ n("h2", { className: i.dialogTitle, children: o });
 }
-function D({ children: i }) {
-  return /* @__PURE__ */ o("div", { className: n.dialogContent, children: i });
+function u({ children: o }) {
+  return /* @__PURE__ */ n("div", { className: i.dialogContent, children: o });
 }
-function f({ children: i }) {
-  return /* @__PURE__ */ o("div", { className: n.dialogActions, children: i });
+function D({ children: o }) {
+  return /* @__PURE__ */ n("div", { className: i.dialogActions, children: o });
 }
 export {
-  m as Dialog,
-  f as DialogActions,
-  D as DialogContent,
-  u as DialogTitle
+  f as Dialog,
+  D as DialogActions,
+  u as DialogContent,
+  m as DialogTitle
 };

package/dist/components/Divider/Divider.js

@@ -1,10 +1,10 @@
 import { jsx as e } from "react/jsx-runtime";
-import '../../assets/Divider.css';const v = "_divider_nvu4k_1", d = "_horizontalDivider_nvu4k_8", t = "_verticalDivider_nvu4k_13", i = {
-  divider: v,
-  horizontalDivider: d,
+import '../../assets/Divider.css';const d = "_divider_rubc3_1", v = "_horizontalDivider_rubc3_8", t = "_verticalDivider_rubc3_13", i = {
+  divider: d,
+  horizontalDivider: v,
   verticalDivider: t
 };
-function n({ orientation: r }) {
+function c({ orientation: r }) {
   return /* @__PURE__ */ e(
     "div",
     {
@@ -13,5 +13,5 @@ function n({ orientation: r }) {
   );
 }
 export {
-  n as Divider
+  c as Divider
 };

package/dist/components/Input/Checkbox/Checkbox.js

@@ -1,8 +1,8 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import { IconButton as i } from "../../Button/IconButton/IconButton.js";
-import '../../../assets/Radio.css';const b = "_container_bc6cu_1", h = "_label_bc6cu_7", r = {
-  container: b,
-  label: h
+import '../../../assets/Radio.css';const h = "_container_12u6r_1", m = "_label_12u6r_7", r = {
+  container: h,
+  label: m
 };
 function _({
   value: c,

package/dist/components/Input/Counter/Counter.js

@@ -1,13 +1,13 @@
 import { jsxs as u, jsx as o } from "react/jsx-runtime";
 import { Button as e } from "../../Button/Button.js";
 import { Input as m } from "../Input.js";
-import '../../../assets/Counter.css';const b = "_container_whykh_1", h = "_button_whykh_6", p = "_buttonDisabled_whykh_16", _ = "_input_whykh_24", t = {
+import '../../../assets/Counter.css';const b = "_container_12kgw_1", p = "_button_12kgw_6", _ = "_buttonDisabled_12kgw_19", d = "_input_12kgw_31", t = {
   container: b,
-  button: h,
-  buttonDisabled: p,
-  input: _
+  button: p,
+  buttonDisabled: _,
+  input: d
 };
-function k({
+function h({
   value: s,
   id: c,
   increment: r,
@@ -53,5 +53,5 @@ function k({
   ] });
 }
 export {
-  k as Counter
+  h as Counter
 };

package/dist/components/Input/Input.js

@@ -1,5 +1,5 @@
 import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import { s as e } from "../../Input.module-D9zadJal.js";
+import { s as e } from "../../Input.module-C7oR_KDs.js";
 function j({
   value: m,
   onChange: t,

package/dist/components/Input/Radio/Radio.js

@@ -1,15 +1,15 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { jsxs as a, jsx as n } from "react/jsx-runtime";
 import { IconButton as d } from "../../Button/IconButton/IconButton.js";
-import '../../../assets/Radio.css';const m = "_container_bc6cu_1", u = "_label_bc6cu_7", i = {
+import '../../../assets/Radio.css';const m = "_container_12u6r_1", u = "_label_12u6r_7", i = {
   container: m,
   label: u
 };
-function h({
-  selected: n,
-  onChange: c,
+function b({
+  selected: r,
+  onChange: e,
   name: o,
   id: t,
-  label: r,
+  label: c,
   className: l
 }) {
   return /* @__PURE__ */ a("div", { className: i.container, children: [
@@ -18,19 +18,19 @@ function h({
       {
         className: l,
         onClick: () => {
-          c && c(!n);
+          e && e(!r);
         },
         children: [
-          n ? /* @__PURE__ */ e("span", { className: "material-symbols-outlined", children: "radio_button_checked" }) : /* @__PURE__ */ e("span", { className: "material-symbols-outlined", children: "radio_button_unchecked" }),
-          /* @__PURE__ */ e(
+          r ? /* @__PURE__ */ n("span", { className: "material-symbols-outlined", children: "radio_button_checked" }) : /* @__PURE__ */ n("span", { className: "material-symbols-outlined", children: "radio_button_unchecked" }),
+          /* @__PURE__ */ n(
             "input",
             {
               type: "radio",
               name: o,
               id: t,
-              checked: n,
+              checked: r,
               onChange: (s) => {
-                c && c(s.currentTarget.checked);
+                e && e(s.currentTarget.checked);
               },
               hidden: !0
             }
@@ -38,16 +38,16 @@ function h({
         ]
       }
     ),
-    r && /* @__PURE__ */ e(
+    c && /* @__PURE__ */ n(
       "label",
       {
         htmlFor: t,
         className: i.label,
-        children: r
+        children: c
       }
     )
   ] });
 }
 export {
-  h as Radio
+  b as Radio
 };

package/dist/components/Input/Radio/RadioGroup.js

@@ -1,23 +1,23 @@
-import { jsxs as h, jsx as l } from "react/jsx-runtime";
-import o from "react";
-import '../../../assets/RadioGroup.css';const x = "_container_qo0l5_1", d = "_outline_qo0l5_6", T = "_label_qo0l5_12", E = "_helperText_qo0l5_17", f = "_helperTextError_qo0l5_24", r = {
+import { jsxs as h, jsx as t } from "react/jsx-runtime";
+import l from "react";
+import '../../../assets/RadioGroup.css';const x = "_container_1ygqk_1", d = "_outline_1ygqk_6", T = "_label_1ygqk_12", y = "_helperText_1ygqk_17", E = "_helperTextError_1ygqk_24", r = {
   container: x,
   outline: d,
   label: T,
-  helperText: E,
-  helperTextError: f
+  helperText: y,
+  helperTextError: E
 };
-function N({
+function k({
   children: a,
   name: i,
-  label: t,
+  label: n,
   error: c,
-  helperText: n,
+  helperText: o,
   className: p,
   value: _,
   onChange: s
 }) {
-  const m = o.Children.map(a, (e) => o.isValidElement(e) ? o.cloneElement(e, {
+  const m = l.Children.map(a, (e) => l.isValidElement(e) ? l.cloneElement(e, {
     name: i,
     selected: _ === e.props.value,
     onChange: (u) => {
@@ -25,17 +25,17 @@ function N({
     }
   }) : e);
   return /* @__PURE__ */ h("div", { className: r.container + " " + (p || ""), children: [
-    t && /* @__PURE__ */ l("p", { className: r.label, children: t }),
-    /* @__PURE__ */ l("div", { className: r.outline, children: m }),
-    n && /* @__PURE__ */ l(
+    n && /* @__PURE__ */ t("p", { className: r.label, children: n }),
+    /* @__PURE__ */ t("div", { className: r.outline, children: m }),
+    o && /* @__PURE__ */ t(
       "p",
       {
         className: r.helperText + " " + (c ? r.helperTextError : ""),
-        children: n
+        children: o
       }
     )
   ] });
 }
 export {
-  N as RadioGroup
+  k as RadioGroup
 };

package/dist/components/Input/Select/Select.js

@@ -1,27 +1,27 @@
-import { jsxs as h, jsx as l } from "react/jsx-runtime";
+import { jsxs as p, jsx as l } from "react/jsx-runtime";
 import "react";
-import '../../../assets/Select.css';const p = "_container_6qy7m_1", u = "_outline_6qy7m_6", x = "_errorOutline_6qy7m_18", y = "_select_6qy7m_22", q = "_selectDisabled_6qy7m_36", b = "_helperText_6qy7m_40", d = "_helperTextError_6qy7m_47", T = "_label_6qy7m_51", e = {
-  container: p,
-  outline: u,
+import '../../../assets/Select.css';const u = "_container_14cji_1", j = "_outline_14cji_6", x = "_errorOutline_14cji_18", m = "_select_14cji_22", b = "_selectDisabled_14cji_39", d = "_helperText_14cji_51", T = "_helperTextError_14cji_58", N = "_label_14cji_62", e = {
+  container: u,
+  outline: j,
   errorOutline: x,
-  select: y,
-  selectDisabled: q,
-  helperText: b,
-  helperTextError: d,
-  label: T
+  select: m,
+  selectDisabled: b,
+  helperText: d,
+  helperTextError: T,
+  label: N
 };
-function E({
+function O({
   id: t,
-  value: i,
+  value: o,
   children: _,
   className: a,
   label: r,
-  onChange: s,
-  disabled: c,
-  helperText: n,
-  error: o
+  onChange: c,
+  disabled: s,
+  helperText: i,
+  error: n
 }) {
-  return /* @__PURE__ */ h("div", { className: e.container + " " + (a || ""), children: [
+  return /* @__PURE__ */ p("div", { className: e.container + " " + (a || ""), children: [
     r && /* @__PURE__ */ l(
       "label",
       {
@@ -33,31 +33,31 @@ function E({
     /* @__PURE__ */ l(
       "div",
       {
-        className: e.outline + " " + (o ? e.errorOutline : ""),
+        className: e.outline + " " + (n ? e.errorOutline : ""),
         children: /* @__PURE__ */ l(
           "select",
           {
             id: t,
-            className: e.select + " " + (c ? e.selectDisabled : ""),
-            value: i,
-            onChange: (m) => {
-              s && s(m.target.value);
+            className: e.select + " " + (s ? e.selectDisabled : ""),
+            value: o,
+            onChange: (h) => {
+              c && c(h.target.value);
             },
-            disabled: c,
+            disabled: s,
             children: _
           }
         )
       }
     ),
-    n && /* @__PURE__ */ l(
+    i && /* @__PURE__ */ l(
       "p",
       {
-        className: e.helperText + " " + (o ? e.helperTextError : ""),
-        children: n
+        className: e.helperText + " " + (n ? e.helperTextError : ""),
+        children: i
       }
     )
   ] });
 }
 export {
-  E as Select
+  O as Select
 };

package/dist/components/Input/TextArea.js

@@ -1,5 +1,5 @@
 import { jsxs as x, jsx as r } from "react/jsx-runtime";
-import { s as e } from "../../Input.module-D9zadJal.js";
+import { s as e } from "../../Input.module-C7oR_KDs.js";
 function f({
   value: c,
   onChange: a,

package/dist/components/Snackbar/Snackbar.js

@@ -1,15 +1,15 @@
-import { jsxs as i, jsx as c, Fragment as b } from "react/jsx-runtime";
+import { jsxs as i, jsx as c, Fragment as l } from "react/jsx-runtime";
 import { useEffect as f } from "react";
-import '../../assets/Snackbar.css';const _ = "_snackbar_b5ton_1", g = "_message_b5ton_17", a = {
+import '../../assets/Snackbar.css';const _ = "_snackbar_tl00m_1", b = "_message_tl00m_18", a = {
   snackbar: _,
-  message: g
+  message: b
 };
-function o({
+function d({
   open: s,
   autoHideDuration: e,
   onClose: r,
-  message: t,
-  action: m
+  message: m,
+  action: t
 }) {
   return f(() => {
     if (s && e && r) {
@@ -19,10 +19,10 @@ function o({
       return () => clearTimeout(n);
     }
   }, [s, e, r]), s ? /* @__PURE__ */ i("div", { className: a.snackbar, children: [
-    /* @__PURE__ */ c("p", { className: a.message, children: t }),
-    /* @__PURE__ */ c("div", { children: m })
-  ] }) : /* @__PURE__ */ c(b, {});
+    /* @__PURE__ */ c("p", { className: a.message, children: m }),
+    /* @__PURE__ */ c("div", { children: t })
+  ] }) : /* @__PURE__ */ c(l, {});
 }
 export {
-  o as Snackbar
+  d as Snackbar
 };

package/dist/components/Table/Table.js

@@ -1,7 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
-import '../../assets/Table.css';const s = "_table_1sfmn_1", l = "_tableHead_1sfmn_11", c = "_th_1sfmn_20", d = "_td_1sfmn_31", a = {
-  table: s,
-  tableHead: l,
+import '../../assets/Table.css';const l = "_table_10gvy_1", s = "_tableHead_10gvy_8", c = "_th_10gvy_21", d = "_td_10gvy_33", a = {
+  table: l,
+  tableHead: s,
   th: c,
   td: d
 };
@@ -14,12 +14,12 @@ function b({ children: t }) {
 function r({ children: t }) {
   return /* @__PURE__ */ e("th", { className: a.th, children: t });
 }
-function m({ children: t }) {
+function u({ children: t }) {
   return /* @__PURE__ */ e("td", { className: a.td, children: t });
 }
 export {
   _ as Table,
   b as TableHead,
-  m as Td,
+  u as Td,
   r as Th
 };

package/dist/components/Tabs/Tab.d.ts

@@ -0,0 +1,9 @@
+export type TabProps = {
+    value: string;
+    children: React.ReactNode;
+    selected?: boolean;
+    onClick?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+};
+export declare function Tab({ children, selected, onClick, className, style, }: TabProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Tabs/Tab.js

@@ -0,0 +1,25 @@
+import { jsx as s } from "react/jsx-runtime";
+import '../../assets/Tab.css';const i = "_tab_1m0oo_1", n = "_activeTab_1m0oo_15", t = {
+  tab: i,
+  activeTab: n
+};
+function m({
+  children: a,
+  selected: o,
+  onClick: b,
+  className: c,
+  style: e
+}) {
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: t.tab + " " + (c || "") + " " + (o ? t.activeTab : ""),
+      onClick: b,
+      style: e,
+      children: a
+    }
+  );
+}
+export {
+  m as Tab
+};

package/dist/components/Tabs/TabBar.d.ts

@@ -1,7 +1,8 @@
+import { default as React } from 'react';
 type TabBarProps = {
     value: string;
     onChange: (value: string) => void;
-    tabs: string[];
+    children: React.ReactNode;
 };
-export declare function TabBar({ value, onChange, tabs }: TabBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function TabBar({ value, onChange, children }: TabBarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Tabs/TabBar.js

@@ -1,22 +1,17 @@
-import { jsx as c } from "react/jsx-runtime";
-import '../../assets/TabBar.css';const i = "_tabBar_1gpqs_1", b = "_tab_1gpqs_1", n = "_activeTab_1gpqs_20", t = {
-  tabBar: i,
-  tab: b,
-  activeTab: n
+import { jsx as s } from "react/jsx-runtime";
+import r from "react";
+import '../../assets/TabBar.css';const l = "_tabBar_1oym3_1", m = {
+  tabBar: l
 };
-function _({ value: s, onChange: r, tabs: e }) {
-  return /* @__PURE__ */ c("div", { className: t.tabBar, children: e.map((a) => /* @__PURE__ */ c(
-    "div",
-    {
-      className: t.tab + " " + (a === s ? t.activeTab : ""),
-      onClick: () => {
-        r(a);
-      },
-      children: a
-    },
-    a
-  )) });
+function c({ value: t, onChange: a, children: n }) {
+  const o = r.Children.map(n, (e) => r.isValidElement(e) ? r.cloneElement(e, {
+    selected: t === e.props.value,
+    onClick: () => {
+      a(e.props.value);
+    }
+  }) : e);
+  return /* @__PURE__ */ s("div", { className: m.tabBar, children: o });
 }
 export {
-  _ as TabBar
+  c as TabBar
 };

package/dist/components/Tabs/Tabs.js

@@ -1,26 +1,34 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { useState as s } from "react";
-import { TabBar as i } from "./TabBar.js";
-import '../../assets/Tabs.css';const m = "_container_1q694_1", l = "_contentContainer_1q694_6", o = {
-  container: m,
-  contentContainer: l
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { useState as i } from "react";
+import { Tab as s } from "./Tab.js";
+import { TabBar as m } from "./TabBar.js";
+import '../../assets/Tabs.css';const l = "_container_1q694_1", u = "_contentContainer_1q694_6", o = {
+  container: l,
+  contentContainer: u
 };
-function b({ tabs: n }) {
-  const [t, r] = s(Object.keys(n)[0]);
+function f({ tabs: e }) {
+  const [r, c] = i(Object.keys(e)[0]);
   return /* @__PURE__ */ a("div", { className: o.container, children: [
-    /* @__PURE__ */ e(
-      i,
+    /* @__PURE__ */ t(
+      m,
       {
-        value: t,
-        onChange: (c) => {
-          r(c);
+        value: r,
+        onChange: (n) => {
+          c(n);
         },
-        tabs: Object.keys(n)
+        children: Object.keys(e).map((n) => /* @__PURE__ */ t(
+          s,
+          {
+            value: n,
+            children: n
+          },
+          n
+        ))
       }
     ),
-    /* @__PURE__ */ e("div", { className: o.contentContainer, children: n[t] })
+    /* @__PURE__ */ t("div", { className: o.contentContainer, children: e[r] })
   ] });
 }
 export {
-  b as Tabs
+  f as Tabs
 };

package/dist/components/Tooltip/Tooltip.js

@@ -1,11 +1,11 @@
-import { jsxs as v, jsx as n } from "react/jsx-runtime";
+import { jsxs as _, jsx as n } from "react/jsx-runtime";
 import i from "react";
-import '../../assets/Tooltip.css';const _ = "_container_1rv9k_1", m = "_tooltipContainer_1rv9k_7", f = "_tooltip_1rv9k_7", t = {
-  container: _,
-  tooltipContainer: m,
-  tooltip: f
+import '../../assets/Tooltip.css';const m = "_container_147qb_1", f = "_tooltipContainer_147qb_7", b = "_tooltip_147qb_7", t = {
+  container: m,
+  tooltipContainer: f,
+  tooltip: b
 };
-function y({ content: s, children: l }) {
+function C({ content: s, children: l }) {
   const [r, o] = i.useState(!1), [a, c] = i.useState(
     {}
   ), p = (d) => {
@@ -17,7 +17,7 @@ function y({ content: s, children: l }) {
   }, u = () => {
     o(!1);
   };
-  return /* @__PURE__ */ v(
+  return /* @__PURE__ */ _(
     "div",
     {
       className: t.container,
@@ -38,5 +38,5 @@ function y({ content: s, children: l }) {
   );
 }
 export {
-  y as Tooltip
+  C as Tooltip
 };

package/dist/main.d.ts

@@ -13,6 +13,7 @@ export { RadioGroup } from './components/Input/Radio/RadioGroup.tsx';
 export { Select } from './components/Input/Select/Select.tsx';
 export { Snackbar } from './components/Snackbar/Snackbar.tsx';
 export { Table, TableHead, Td, Th } from './components/Table/Table.tsx';
+export { Tab } from './components/Tabs/Tab.tsx';
 export { TabBar } from './components/Tabs/TabBar.tsx';
 export { Tabs } from './components/Tabs/Tabs.tsx';
 export { Tooltip } from './components/Tooltip/Tooltip.tsx';

package/dist/main.js

@@ -2,7 +2,7 @@ import { Button as t } from "./components/Button/Button.js";
 import { IconButton as p } from "./components/Button/IconButton/IconButton.js";
 import { ToggleButton as f } from "./components/Button/ToggleButton/ToggleButton.js";
 import { ToggleButtonGroup as a } from "./components/Button/ToggleButton/ToggleButtonGroup.js";
-import { Dialog as l, DialogActions as n, DialogContent as T, DialogTitle as g } from "./components/Dialog/Dialog.js";
+import { Dialog as i, DialogActions as l, DialogContent as n, DialogTitle as g } from "./components/Dialog/Dialog.js";
 import { Divider as b } from "./components/Divider/Divider.js";
 import { Input as d } from "./components/Input/Input.js";
 import { TextArea as D } from "./components/Input/TextArea.js";
@@ -13,16 +13,17 @@ import { RadioGroup as R } from "./components/Input/Radio/RadioGroup.js";
 import { Select as v } from "./components/Input/Select/Select.js";
 import { Snackbar as j } from "./components/Snackbar/Snackbar.js";
 import { Table as w, TableHead as y, Td as z, Th as E } from "./components/Table/Table.js";
-import { TabBar as J } from "./components/Tabs/TabBar.js";
-import { Tabs as L } from "./components/Tabs/Tabs.js";
-import { Tooltip as N } from "./components/Tooltip/Tooltip.js";
+import { Tab as J } from "./components/Tabs/Tab.js";
+import { TabBar as L } from "./components/Tabs/TabBar.js";
+import { Tabs as N } from "./components/Tabs/Tabs.js";
+import { Tooltip as P } from "./components/Tooltip/Tooltip.js";
 import './assets/main.css';export {
   t as Button,
   h as Checkbox,
   s as Counter,
-  l as Dialog,
-  n as DialogActions,
-  T as DialogContent,
+  i as Dialog,
+  l as DialogActions,
+  n as DialogContent,
   g as DialogTitle,
   b as Divider,
   p as IconButton,
@@ -31,14 +32,15 @@ import './assets/main.css';export {
   R as RadioGroup,
   v as Select,
   j as Snackbar,
-  J as TabBar,
+  J as Tab,
+  L as TabBar,
   w as Table,
   y as TableHead,
-  L as Tabs,
+  N as Tabs,
   z as Td,
   D as TextArea,
   E as Th,
   f as ToggleButton,
   a as ToggleButtonGroup,
-  N as Tooltip
+  P as Tooltip
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@liujip0/components",
   "private": false,
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",

package/dist/Input.module-D9zadJal.js

@@ -1,13 +0,0 @@
-import './assets/Input.css';const e = "_container_82euj_1", t = "_outline_82euj_6", r = "_errorOutline_82euj_18", n = "_input_82euj_22", _ = "_inputDisabled_82euj_38", l = "_helperText_82euj_42", o = "_helperTextError_82euj_49", u = "_label_82euj_53", i = {
-  container: e,
-  outline: t,
-  errorOutline: r,
-  input: n,
-  inputDisabled: _,
-  helperText: l,
-  helperTextError: o,
-  label: u
-};
-export {
-  i as s
-};