mertani-web-toolkit 0.1.34 → 0.1.35

package/dist/components/inputs/MultiSelectInput/MultiSelectInput.css

@@ -0,0 +1,189 @@
+.multi-select-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.multi-select-container.multi-select-side {
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+}
+
+.multi-select-label {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--color-text-primary);
+  margin-bottom: 4px;
+  display: block;
+}
+
+.multi-select-container.multi-select-side .multi-select-label {
+  margin-bottom: 0;
+  min-width: 120px;
+}
+
+.multi-select-label.label-left {
+  text-align: left;
+}
+
+.multi-select-label.label-right {
+  text-align: right;
+}
+
+.label-required {
+  color: var(--color-text-error-ti);
+  margin-left: 4px;
+}
+
+.label-subLabel {
+  font-weight: 400;
+  color: var(--color-text-tertiary);
+  margin-left: 4px;
+}
+
+.multi-select-trigger {
+  flex: 1;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 6px;
+  border: 1px solid var(--color-border-form);
+  padding: 0.625rem 1rem;
+  text-align: left;
+  font-size: 14px;
+  color: var(--color-text-primary);
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
+}
+
+.multi-select-trigger:not(:disabled) {
+  background: var(--color-bg-surface);
+  cursor: pointer;
+}
+
+.multi-select-trigger:not(:disabled):hover {
+  border-color: var(--color-border-form);
+}
+
+.multi-select-trigger:not(:disabled):focus {
+  outline: none;
+  border-color: var(--color-bg-act-primary);
+  box-shadow: 0 0 0 2px var(--color-bg-act-primary) 40;
+}
+
+.multi-select-trigger:disabled {
+  cursor: not-allowed;
+  background: var(--color-bg-disabled);
+}
+
+.multi-select-trigger.error:not(:disabled) {
+  border-color: var(--color-text-error-ti);
+}
+
+.multi-select-trigger.error:not(:disabled):focus {
+  border-color: var(--color-text-error-ti);
+  box-shadow: 0 0 0 2px var(--color-text-error-ti) 40;
+}
+
+.multi-select-menu {
+  position: absolute;
+  right: 0;
+  left: 0;
+  z-index: 20;
+  overflow: hidden;
+  border-radius: 6px;
+  background: var(--color-bg-surface);
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.multi-select-option {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  font-size: 14px;
+  transition: background-color 0.15s;
+  color: var(--color-text-primary);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+.multi-select-option:hover:not(.disabled) {
+  background: var(--color-bg-disabled);
+}
+
+.multi-select-option.disabled {
+  cursor: not-allowed;
+  color: var(--color-text-tertiary);
+}
+
+.multi-select-checkbox {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  border: 1px solid var(--color-border-form);
+  background: var(--color-bg-surface);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
+.multi-select-checkbox.checked {
+  border-color: var(--color-bg-act-primary);
+  background: var(--color-bg-act-primary);
+  color: white;
+}
+
+.multi-select-empty {
+  padding: 0.5rem 0.75rem;
+  font-size: 12px;
+  color: var(--color-text-tertiary);
+}
+
+.search-input {
+  width: 100%;
+  border-radius: 6px;
+  border: 1px solid var(--color-border-form);
+  background: var(--color-bg-surface);
+  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
+  font-size: 14px;
+  color: var(--color-text-primary);
+}
+
+.search-input::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+.search-input:focus {
+  outline: none;
+}
+
+.search-icon {
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  right: 0.75rem;
+  transform: translateY(-50%);
+  color: var(--color-text-tertiary);
+}
+
+.options-container {
+  max-height: 14rem;
+  overflow-y: auto;
+  padding: 0.25rem 0;
+}
+
+.error-message {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--color-text-error-ti);
+}

package/dist/components/inputs/MultiSelectInput/MultiSelectInput.d.ts

@@ -0,0 +1,20 @@
+export type SortOptionsMode = 'none' | 'a-z' | 'z-a';
+/**
+ * Options
+ * 1. Dynamic options = boolean
+ * 2. schema = example {
+ *   "label":"option1",
+ *   "value":1,
+ *   "disable":false,
+ *   "visible":true,
+ *   "default":true
+ * }
+ */
+export interface IMultiSelectOption {
+    label: string;
+    rightLabel?: string;
+    value: string | number;
+    disable?: boolean;
+    visible?: boolean;
+    default?: boolean;
+}

package/dist/components/inputs/MultiSelectInput/MultiSelectInput.js

@@ -0,0 +1 @@
+export {};