kilya-ui 0.0.1 → 0.0.2

package/dist/kilya-ui.css

@@ -1 +1,465 @@
-._button-white_hbhwm_1 path[fill],._button-reset_hbhwm_1 path[fill],._button-link_hbhwm_1 path[fill],._button-border_hbhwm_1 path[fill],._button-default_hbhwm_1 path[fill],._button-white_hbhwm_1 rect[fill],._button-reset_hbhwm_1 rect[fill],._button-link_hbhwm_1 rect[fill],._button-border_hbhwm_1 rect[fill],._button-default_hbhwm_1 rect[fill],._button-white_hbhwm_1 circle[fill],._button-reset_hbhwm_1 circle[fill],._button-link_hbhwm_1 circle[fill],._button-border_hbhwm_1 circle[fill],._button-default_hbhwm_1 circle[fill]{fill:currentColor;transition:.2s fill}._button-white_hbhwm_1 path[stroke],._button-reset_hbhwm_1 path[stroke],._button-link_hbhwm_1 path[stroke],._button-border_hbhwm_1 path[stroke],._button-default_hbhwm_1 path[stroke],._button-white_hbhwm_1 rect[stroke],._button-reset_hbhwm_1 rect[stroke],._button-link_hbhwm_1 rect[stroke],._button-border_hbhwm_1 rect[stroke],._button-default_hbhwm_1 rect[stroke],._button-white_hbhwm_1 circle[stroke],._button-reset_hbhwm_1 circle[stroke],._button-link_hbhwm_1 circle[stroke],._button-border_hbhwm_1 circle[stroke],._button-default_hbhwm_1 circle[stroke]{stroke:currentColor;transition:.2s stroke}._button-white_hbhwm_1 svg,._button-reset_hbhwm_1 svg,._button-link_hbhwm_1 svg,._button-border_hbhwm_1 svg,._button-default_hbhwm_1 svg{max-width:100%;width:100%;height:100%;object-fit:contain}._button-white_hbhwm_1,._button-reset_hbhwm_1,._button-link_hbhwm_1,._button-border_hbhwm_1,._button-default_hbhwm_1{font-style:normal;line-height:1.5;width:fit-content;background-color:transparent;border:.0625rem solid transparent;padding:0;cursor:pointer;-webkit-user-select:none;user-select:none;transition:.2s color,.2s background-color,.2s border-color}._button-white_hbhwm_1:focus-visible,._button-reset_hbhwm_1:focus-visible,._button-link_hbhwm_1:focus-visible,._button-border_hbhwm_1:focus-visible,._button-default_hbhwm_1:focus-visible{outline:none}._button-white_hbhwm_1:disabled,._button-reset_hbhwm_1:disabled,._button-link_hbhwm_1:disabled,._button-border_hbhwm_1:disabled,._button-default_hbhwm_1:disabled{background-color:var(--disabled-bg-primary, #ddd);color:var(--disabled-color-white, #818181);border-color:var(--disabled-br-default, #ddd);pointer-events:none}._button-white_hbhwm_1,._button-border_hbhwm_1,._button-default_hbhwm_1{font-family:var(--button-font-family);font-size:var(--button-font-size);font-weight:var(--button-font-weight);text-align:center;display:flex;align-items:center;justify-content:center;gap:.625rem}._button-white_hbhwm_1,._button-border_hbhwm_1,._button-default_hbhwm_1{background-color:var(--background-color);color:var(--color);border-color:var(--border-color);border-radius:var(--border-radius);padding:.5rem 1rem}@media(hover:hover){._button-white_hbhwm_1:hover,._button-border_hbhwm_1:hover,._button-default_hbhwm_1:hover{background-color:var(--hover-background-color);color:var(--hover-color);border-color:var(--hover-border-color)}}@media(hover:none){._button-white_hbhwm_1:active,._button-border_hbhwm_1:active,._button-default_hbhwm_1:active{background-color:var(--hover-background-color);color:var(--hover-color);border-color:var(--hover-border-color)}}._button-white_hbhwm_1:active,._button-border_hbhwm_1:active,._button-default_hbhwm_1:active{background-color:var(--pressed-background-color);color:var(--pressed-color);border-color:var(--pressed-border-color)}._button-default_hbhwm_1{--background-color: var(--bg-primary, #1677ff);--color: var(--color-white, #fff);--border-color: var(--bg-primary, #1677ff);--border-radius: var(--button-br-small);--hover-background-color: var(--hover-bg-primary, #4096ff);--hover-color: var(--color-white, #fff);--hover-border-color: var(--hover-bg-primary, #4096ff);--pressed-background-color: var(--pressed-bg-primary, #0958d9);--pressed-color: var(--color-white, #fff);--pressed-border-color: var(--pressed-bg-primary, #0958d9)}._button-border_hbhwm_1{--background-color: transparent;--color: var(--color-text, #000);--border-color: var(--bg-primary, #1677ff);--border-radius: var(--button-br-small);--hover-background-color: var(--hover-bg-primary, #4096ff);--hover-color: var(--color-white, #fff);--hover-border-color: var(--hover-bg-primary, #4096ff);--pressed-background-color: var(--pressed-bg-primary, #0958d9);--pressed-color: var(--color-white, #fff);--pressed-border-color: var(--pressed-bg-primary, #0958d9)}._button-link_hbhwm_1{--color: var(--color-link, #1677ff);--hover-color: var(--hover-color-link, #4096ff);--pressed-color: var(--pressed-color-link, #0958d9);color:var(--color);border:none;border-radius:0}@media(hover:hover){._button-link_hbhwm_1:hover{color:var(--hover-color)}}@media(hover:none){._button-link_hbhwm_1:active{color:var(--hover-color)}}._button-link_hbhwm_1:active{color:var(--pressed-color)}._button-white_hbhwm_1{--background-color: var(--bg-white, #fff);--color: var(--color-text, #000);--border-color: var(--bg-white, #fff);--border-radius: var(--button-br-small);--hover-background-color: var(--hover-bg-primary, #4096ff);--hover-color: var(--color-white, #fff);--hover-border-color: var(--hover-bg-primary, #4096ff);--pressed-background-color: var(--pressed-bg-primary, #0958d9);--pressed-color: var(--color-white, #fff);--pressed-border-color: var(--pressed-bg-primary, #0958d9)}._button-close_cfuu0_1 path[fill],._button-close_cfuu0_1 rect[fill],._button-close_cfuu0_1 circle[fill]{fill:currentColor;transition:.2s fill}._button-close_cfuu0_1 path[stroke],._button-close_cfuu0_1 rect[stroke],._button-close_cfuu0_1 circle[stroke]{stroke:currentColor;transition:.2s stroke}._button-close_cfuu0_1 svg{max-width:100%;width:100%;height:100%;object-fit:contain}._button-close_cfuu0_1{font-style:normal;line-height:1.5;width:fit-content;background-color:transparent;border:.0625rem solid transparent;padding:0;cursor:pointer;-webkit-user-select:none;user-select:none;transition:.2s color,.2s background-color,.2s border-color}._button-close_cfuu0_1:focus-visible{outline:none}._button-close_cfuu0_1:disabled{background-color:var(--disabled-bg-primary, #ddd);color:var(--disabled-color-white, #818181);border-color:var(--disabled-br-default, #ddd);pointer-events:none}._button-close_cfuu0_1{--ava: 1.875rem;max-width:var(--ava);min-width:var(--ava);width:var(--ava);height:var(--ava);max-height:var(--ava);font-size:0;position:relative;border-radius:.25rem;color:var(--button-color-close)}@media(hover:hover){._button-close_cfuu0_1:hover{color:var(--button-hover-color-close)}}@media(hover:none){._button-close_cfuu0_1:active{color:var(--button-hover-color-close)}}._button-close_cfuu0_1:before{content:"";height:100dvh;position:fixed;left:50%;top:50%;translate:-50% -50%;width:100vw;z-index:-1}._button-close_cfuu0_1 path{stroke:currentColor;stroke-width:.125rem}._input-button_zw44s_1 path[fill],._input-submit_zw44s_1 path[fill],._input-reset_zw44s_1 path[fill],._input-button_zw44s_1 rect[fill],._input-submit_zw44s_1 rect[fill],._input-reset_zw44s_1 rect[fill],._input-button_zw44s_1 circle[fill],._input-submit_zw44s_1 circle[fill],._input-reset_zw44s_1 circle[fill]{fill:currentColor;transition:.2s fill}._input-button_zw44s_1 path[stroke],._input-submit_zw44s_1 path[stroke],._input-reset_zw44s_1 path[stroke],._input-button_zw44s_1 rect[stroke],._input-submit_zw44s_1 rect[stroke],._input-reset_zw44s_1 rect[stroke],._input-button_zw44s_1 circle[stroke],._input-submit_zw44s_1 circle[stroke],._input-reset_zw44s_1 circle[stroke]{stroke:currentColor;transition:.2s stroke}._input-button_zw44s_1 svg,._input-submit_zw44s_1 svg,._input-reset_zw44s_1 svg{max-width:100%;width:100%;height:100%;object-fit:contain}._input-button_zw44s_1,._input-submit_zw44s_1,._input-reset_zw44s_1{font-style:normal;line-height:1.5;width:fit-content;background-color:transparent;border:.0625rem solid transparent;padding:0;cursor:pointer;-webkit-user-select:none;user-select:none;transition:.2s color,.2s background-color,.2s border-color}._input-button_zw44s_1:focus-visible,._input-submit_zw44s_1:focus-visible,._input-reset_zw44s_1:focus-visible{outline:none}._input-button_zw44s_1:disabled,._input-submit_zw44s_1:disabled,._input-reset_zw44s_1:disabled{background-color:var(--disabled-bg-primary, #ddd);color:var(--disabled-color-white, #818181);border-color:var(--disabled-br-default, #ddd);pointer-events:none}._input-button_zw44s_1,._input-submit_zw44s_1,._input-reset_zw44s_1{font-family:var(--button-font-family);font-size:var(--button-font-size);font-weight:var(--button-font-weight);text-align:center;display:flex;align-items:center;justify-content:center;gap:.625rem}._input-button_zw44s_1,._input-submit_zw44s_1,._input-reset_zw44s_1{background-color:var(--background-color);color:var(--color);border-color:var(--border-color);border-radius:var(--border-radius);padding:.5rem 1rem}@media(hover:hover){._input-button_zw44s_1:hover,._input-submit_zw44s_1:hover,._input-reset_zw44s_1:hover{background-color:var(--hover-background-color);color:var(--hover-color);border-color:var(--hover-border-color)}}@media(hover:none){._input-button_zw44s_1:active,._input-submit_zw44s_1:active,._input-reset_zw44s_1:active{background-color:var(--hover-background-color);color:var(--hover-color);border-color:var(--hover-border-color)}}._input-button_zw44s_1:active,._input-submit_zw44s_1:active,._input-reset_zw44s_1:active{background-color:var(--pressed-background-color);color:var(--pressed-color);border-color:var(--pressed-border-color)}._input-button_zw44s_1,._input-submit_zw44s_1,._input-reset_zw44s_1{--background-color: var(--bg-primary, #1677ff);--color: var(--color-white, #fff);--border-color: var(--bg-primary, #1677ff);--border-radius: var(--button-br-small);--hover-background-color: var(--hover-bg-primary, #4096ff);--hover-color: var(--color-white, #fff);--hover-border-color: var(--hover-bg-primary, #4096ff);--pressed-background-color: var(--pressed-bg-primary, #0958d9);--pressed-color: var(--color-white, #fff);--pressed-border-color: var(--pressed-bg-primary, #0958d9)}:root{--bg-primary: #1677ff;--bg-default: #d9d9d9;--bg-white: #fff;--color-text: #000;--color-white: #fff;--color-link: #1677ff;--br-default: #d9d9d9;--hover-bg-primary: #4096ff;--hover-bg-default: #0000000f;--hover-color-link: #4096ff;--hover-br-default: #0000000f;--focused-bg-primary: #4096ff;--focused-bg-default: #0000000f;--focused-color-link: #4096ff;--focused-br-default: #0000000f;--pressed-bg-primary: #0958d9;--pressed-bg-default: #00000026;--pressed-color-link: #0958d9;--pressed-br-default: #00000026;--disabled-bg-primary: #ddd;--disabled-bg-default: #ddd;--disabled-bg-white: #ddd;--disabled-color-text: #818181;--disabled-color-white: #818181;--disabled-color-link: #818181;--disabled-br-default: #ddd;--button-br-small: .25rem;--button-font-family: monospace;--button-font-size: 1rem;--button-font-weight: 300;--button-color-close: #000;--button-hover-color-close: #ff0000}html{font-size:16px}._input-color_zw44s_140{width:50px;height:30px;padding:2px}._input-checkbox_zw44s_146,._input-radio_zw44s_146{margin-right:8px;transform:scale(1.2)}._input-date_zw44s_151,._input-datetime-local_zw44s_151,._input-month_zw44s_151,._input-time_zw44s_151,._input-week_zw44s_151{border:1px solid #ccc;padding:8px;font-family:inherit}._input-file_zw44s_157{padding:8px;border:1px dashed #ccc}._input-number_zw44s_162,._input-text_zw44s_169,._input-email_zw44s_169,._input-password_zw44s_169,._input-search_zw44s_169,._input-tel_zw44s_169,._input-url_zw44s_169{border:1px solid #ccc;padding:8px 12px;border-radius:4px;font-size:14px}._input-image_zw44s_176{padding:10px 20px;border:none;border-radius:4px;cursor:pointer;font-weight:700}._input-hidden_zw44s_184{display:none}._input-range_zw44s_188{width:100%;height:6px}
+.kilya-button-white path[fill],
+.kilya-button-reset path[fill],
+.kilya-button-link path[fill],
+.kilya-button-border path[fill],
+.kilya-button-default path[fill],
+.kilya-button-white rect[fill],
+.kilya-button-reset rect[fill],
+.kilya-button-link rect[fill],
+.kilya-button-border rect[fill],
+.kilya-button-default rect[fill],
+.kilya-button-white circle[fill],
+.kilya-button-reset circle[fill],
+.kilya-button-link circle[fill],
+.kilya-button-border circle[fill],
+.kilya-button-default circle[fill] {
+  fill: currentColor;
+  transition: 0.2s fill;
+}
+.kilya-button-white path[stroke],
+.kilya-button-reset path[stroke],
+.kilya-button-link path[stroke],
+.kilya-button-border path[stroke],
+.kilya-button-default path[stroke],
+.kilya-button-white rect[stroke],
+.kilya-button-reset rect[stroke],
+.kilya-button-link rect[stroke],
+.kilya-button-border rect[stroke],
+.kilya-button-default rect[stroke],
+.kilya-button-white circle[stroke],
+.kilya-button-reset circle[stroke],
+.kilya-button-link circle[stroke],
+.kilya-button-border circle[stroke],
+.kilya-button-default circle[stroke] {
+  stroke: currentColor;
+  transition: 0.2s stroke;
+}
+.kilya-button-white svg,
+.kilya-button-reset svg,
+.kilya-button-link svg,
+.kilya-button-border svg,
+.kilya-button-default svg {
+  max-width: 100%;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.kilya-button-white,
+.kilya-button-reset,
+.kilya-button-link,
+.kilya-button-border,
+.kilya-button-default {
+  font-style: normal;
+  line-height: 1.5;
+  width: fit-content;
+  background-color: transparent;
+  border: 0.0625rem solid transparent;
+  padding: 0;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  transition: 0.2s color, 0.2s background-color, 0.2s border-color;
+}
+.kilya-button-white:focus-visible,
+.kilya-button-reset:focus-visible,
+.kilya-button-link:focus-visible,
+.kilya-button-border:focus-visible,
+.kilya-button-default:focus-visible {
+  outline: none;
+}
+.kilya-button-white:disabled,
+.kilya-button-reset:disabled,
+.kilya-button-link:disabled,
+.kilya-button-border:disabled,
+.kilya-button-default:disabled {
+  background-color: var(--disabled-bg-primary, #ddd);
+  color: var(--disabled-color-white, #818181);
+  border-color: var(--disabled-br-default, #ddd);
+  pointer-events: none;
+}
+.kilya-button-white,
+.kilya-button-border,
+.kilya-button-default {
+  font-family: var(--button-font-family);
+  font-size: var(--button-font-size);
+  font-weight: var(--button-font-weight);
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.625rem;
+}
+.kilya-button-white,
+.kilya-button-border,
+.kilya-button-default {
+  background-color: var(--background-color);
+  color: var(--color);
+  border-color: var(--border-color);
+  border-radius: var(--border-radius);
+  padding: 0.5rem 1rem;
+}
+@media (hover: hover) {
+  .kilya-button-white:hover,
+  .kilya-button-border:hover,
+  .kilya-button-default:hover {
+    background-color: var(--hover-background-color);
+    color: var(--hover-color);
+    border-color: var(--hover-border-color);
+  }
+}
+@media (hover: none) {
+  .kilya-button-white:active,
+  .kilya-button-border:active,
+  .kilya-button-default:active {
+    background-color: var(--hover-background-color);
+    color: var(--hover-color);
+    border-color: var(--hover-border-color);
+  }
+}
+.kilya-button-white:active,
+.kilya-button-border:active,
+.kilya-button-default:active {
+  background-color: var(--pressed-background-color);
+  color: var(--pressed-color);
+  border-color: var(--pressed-border-color);
+}
+.kilya-button-default {
+  --background-color: var(--bg-primary, #1677ff);
+  --color: var(--color-white, #fff);
+  --border-color: var(--bg-primary, #1677ff);
+  --border-radius: var(--button-br-small);
+  --hover-background-color: var(--hover-bg-primary, #4096ff);
+  --hover-color: var(--color-white, #fff);
+  --hover-border-color: var(--hover-bg-primary, #4096ff);
+  --pressed-background-color: var(--pressed-bg-primary, #0958d9);
+  --pressed-color: var(--color-white, #fff);
+  --pressed-border-color: var(--pressed-bg-primary, #0958d9);
+}
+.kilya-button-border {
+  --background-color: transparent;
+  --color: var(--color-text, #000);
+  --border-color: var(--bg-primary, #1677ff);
+  --border-radius: var(--button-br-small);
+  --hover-background-color: var(--hover-bg-primary, #4096ff);
+  --hover-color: var(--color-white, #fff);
+  --hover-border-color: var(--hover-bg-primary, #4096ff);
+  --pressed-background-color: var(--pressed-bg-primary, #0958d9);
+  --pressed-color: var(--color-white, #fff);
+  --pressed-border-color: var(--pressed-bg-primary, #0958d9);
+}
+.kilya-button-link {
+  --color: var(--color-link, #1677ff);
+  --hover-color: var(--hover-color-link, #4096ff);
+  --pressed-color: var(--pressed-color-link, #0958d9);
+  color: var(--color);
+  border: none;
+  border-radius: 0;
+}
+@media (hover: hover) {
+  .kilya-button-link:hover {
+    color: var(--hover-color);
+  }
+}
+@media (hover: none) {
+  .kilya-button-link:active {
+    color: var(--hover-color);
+  }
+}
+.kilya-button-link:active {
+  color: var(--pressed-color);
+}
+.kilya-button-white {
+  --background-color: var(--bg-white, #fff);
+  --color: var(--color-text, #000);
+  --border-color: var(--bg-white, #fff);
+  --border-radius: var(--button-br-small);
+  --hover-background-color: var(--hover-bg-primary, #4096ff);
+  --hover-color: var(--color-white, #fff);
+  --hover-border-color: var(--hover-bg-primary, #4096ff);
+  --pressed-background-color: var(--pressed-bg-primary, #0958d9);
+  --pressed-color: var(--color-white, #fff);
+  --pressed-border-color: var(--pressed-bg-primary, #0958d9);
+}
+.kilya-button-white.kilya-active {
+  color: red;
+}
+.kilya-button-close path[fill],
+.kilya-button-close rect[fill],
+.kilya-button-close circle[fill] {
+  fill: currentColor;
+  transition: 0.2s fill;
+}
+.kilya-button-close path[stroke],
+.kilya-button-close rect[stroke],
+.kilya-button-close circle[stroke] {
+  stroke: currentColor;
+  transition: 0.2s stroke;
+}
+.kilya-button-close svg {
+  max-width: 100%;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.kilya-button-close {
+  font-style: normal;
+  line-height: 1.5;
+  width: fit-content;
+  background-color: transparent;
+  border: 0.0625rem solid transparent;
+  padding: 0;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  transition: 0.2s color, 0.2s background-color, 0.2s border-color;
+}
+.kilya-button-close:focus-visible {
+  outline: none;
+}
+.kilya-button-close:disabled {
+  background-color: var(--disabled-bg-primary, #ddd);
+  color: var(--disabled-color-white, #818181);
+  border-color: var(--disabled-br-default, #ddd);
+  pointer-events: none;
+}
+.kilya-button-close {
+  --ava: 1.875rem;
+  max-width: var(--ava);
+  min-width: var(--ava);
+  width: var(--ava);
+  height: var(--ava);
+  max-height: var(--ava);
+  font-size: 0;
+  position: relative;
+  border-radius: 0.25rem;
+  color: var(--button-color-close);
+}
+@media (hover: hover) {
+  .kilya-button-close:hover {
+    color: var(--button-hover-color-close);
+  }
+}
+@media (hover: none) {
+  .kilya-button-close:active {
+    color: var(--button-hover-color-close);
+  }
+}
+.kilya-button-close:before {
+  content: "";
+  height: 100dvh;
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  translate: -50% -50%;
+  width: 100vw;
+  z-index: -1;
+}
+.kilya-button-close path {
+  stroke: currentColor;
+  stroke-width: 0.125rem;
+}
+.kilya-input-button path[fill],
+.kilya-input-submit path[fill],
+.kilya-input-reset path[fill],
+.kilya-input-button rect[fill],
+.kilya-input-submit rect[fill],
+.kilya-input-reset rect[fill],
+.kilya-input-button circle[fill],
+.kilya-input-submit circle[fill],
+.kilya-input-reset circle[fill] {
+  fill: currentColor;
+  transition: 0.2s fill;
+}
+.kilya-input-button path[stroke],
+.kilya-input-submit path[stroke],
+.kilya-input-reset path[stroke],
+.kilya-input-button rect[stroke],
+.kilya-input-submit rect[stroke],
+.kilya-input-reset rect[stroke],
+.kilya-input-button circle[stroke],
+.kilya-input-submit circle[stroke],
+.kilya-input-reset circle[stroke] {
+  stroke: currentColor;
+  transition: 0.2s stroke;
+}
+.kilya-input-button svg,
+.kilya-input-submit svg,
+.kilya-input-reset svg {
+  max-width: 100%;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.kilya-input-button,
+.kilya-input-submit,
+.kilya-input-reset {
+  font-style: normal;
+  line-height: 1.5;
+  width: fit-content;
+  background-color: transparent;
+  border: 0.0625rem solid transparent;
+  padding: 0;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  transition: 0.2s color, 0.2s background-color, 0.2s border-color;
+}
+.kilya-input-button:focus-visible,
+.kilya-input-submit:focus-visible,
+.kilya-input-reset:focus-visible {
+  outline: none;
+}
+.kilya-input-button:disabled,
+.kilya-input-submit:disabled,
+.kilya-input-reset:disabled {
+  background-color: var(--disabled-bg-primary, #ddd);
+  color: var(--disabled-color-white, #818181);
+  border-color: var(--disabled-br-default, #ddd);
+  pointer-events: none;
+}
+.kilya-input-button,
+.kilya-input-submit,
+.kilya-input-reset {
+  font-family: var(--button-font-family);
+  font-size: var(--button-font-size);
+  font-weight: var(--button-font-weight);
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.625rem;
+}
+.kilya-input-button,
+.kilya-input-submit,
+.kilya-input-reset {
+  background-color: var(--background-color);
+  color: var(--color);
+  border-color: var(--border-color);
+  border-radius: var(--border-radius);
+  padding: 0.5rem 1rem;
+}
+@media (hover: hover) {
+  .kilya-input-button:hover,
+  .kilya-input-submit:hover,
+  .kilya-input-reset:hover {
+    background-color: var(--hover-background-color);
+    color: var(--hover-color);
+    border-color: var(--hover-border-color);
+  }
+}
+@media (hover: none) {
+  .kilya-input-button:active,
+  .kilya-input-submit:active,
+  .kilya-input-reset:active {
+    background-color: var(--hover-background-color);
+    color: var(--hover-color);
+    border-color: var(--hover-border-color);
+  }
+}
+.kilya-input-button:active,
+.kilya-input-submit:active,
+.kilya-input-reset:active {
+  background-color: var(--pressed-background-color);
+  color: var(--pressed-color);
+  border-color: var(--pressed-border-color);
+}
+.kilya-input-button,
+.kilya-input-submit,
+.kilya-input-reset {
+  --background-color: var(--bg-primary, #1677ff);
+  --color: var(--color-white, #fff);
+  --border-color: var(--bg-primary, #1677ff);
+  --border-radius: var(--button-br-small);
+  --hover-background-color: var(--hover-bg-primary, #4096ff);
+  --hover-color: var(--color-white, #fff);
+  --hover-border-color: var(--hover-bg-primary, #4096ff);
+  --pressed-background-color: var(--pressed-bg-primary, #0958d9);
+  --pressed-color: var(--color-white, #fff);
+  --pressed-border-color: var(--pressed-bg-primary, #0958d9);
+}
+:root {
+  --bg-primary: #1677ff;
+  --bg-default: #d9d9d9;
+  --bg-white: #fff;
+  --color-text: #000;
+  --color-white: #fff;
+  --color-link: #1677ff;
+  --br-default: #d9d9d9;
+  --hover-bg-primary: #4096ff;
+  --hover-bg-default: #0000000f;
+  --hover-color-link: #4096ff;
+  --hover-br-default: #0000000f;
+  --focused-bg-primary: #4096ff;
+  --focused-bg-default: #0000000f;
+  --focused-color-link: #4096ff;
+  --focused-br-default: #0000000f;
+  --pressed-bg-primary: #0958d9;
+  --pressed-bg-default: #00000026;
+  --pressed-color-link: #0958d9;
+  --pressed-br-default: #00000026;
+  --disabled-bg-primary: #ddd;
+  --disabled-bg-default: #ddd;
+  --disabled-bg-white: #ddd;
+  --disabled-color-text: #818181;
+  --disabled-color-white: #818181;
+  --disabled-color-link: #818181;
+  --disabled-br-default: #ddd;
+  --button-br-small: 0.25rem;
+  --button-font-family: monospace;
+  --button-font-size: 1rem;
+  --button-font-weight: 300;
+  --button-color-close: #000;
+  --button-hover-color-close: #ff0000;
+}
+html {
+  font-size: 16px;
+}
+.kilya-input-color {
+  width: 50px;
+  height: 30px;
+  padding: 2px;
+}
+.kilya-input-checkbox,
+.kilya-input-radio {
+  margin-right: 8px;
+  transform: scale(1.2);
+}
+.kilya-input-date,
+.kilya-input-datetime-local,
+.kilya-input-month,
+.kilya-input-time,
+.kilya-input-week {
+  border: 1px solid #ccc;
+  padding: 8px;
+  font-family: inherit;
+}
+.kilya-input-file {
+  padding: 8px;
+  border: 1px dashed #ccc;
+}
+.kilya-input-number,
+.kilya-input-text,
+.kilya-input-email,
+.kilya-input-password,
+.kilya-input-search,
+.kilya-input-tel,
+.kilya-input-url {
+  border: 1px solid #ccc;
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-size: 14px;
+}
+.kilya-input-image {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 700;
+}
+.kilya-input-hidden {
+  display: none;
+}
+.kilya-input-range {
+  width: 100%;
+  height: 6px;
+}

package/dist/kilya-ui.es.js

@@ -2,44 +2,44 @@ import ne from "react";
 function oe(n) {
   return n && n.__esModule && Object.prototype.hasOwnProperty.call(n, "default") ? n.default : n;
 }
-var R = { exports: {} }, d = {};
-var M;
+var T = { exports: {} }, E = {};
+var L;
 function ae() {
-  if (M) return d;
-  M = 1;
-  var n = Symbol.for("react.transitional.element"), f = Symbol.for("react.fragment");
-  function l(_, i, r) {
-    var a = null;
-    if (r !== void 0 && (a = "" + r), i.key !== void 0 && (a = "" + i.key), "key" in i) {
-      r = {};
-      for (var c in i)
-        c !== "key" && (r[c] = i[c]);
-    } else r = i;
-    return i = r.ref, {
+  if (L) return E;
+  L = 1;
+  var n = Symbol.for("react.transitional.element"), c = Symbol.for("react.fragment");
+  function o(d, i, t) {
+    var s = null;
+    if (t !== void 0 && (s = "" + t), i.key !== void 0 && (s = "" + i.key), "key" in i) {
+      t = {};
+      for (var f in i)
+        f !== "key" && (t[f] = i[f]);
+    } else t = i;
+    return i = t.ref, {
       $$typeof: n,
-      type: _,
-      key: a,
+      type: d,
+      key: s,
       ref: i !== void 0 ? i : null,
-      props: r
+      props: t
     };
   }
-  return d.Fragment = f, d.jsx = l, d.jsxs = l, d;
+  return E.Fragment = c, E.jsx = o, E.jsxs = o, E;
 }
-var b = {};
-var L;
+var _ = {};
+var W;
 function se() {
-  return L || (L = 1, process.env.NODE_ENV !== "production" && (function() {
+  return W || (W = 1, process.env.NODE_ENV !== "production" && (function() {
     function n(e) {
       if (e == null) return null;
       if (typeof e == "function")
         return e.$$typeof === ee ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case k:
+        case j:
           return "Fragment";
-        case J:
+        case z:
           return "Profiler";
-        case V:
+        case J:
           return "StrictMode";
         case H:
           return "Suspense";
@@ -52,100 +52,100 @@ function se() {
         switch (typeof e.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), e.$$typeof) {
-          case U:
+          case V:
             return "Portal";
           case G:
             return e.displayName || "Context";
           case B:
             return (e._context.displayName || "Context") + ".Consumer";
           case X:
-            var t = e.render;
-            return e = e.displayName, e || (e = t.displayName || t.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
           case Q:
-            return t = e.displayName || null, t !== null ? t : n(e.type) || "Memo";
-          case x:
-            t = e._payload, e = e._init;
+            return r = e.displayName || null, r !== null ? r : n(e.type) || "Memo";
+          case k:
+            r = e._payload, e = e._init;
             try {
-              return n(e(t));
+              return n(e(r));
             } catch {
             }
         }
       return null;
     }
-    function f(e) {
+    function c(e) {
       return "" + e;
     }
-    function l(e) {
+    function o(e) {
       try {
-        f(e);
-        var t = !1;
+        c(e);
+        var r = !1;
       } catch {
-        t = !0;
+        r = !0;
       }
-      if (t) {
-        t = console;
-        var o = t.error, s = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return o.call(
-          t,
+      if (r) {
+        r = console;
+        var a = r.error, u = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return a.call(
+          r,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          s
-        ), f(e);
+          u
+        ), c(e);
       }
     }
-    function _(e) {
-      if (e === k) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === x)
+    function d(e) {
+      if (e === j) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === k)
         return "<...>";
       try {
-        var t = n(e);
-        return t ? "<" + t + ">" : "<...>";
+        var r = n(e);
+        return r ? "<" + r + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
     function i() {
-      var e = y.A;
+      var e = x.A;
       return e === null ? null : e.getOwner();
     }
-    function r() {
+    function t() {
       return Error("react-stack-top-frame");
     }
-    function a(e) {
-      if (C.call(e, "key")) {
-        var t = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (t && t.isReactWarning) return !1;
+    function s(e) {
+      if ($.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function c(e, t) {
-      function o() {
-        $ || ($ = !0, console.error(
+    function f(e, r) {
+      function a() {
+        Y || (Y = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          t
+          r
         ));
       }
-      o.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: o,
+      a.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: a,
         configurable: !0
       });
     }
-    function h() {
+    function y() {
       var e = n(this.type);
-      return Y[e] || (Y[e] = !0, console.error(
+      return I[e] || (I[e] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), e = this.props.ref, e !== void 0 ? e : null;
     }
-    function T(e, t, o, s, v, j) {
-      var u = o.ref;
+    function O(e, r, a, u, R, S) {
+      var l = a.ref;
       return e = {
-        $$typeof: z,
+        $$typeof: C,
         type: e,
-        key: t,
-        props: o,
-        _owner: s
-      }, (u !== void 0 ? u : null) !== null ? Object.defineProperty(e, "ref", {
+        key: r,
+        props: a,
+        _owner: u
+      }, (l !== void 0 ? l : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
-        get: h
+        get: y
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -160,243 +160,221 @@ function se() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: v
+        value: R
       }), Object.defineProperty(e, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: j
+        value: S
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function E(e, t, o, s, v, j) {
-      var u = t.children;
-      if (u !== void 0)
-        if (s)
-          if (te(u)) {
-            for (s = 0; s < u.length; s++)
-              g(u[s]);
-            Object.freeze && Object.freeze(u);
+    function b(e, r, a, u, R, S) {
+      var l = r.children;
+      if (l !== void 0)
+        if (u)
+          if (re(l)) {
+            for (u = 0; u < l.length; u++)
+              N(l[u]);
+            Object.freeze && Object.freeze(l);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else g(u);
-      if (C.call(t, "key")) {
-        u = n(e);
-        var p = Object.keys(t).filter(function(re) {
-          return re !== "key";
+        else N(l);
+      if ($.call(r, "key")) {
+        l = n(e);
+        var m = Object.keys(r).filter(function(te) {
+          return te !== "key";
         });
-        s = 0 < p.length ? "{key: someKey, " + p.join(": ..., ") + ": ...}" : "{key: someKey}", D[u + s] || (p = 0 < p.length ? "{" + p.join(": ..., ") + ": ...}" : "{}", console.error(
+        u = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", M[l + u] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
-          s,
           u,
-          p,
-          u
-        ), D[u + s] = !0);
+          l,
+          m,
+          l
+        ), M[l + u] = !0);
       }
-      if (u = null, o !== void 0 && (l(o), u = "" + o), a(t) && (l(t.key), u = "" + t.key), "key" in t) {
-        o = {};
-        for (var S in t)
-          S !== "key" && (o[S] = t[S]);
-      } else o = t;
-      return u && c(
-        o,
+      if (l = null, a !== void 0 && (o(a), l = "" + a), s(r) && (o(r.key), l = "" + r.key), "key" in r) {
+        a = {};
+        for (var h in r)
+          h !== "key" && (a[h] = r[h]);
+      } else a = r;
+      return l && f(
+        a,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), T(
+      ), O(
         e,
-        u,
-        o,
+        l,
+        a,
         i(),
-        v,
-        j
+        R,
+        S
       );
     }
-    function g(e) {
-      N(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === x && (e._payload.status === "fulfilled" ? N(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
-    }
     function N(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === z;
+      g(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === k && (e._payload.status === "fulfilled" ? g(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function g(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === C;
     }
-    var w = ne, z = Symbol.for("react.transitional.element"), U = Symbol.for("react.portal"), k = Symbol.for("react.fragment"), V = Symbol.for("react.strict_mode"), J = Symbol.for("react.profiler"), B = Symbol.for("react.consumer"), G = Symbol.for("react.context"), X = Symbol.for("react.forward_ref"), H = Symbol.for("react.suspense"), Z = Symbol.for("react.suspense_list"), Q = Symbol.for("react.memo"), x = Symbol.for("react.lazy"), K = Symbol.for("react.activity"), ee = Symbol.for("react.client.reference"), y = w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, C = Object.prototype.hasOwnProperty, te = Array.isArray, O = console.createTask ? console.createTask : function() {
+    var v = ne, C = Symbol.for("react.transitional.element"), V = Symbol.for("react.portal"), j = Symbol.for("react.fragment"), J = Symbol.for("react.strict_mode"), z = Symbol.for("react.profiler"), B = Symbol.for("react.consumer"), G = Symbol.for("react.context"), X = Symbol.for("react.forward_ref"), H = Symbol.for("react.suspense"), Z = Symbol.for("react.suspense_list"), Q = Symbol.for("react.memo"), k = Symbol.for("react.lazy"), K = Symbol.for("react.activity"), ee = Symbol.for("react.client.reference"), x = v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, $ = Object.prototype.hasOwnProperty, re = Array.isArray, A = console.createTask ? console.createTask : function() {
       return null;
     };
-    w = {
+    v = {
       react_stack_bottom_frame: function(e) {
         return e();
       }
     };
-    var $, Y = {}, I = w.react_stack_bottom_frame.bind(
-      w,
-      r
-    )(), F = O(_(r)), D = {};
-    b.Fragment = k, b.jsx = function(e, t, o) {
-      var s = 1e4 > y.recentlyCreatedOwnerStacks++;
-      return E(
+    var Y, I = {}, F = v.react_stack_bottom_frame.bind(
+      v,
+      t
+    )(), D = A(d(t)), M = {};
+    _.Fragment = j, _.jsx = function(e, r, a) {
+      var u = 1e4 > x.recentlyCreatedOwnerStacks++;
+      return b(
         e,
-        t,
-        o,
+        r,
+        a,
         !1,
-        s ? Error("react-stack-top-frame") : I,
-        s ? O(_(e)) : F
+        u ? Error("react-stack-top-frame") : F,
+        u ? A(d(e)) : D
       );
-    }, b.jsxs = function(e, t, o) {
-      var s = 1e4 > y.recentlyCreatedOwnerStacks++;
-      return E(
+    }, _.jsxs = function(e, r, a) {
+      var u = 1e4 > x.recentlyCreatedOwnerStacks++;
+      return b(
         e,
-        t,
-        o,
+        r,
+        a,
         !0,
-        s ? Error("react-stack-top-frame") : I,
-        s ? O(_(e)) : F
+        u ? Error("react-stack-top-frame") : F,
+        u ? A(d(e)) : D
       );
     };
-  })()), b;
+  })()), _;
 }
-var W;
+var q;
 function ue() {
-  return W || (W = 1, process.env.NODE_ENV === "production" ? R.exports = ae() : R.exports = se()), R.exports;
+  return q || (q = 1, process.env.NODE_ENV === "production" ? T.exports = ae() : T.exports = se()), T.exports;
 }
-var m = ue(), A = { exports: {} };
-var q;
-function ie() {
-  return q || (q = 1, (function(n) {
+var p = ue(), w = { exports: {} };
+var U;
+function le() {
+  return U || (U = 1, (function(n) {
     (function() {
-      var f = {}.hasOwnProperty;
-      function l() {
-        for (var r = "", a = 0; a < arguments.length; a++) {
-          var c = arguments[a];
-          c && (r = i(r, _(c)));
+      var c = {}.hasOwnProperty;
+      function o() {
+        for (var t = "", s = 0; s < arguments.length; s++) {
+          var f = arguments[s];
+          f && (t = i(t, d(f)));
         }
-        return r;
+        return t;
       }
-      function _(r) {
-        if (typeof r == "string" || typeof r == "number")
-          return r;
-        if (typeof r != "object")
+      function d(t) {
+        if (typeof t == "string" || typeof t == "number")
+          return t;
+        if (typeof t != "object")
           return "";
-        if (Array.isArray(r))
-          return l.apply(null, r);
-        if (r.toString !== Object.prototype.toString && !r.toString.toString().includes("[native code]"))
-          return r.toString();
-        var a = "";
-        for (var c in r)
-          f.call(r, c) && r[c] && (a = i(a, c));
-        return a;
+        if (Array.isArray(t))
+          return o.apply(null, t);
+        if (t.toString !== Object.prototype.toString && !t.toString.toString().includes("[native code]"))
+          return t.toString();
+        var s = "";
+        for (var f in t)
+          c.call(t, f) && t[f] && (s = i(s, f));
+        return s;
       }
-      function i(r, a) {
-        return a ? r ? r + " " + a : r + a : r;
+      function i(t, s) {
+        return s ? t ? t + " " + s : t + s : t;
       }
-      n.exports ? (l.default = l, n.exports = l) : window.classNames = l;
+      n.exports ? (o.default = o, n.exports = o) : window.classNames = o;
     })();
-  })(A)), A.exports;
+  })(w)), w.exports;
 }
-var le = ie();
-const P = /* @__PURE__ */ oe(le), ce = {
-  "button-white": "_button-white_hbhwm_1",
-  "button-reset": "_button-reset_hbhwm_1",
-  "button-link": "_button-link_hbhwm_1",
-  "button-border": "_button-border_hbhwm_1",
-  "button-default": "_button-default_hbhwm_1"
-}, fe = ({
+var ce = le();
+const ie = /* @__PURE__ */ oe(ce), P = (n, c) => ie(fe(n), c), fe = (n) => {
+  if (typeof n == "string")
+    return `kilya-${n}`;
+  if (Array.isArray(n))
+    return n.map((o) => `kilya-${o}`).join(" ");
+  const c = {};
+  return Object.keys(n).forEach((o) => {
+    c[`kilya-${o}`] = n[o];
+  }), c;
+}, de = ({
   children: n,
-  disabled: f = !1,
-  type: l = "button",
-  button: _ = "default",
+  disabled: c = !1,
+  type: o = "button",
+  button: d = "default",
   className: i = "",
-  ...r
-}) => /* @__PURE__ */ m.jsx(
+  ...t
+}) => /* @__PURE__ */ p.jsx(
   "button",
   {
-    type: l,
-    className: P(ce[`button-${_}`], i),
-    disabled: f,
-    ...r,
+    type: o,
+    className: P(`button-${d}`, i),
+    disabled: c,
+    ...t,
     children: n
   }
-), _e = {
-  "button-close": "_button-close_cfuu0_1"
-}, pe = ({
+), me = ({
   disabled: n = !1,
-  className: f = "",
-  ...l
-}) => /* @__PURE__ */ m.jsxs(
+  className: c = "",
+  ...o
+}) => /* @__PURE__ */ p.jsxs(
   "button",
   {
     type: "button",
-    className: P(_e["button-close"], f),
+    className: P("button-close", c),
     disabled: n,
-    ...l,
+    ...o,
     children: [
       "Close",
-      /* @__PURE__ */ m.jsxs("svg", { viewBox: "0 0 24 25", children: [
-        /* @__PURE__ */ m.jsx("path", { d: "M6.34314 18.1567L17.6568 6.84303" }),
-        /* @__PURE__ */ m.jsx("path", { d: "M17.6569 18.1567L6.34315 6.84303" })
+      /* @__PURE__ */ p.jsxs("svg", { viewBox: "0 0 24 25", children: [
+        /* @__PURE__ */ p.jsx("path", { d: "M6.34314 18.1567L17.6568 6.84303" }),
+        /* @__PURE__ */ p.jsx("path", { d: "M17.6569 18.1567L6.34315 6.84303" })
       ] })
     ]
   }
-), me = {
-  Button: fe,
-  ButtonClose: pe
-}, de = {
-  "input-button": "_input-button_zw44s_1",
-  "input-submit": "_input-submit_zw44s_1",
-  "input-reset": "_input-reset_zw44s_1",
-  "input-color": "_input-color_zw44s_140",
-  "input-checkbox": "_input-checkbox_zw44s_146",
-  "input-radio": "_input-radio_zw44s_146",
-  "input-date": "_input-date_zw44s_151",
-  "input-datetime-local": "_input-datetime-local_zw44s_151",
-  "input-month": "_input-month_zw44s_151",
-  "input-time": "_input-time_zw44s_151",
-  "input-week": "_input-week_zw44s_151",
-  "input-file": "_input-file_zw44s_157",
-  "input-number": "_input-number_zw44s_162",
-  "input-text": "_input-text_zw44s_169",
-  "input-email": "_input-email_zw44s_169",
-  "input-password": "_input-password_zw44s_169",
-  "input-search": "_input-search_zw44s_169",
-  "input-tel": "_input-tel_zw44s_169",
-  "input-url": "_input-url_zw44s_169",
-  "input-image": "_input-image_zw44s_176",
-  "input-hidden": "_input-hidden_zw44s_184",
-  "input-range": "_input-range_zw44s_188"
-}, be = ({
+), pe = {
+  Button: de,
+  ButtonClose: me
+}, Ee = ({
   id: n,
-  type: f,
-  name: l,
-  className: _,
+  type: c,
+  name: o,
+  className: d,
   disabled: i,
-  required: r,
-  readOnly: a,
-  onBlur: c,
-  onFocus: h,
-  onClick: T,
-  ...E
-}) => /* @__PURE__ */ m.jsx(
+  required: t,
+  readOnly: s,
+  onBlur: f,
+  onFocus: y,
+  onClick: O,
+  ...b
+}) => /* @__PURE__ */ p.jsx(
   "input",
   {
-    type: f,
-    className: P(de[`input-${f}`], _),
-    name: l,
+    type: c,
+    className: P(`input-${c}`, d),
+    name: o,
     id: n,
     disabled: i,
-    required: r,
-    readOnly: a,
-    onBlur: c,
-    onFocus: h,
-    onClick: T,
-    ...E
+    required: t,
+    readOnly: s,
+    onBlur: f,
+    onFocus: y,
+    onClick: O,
+    ...b
   }
-), Ee = {
-  Button: me,
-  Input: be
+), _e = {
+  Button: pe,
+  Input: Ee
 }, ve = {
-  components: Ee
+  components: _e
 };
 export {
   ve as default

package/dist/kilya-ui.umd.js

@@ -1,6 +1,6 @@
-(function(p,b){typeof exports=="object"&&typeof module<"u"?module.exports=b(require("react")):typeof define=="function"&&define.amd?define(["react"],b):(p=typeof globalThis<"u"?globalThis:p||self,p["kilya-ui"]=b(p.React))})(this,(function(p){"use strict";function b(n){return n&&n.__esModule&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n}var v={exports:{}},E={};var z;function B(){if(z)return E;z=1;var n=Symbol.for("react.transitional.element"),f=Symbol.for("react.fragment");function l(_,i,r){var s=null;if(r!==void 0&&(s=""+r),i.key!==void 0&&(s=""+i.key),"key"in i){r={};for(var c in i)c!=="key"&&(r[c]=i[c])}else r=i;return i=r.ref,{$$typeof:n,type:_,key:s,ref:i!==void 0?i:null,props:r}}return E.Fragment=f,E.jsx=l,E.jsxs=l,E}var w={};var C;function J(){return C||(C=1,process.env.NODE_ENV!=="production"&&(function(){function n(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===_e?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case j:return"Fragment";case oe:return"Profiler";case ne:return"StrictMode";case ie:return"Suspense";case le:return"SuspenseList";case fe:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case re:return"Portal";case ae:return e.displayName||"Context";case se:return(e._context.displayName||"Context")+".Consumer";case ue:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ce:return t=e.displayName||null,t!==null?t:n(e.type)||"Memo";case S:t=e._payload,e=e._init;try{return n(e(t))}catch{}}return null}function f(e){return""+e}function l(e){try{f(e);var t=!1}catch{t=!0}if(t){t=console;var o=t.error,a=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return o.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",a),f(e)}}function _(e){if(e===j)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===S)return"<...>";try{var t=n(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function i(){var e=A.A;return e===null?null:e.getOwner()}function r(){return Error("react-stack-top-frame")}function s(e){if(M.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function c(e,t){function o(){L||(L=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}o.isReactWarning=!0,Object.defineProperty(e,"key",{get:o,configurable:!0})}function y(){var e=n(this.type);return W[e]||(W[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function O(e,t,o,a,T,g){var u=o.ref;return e={$$typeof:D,type:e,key:t,props:o,_owner:a},(u!==void 0?u:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:y}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:T}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:g}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function R(e,t,o,a,T,g){var u=t.children;if(u!==void 0)if(a)if(pe(u)){for(a=0;a<u.length;a++)I(u[a]);Object.freeze&&Object.freeze(u)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else I(u);if(M.call(t,"key")){u=n(e);var m=Object.keys(t).filter(function(de){return de!=="key"});a=0<m.length?"{key: someKey, "+m.join(": ..., ")+": ...}":"{key: someKey}",V[u+a]||(m=0<m.length?"{"+m.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+(function(m,_){typeof exports=="object"&&typeof module<"u"?module.exports=_(require("react")):typeof define=="function"&&define.amd?define(["react"],_):(m=typeof globalThis<"u"?globalThis:m||self,m["kilya-ui"]=_(m.React))})(this,(function(m){"use strict";function _(n){return n&&n.__esModule&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n}var R={exports:{}},b={};var C;function J(){if(C)return b;C=1;var n=Symbol.for("react.transitional.element"),i=Symbol.for("react.fragment");function o(d,c,t){var s=null;if(t!==void 0&&(s=""+t),c.key!==void 0&&(s=""+c.key),"key"in c){t={};for(var f in c)f!=="key"&&(t[f]=c[f])}else t=c;return c=t.ref,{$$typeof:n,type:d,key:s,ref:c!==void 0?c:null,props:t}}return b.Fragment=i,b.jsx=o,b.jsxs=o,b}var v={};var $;function z(){return $||($=1,process.env.NODE_ENV!=="production"&&(function(){function n(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ie?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case A:return"Fragment";case re:return"Profiler";case ee:return"StrictMode";case ae:return"Suspense";case se:return"SuspenseList";case le:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case K:return"Portal";case ne:return e.displayName||"Context";case te:return(e._context.displayName||"Context")+".Consumer";case oe:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ue:return r=e.displayName||null,r!==null?r:n(e.type)||"Memo";case S:r=e._payload,e=e._init;try{return n(e(r))}catch{}}return null}function i(e){return""+e}function o(e){try{i(e);var r=!1}catch{r=!0}if(r){r=console;var a=r.error,u=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return a.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",u),i(e)}}function d(e){if(e===A)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===S)return"<...>";try{var r=n(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function c(){var e=w.A;return e===null?null:e.getOwner()}function t(){return Error("react-stack-top-frame")}function s(e){if(L.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function f(e,r){function a(){W||(W=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}a.isReactWarning=!0,Object.defineProperty(e,"key",{get:a,configurable:!0})}function x(){var e=n(this.type);return q[e]||(q[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function h(e,r,a,u,O,N){var l=a.ref;return e={$$typeof:M,type:e,key:r,props:a,_owner:u},(l!==void 0?l:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:x}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:O}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:N}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function T(e,r,a,u,O,N){var l=r.children;if(l!==void 0)if(u)if(ce(l)){for(u=0;u<l.length;u++)F(l[u]);Object.freeze&&Object.freeze(l)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else F(l);if(L.call(r,"key")){l=n(e);var E=Object.keys(r).filter(function(fe){return fe!=="key"});u=0<E.length?"{key: someKey, "+E.join(": ..., ")+": ...}":"{key: someKey}",V[l+u]||(E=0<E.length?"{"+E.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,a,u,m,u),V[u+a]=!0)}if(u=null,o!==void 0&&(l(o),u=""+o),s(t)&&(l(t.key),u=""+t.key),"key"in t){o={};for(var N in t)N!=="key"&&(o[N]=t[N])}else o=t;return u&&c(o,typeof e=="function"?e.displayName||e.name||"Unknown":e),O(e,u,o,i(),T,g)}function I(e){F(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===S&&(e._payload.status==="fulfilled"?F(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function F(e){return typeof e=="object"&&e!==null&&e.$$typeof===D}var h=p,D=Symbol.for("react.transitional.element"),re=Symbol.for("react.portal"),j=Symbol.for("react.fragment"),ne=Symbol.for("react.strict_mode"),oe=Symbol.for("react.profiler"),se=Symbol.for("react.consumer"),ae=Symbol.for("react.context"),ue=Symbol.for("react.forward_ref"),ie=Symbol.for("react.suspense"),le=Symbol.for("react.suspense_list"),ce=Symbol.for("react.memo"),S=Symbol.for("react.lazy"),fe=Symbol.for("react.activity"),_e=Symbol.for("react.client.reference"),A=h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,M=Object.prototype.hasOwnProperty,pe=Array.isArray,P=console.createTask?console.createTask:function(){return null};h={react_stack_bottom_frame:function(e){return e()}};var L,W={},q=h.react_stack_bottom_frame.bind(h,r)(),U=P(_(r)),V={};w.Fragment=j,w.jsx=function(e,t,o){var a=1e4>A.recentlyCreatedOwnerStacks++;return R(e,t,o,!1,a?Error("react-stack-top-frame"):q,a?P(_(e)):U)},w.jsxs=function(e,t,o){var a=1e4>A.recentlyCreatedOwnerStacks++;return R(e,t,o,!0,a?Error("react-stack-top-frame"):q,a?P(_(e)):U)}})()),w}var Y;function G(){return Y||(Y=1,process.env.NODE_ENV==="production"?v.exports=B():v.exports=J()),v.exports}var d=G(),k={exports:{}};var $;function X(){return $||($=1,(function(n){(function(){var f={}.hasOwnProperty;function l(){for(var r="",s=0;s<arguments.length;s++){var c=arguments[s];c&&(r=i(r,_(c)))}return r}function _(r){if(typeof r=="string"||typeof r=="number")return r;if(typeof r!="object")return"";if(Array.isArray(r))return l.apply(null,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var s="";for(var c in r)f.call(r,c)&&r[c]&&(s=i(s,c));return s}function i(r,s){return s?r?r+" "+s:r+s:r}n.exports?(l.default=l,n.exports=l):window.classNames=l})()})(k)),k.exports}var H=X();const x=b(H),Z={"button-white":"_button-white_hbhwm_1","button-reset":"_button-reset_hbhwm_1","button-link":"_button-link_hbhwm_1","button-border":"_button-border_hbhwm_1","button-default":"_button-default_hbhwm_1"},Q=({children:n,disabled:f=!1,type:l="button",button:_="default",className:i="",...r})=>d.jsx("button",{type:l,className:x(Z[`button-${_}`],i),disabled:f,...r,children:n}),K={"button-close":"_button-close_cfuu0_1"},ee={Button:Q,ButtonClose:({disabled:n=!1,className:f="",...l})=>d.jsxs("button",{type:"button",className:x(K["button-close"],f),disabled:n,...l,children:["Close",d.jsxs("svg",{viewBox:"0 0 24 25",children:[d.jsx("path",{d:"M6.34314 18.1567L17.6568 6.84303"}),d.jsx("path",{d:"M17.6569 18.1567L6.34315 6.84303"})]})]})},te={"input-button":"_input-button_zw44s_1","input-submit":"_input-submit_zw44s_1","input-reset":"_input-reset_zw44s_1","input-color":"_input-color_zw44s_140","input-checkbox":"_input-checkbox_zw44s_146","input-radio":"_input-radio_zw44s_146","input-date":"_input-date_zw44s_151","input-datetime-local":"_input-datetime-local_zw44s_151","input-month":"_input-month_zw44s_151","input-time":"_input-time_zw44s_151","input-week":"_input-week_zw44s_151","input-file":"_input-file_zw44s_157","input-number":"_input-number_zw44s_162","input-text":"_input-text_zw44s_169","input-email":"_input-email_zw44s_169","input-password":"_input-password_zw44s_169","input-search":"_input-search_zw44s_169","input-tel":"_input-tel_zw44s_169","input-url":"_input-url_zw44s_169","input-image":"_input-image_zw44s_176","input-hidden":"_input-hidden_zw44s_184","input-range":"_input-range_zw44s_188"};return{components:{Button:ee,Input:({id:n,type:f,name:l,className:_,disabled:i,required:r,readOnly:s,onBlur:c,onFocus:y,onClick:O,...R})=>d.jsx("input",{type:f,className:x(te[`input-${f}`],_),name:l,id:n,disabled:i,required:r,readOnly:s,onBlur:c,onFocus:y,onClick:O,...R})}}}));
+  <%s key={someKey} {...props} />`,u,l,E,l),V[l+u]=!0)}if(l=null,a!==void 0&&(o(a),l=""+a),s(r)&&(o(r.key),l=""+r.key),"key"in r){a={};for(var g in r)g!=="key"&&(a[g]=r[g])}else a=r;return l&&f(a,typeof e=="function"?e.displayName||e.name||"Unknown":e),h(e,l,a,c(),O,N)}function F(e){D(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===S&&(e._payload.status==="fulfilled"?D(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function D(e){return typeof e=="object"&&e!==null&&e.$$typeof===M}var y=m,M=Symbol.for("react.transitional.element"),K=Symbol.for("react.portal"),A=Symbol.for("react.fragment"),ee=Symbol.for("react.strict_mode"),re=Symbol.for("react.profiler"),te=Symbol.for("react.consumer"),ne=Symbol.for("react.context"),oe=Symbol.for("react.forward_ref"),ae=Symbol.for("react.suspense"),se=Symbol.for("react.suspense_list"),ue=Symbol.for("react.memo"),S=Symbol.for("react.lazy"),le=Symbol.for("react.activity"),ie=Symbol.for("react.client.reference"),w=y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,L=Object.prototype.hasOwnProperty,ce=Array.isArray,P=console.createTask?console.createTask:function(){return null};y={react_stack_bottom_frame:function(e){return e()}};var W,q={},B=y.react_stack_bottom_frame.bind(y,t)(),U=P(d(t)),V={};v.Fragment=A,v.jsx=function(e,r,a){var u=1e4>w.recentlyCreatedOwnerStacks++;return T(e,r,a,!1,u?Error("react-stack-top-frame"):B,u?P(d(e)):U)},v.jsxs=function(e,r,a){var u=1e4>w.recentlyCreatedOwnerStacks++;return T(e,r,a,!0,u?Error("react-stack-top-frame"):B,u?P(d(e)):U)}})()),v}var Y;function G(){return Y||(Y=1,process.env.NODE_ENV==="production"?R.exports=J():R.exports=z()),R.exports}var p=G(),j={exports:{}};var I;function X(){return I||(I=1,(function(n){(function(){var i={}.hasOwnProperty;function o(){for(var t="",s=0;s<arguments.length;s++){var f=arguments[s];f&&(t=c(t,d(f)))}return t}function d(t){if(typeof t=="string"||typeof t=="number")return t;if(typeof t!="object")return"";if(Array.isArray(t))return o.apply(null,t);if(t.toString!==Object.prototype.toString&&!t.toString.toString().includes("[native code]"))return t.toString();var s="";for(var f in t)i.call(t,f)&&t[f]&&(s=c(s,f));return s}function c(t,s){return s?t?t+" "+s:t+s:t}n.exports?(o.default=o,n.exports=o):window.classNames=o})()})(j)),j.exports}var H=X();const Z=_(H),k=(n,i)=>Z(Q(n),i),Q=n=>{if(typeof n=="string")return`kilya-${n}`;if(Array.isArray(n))return n.map(o=>`kilya-${o}`).join(" ");const i={};return Object.keys(n).forEach(o=>{i[`kilya-${o}`]=n[o]}),i};return{components:{Button:{Button:({children:n,disabled:i=!1,type:o="button",button:d="default",className:c="",...t})=>p.jsx("button",{type:o,className:k(`button-${d}`,c),disabled:i,...t,children:n}),ButtonClose:({disabled:n=!1,className:i="",...o})=>p.jsxs("button",{type:"button",className:k("button-close",i),disabled:n,...o,children:["Close",p.jsxs("svg",{viewBox:"0 0 24 25",children:[p.jsx("path",{d:"M6.34314 18.1567L17.6568 6.84303"}),p.jsx("path",{d:"M17.6569 18.1567L6.34315 6.84303"})]})]})},Input:({id:n,type:i,name:o,className:d,disabled:c,required:t,readOnly:s,onBlur:f,onFocus:x,onClick:h,...T})=>p.jsx("input",{type:i,className:k(`input-${i}`,d),name:o,id:n,disabled:c,required:t,readOnly:s,onBlur:f,onFocus:x,onClick:h,...T})}}}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kilya-ui",
   "private": false,
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "files": [
     "dist"
@@ -42,6 +42,8 @@
     "eslint-plugin-react-refresh": "^0.4.24",
     "eslint-plugin-storybook": "^10.0.8",
     "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "postcss-prefixer": "^3.0.0",
     "sass-embedded": "^1.93.3",
     "storybook": "^10.0.8",
     "styled-components": "^6.1.19",