oziko-ui-kit 0.0.140 → 0.0.148

package/dist/components/atoms/inputs/minimized/multi-selection/MultiSelection.d.ts

@@ -7,5 +7,5 @@ export type TypeMultiSelectionInput = {
     value?: TypeValue;
     selectProps?: TypeSelect;
 } & TypeFluidContainer;
-declare const MultipleSelectionMinimizedInput: ({ options, value, onChange, selectProps, ...props }: TypeMultiSelectionInput) => import("react/jsx-runtime").JSX.Element;
+declare const MultipleSelectionMinimizedInput: ({ options, value, selectProps: _selectProps, onChange: _onChange, className, prefix: _prefix, root: _root, suffix: _suffix, mode: _mode, ...props }: TypeMultiSelectionInput) => import("react/jsx-runtime").JSX.Element;
 export default MultipleSelectionMinimizedInput;

package/dist/components/atoms/relation-input/RelationInput.d.ts

@@ -1,7 +1,7 @@
-import { TypeBaseInputProps } from "../base-input/BaseInput";
 import React from "react";
 import { TypeRelationSelect } from "./relation-select/RelationSelect";
 import { TypeFluidContainer } from "../fluid-container/FluidContainer";
+import { TypeBaseInputProps } from "../base-input/BaseInput";
 import { TypeLabeledValue } from "../../../index.export";
 export type RelationType = "onetoone" | "onetomany";
 export type TypeRelationInput<T = TypeLabeledValue> = {
@@ -18,5 +18,6 @@ export type TypeRelationInput<T = TypeLabeledValue> = {
     multiple?: boolean;
     externalDropdownRef?: React.RefObject<HTMLDivElement>;
 } & Omit<TypeBaseInputProps, "children">;
-declare const _default: React.MemoExoticComponent<(<T extends TypeLabeledValue>({ label, description, value, onChange, selectProps, inputContainerClassName, getOptions, loadMoreOptions, searchOptions, totalOptionsLength, multiple, externalDropdownRef, ...props }: TypeRelationInput<T>) => import("react/jsx-runtime").JSX.Element)>;
+declare const RelationInput: <T extends TypeLabeledValue>({ label, description, value, onChange, selectProps, getOptions, loadMoreOptions, searchOptions, totalOptionsLength, multiple, externalDropdownRef, disabled, errorMessage, }: TypeRelationInput<T>) => import("react/jsx-runtime").JSX.Element;
+declare const _default: typeof RelationInput;
 export default _default;

package/dist/index.css

@@ -120,6 +120,7 @@
   --font-size-sm-plus: 11.5px;
   --font-size-base: 12px;
   --font-size-base-plus: 12.5px;
+  --font-size-button: 12px;
   --font-size-md: 13px;
   --font-size-lg: 14px;
   --font-size-xl: 20px;
@@ -788,7 +789,7 @@ samp {
 .Button-module_button__tvuyP.Button-module_sChip__Ca0Mj {
   border-radius: 5px;
   padding: 4px 9px;
-  font-size: 12px;
+  font-size: var(--font-size-base-plus);
   font-weight: 500;
 }
 .Button-module_button__tvuyP.Button-module_sChip__Ca0Mj.Button-module_vOutlined__BPlxJ.Button-module_cPrimary__67oy- {
@@ -1861,7 +1862,7 @@ samp {
   inset: 0;
   width: 100vw;
   height: 100vh;
-  z-index: 1000;
+  z-index: var(--z-index-overlay, 1000);
 }
 .SelectOption-module_option__wQb8V {
   cursor: pointer;
@@ -1985,6 +1986,7 @@ samp {
 
 .Popover-module_content__TTNdo {
   position: absolute;
+  z-index: var(--z-index-overlay, 1000);
   box-shadow: var(--shadow-md);
   padding: var(--spacing-9);
   border-radius: var(--radius-md);
@@ -2816,6 +2818,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 .Modal-module_modalContainer__CnoII {
   position: fixed;
   inset: 0;
+  z-index: var(--z-index-overlay, 1000);
   width: 100% !important;
   height: 100% !important;
   padding: 24px;
@@ -5289,100 +5292,375 @@ button.font-increment {
   position: absolute;
   bottom: -7px;
 }
-.RelationInput-module_icon__folVL {
-  color: var(--color-text-primary) !important;
+.RelationInput-module_relationInput__BkCBq {
+  position: relative;
+  font-family: var(--font-sans);
+  font-size: var(--font-size-md);
+}
+.RelationInput-module_relationInput__BkCBq.RelationInput-module_disabled__rFiQj {
+  opacity: 0.5;
+  pointer-events: none;
 }
 
-.RelationInput-module_text__h8Gq5 {
-  color: var(--color-text-muted) !important;
+.RelationInput-module_fieldLabel__QHtyi {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-6);
+  margin-bottom: var(--spacing-5);
 }
 
-.RelationInput-module_select__H7bRO {
-  background: none !important;
-  padding: var(--spacing-9) 0 !important;
-  height: 100% !important;
+.RelationInput-module_fieldName__UjYlw {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-secondary);
 }
 
-.RelationInput-module_baseInput__9cDeK {
-  padding: 0 var(--spacing-12) !important;
-  justify-content: start;
+.RelationInput-module_fieldTypeBadge__nwh6H {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0.04em;
+  color: var(--color-text-muted);
+  background: var(--color-surface-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  padding: 1px var(--spacing-5);
+  font-family: var(--font-mono);
 }
-.RelationSelect-module_container__nwkcp {
-  background: var(--color-surface-2);
-  padding: var(--spacing-9) var(--spacing-12);
-  border-radius: var(--radius-md);
-  justify-content: space-between;
+
+.RelationInput-module_trigger__Ff9XC {
+  display: flex;
+  align-items: center;
+  border: 1.5px solid var(--color-border);
+  border-radius: 9px;
+  background: var(--color-surface);
   overflow: hidden;
+  transition: border-color var(--transition-border), box-shadow var(--transition-border);
   cursor: pointer;
+  min-height: 42px;
+  user-select: none;
 }
-.RelationSelect-module_container__nwkcp.RelationSelect-module_disabled__37hiQ {
-  cursor: default;
-  opacity: var(--opacity-disabled);
+.RelationInput-module_trigger__Ff9XC:hover {
+  border-color: var(--color-border-mid);
 }
-.RelationSelect-module_container__nwkcp .RelationSelect-module_displayer__-ispL {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: unset;
-  -webkit-line-clamp: 1;
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-  width: 100%;
-  max-height: 100px;
-  overflow-x: auto;
+
+.RelationInput-module_triggerOpen__JxjH4 {
+  border-color: var(--color-accent) !important;
+  box-shadow: 0 0 0 3px var(--color-accent-subtle);
+  border-radius: 9px 9px 0 0 !important;
+}
+
+.RelationInput-module_triggerError__jYs-E {
+  border-color: var(--color-red) !important;
+  box-shadow: 0 0 0 3px rgba(var(--color-red-rgb), 0.1);
+}
+
+.RelationInput-module_triggerIcon__Jw8AO {
+  width: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-accent);
+  flex-shrink: 0;
+  border-right: 1px solid var(--color-border);
+  align-self: stretch;
+}
+
+.RelationInput-module_triggerBody__FL9E9 {
+  flex: 1;
   display: flex;
+  align-items: center;
   flex-wrap: wrap;
   gap: var(--spacing-4);
-}
-.RelationSelect-module_container__nwkcp .RelationSelect-module_displayer__-ispL::-webkit-scrollbar {
-  display: none; /* Chrome, Safari, Opera*/
-}
-.RelationSelect-module_container__nwkcp .RelationSelect-module_displayerContainer__kCaoy {
+  padding: var(--spacing-6) var(--spacing-9);
   min-width: 0;
-  overflow-x: hidden;
 }
 
-.RelationSelect-module_selectDropdown__HAwgv {
-  position: fixed;
+.RelationInput-module_placeholder__-B84- {
+  font-size: var(--font-size-md);
+  color: var(--color-text-muted);
+  user-select: none;
+}
+
+.RelationInput-module_tag__i0Omb {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  background: var(--color-accent-subtle);
+  border: 1px solid var(--color-accent-subtle-2);
+  color: var(--color-accent);
   border-radius: var(--radius-md);
-  z-index: 1000;
-  height: 100%;
-  max-height: 200px;
-  overflow-y: auto;
-  box-shadow: var(--shadow-md);
+  padding: 3px var(--spacing-6) 3px var(--spacing-7);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  font-family: var(--font-mono);
+}
+
+.RelationInput-module_tagRemove__4OplZ {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  color: var(--color-accent);
+  opacity: 0.6;
+  transition: opacity var(--transition-fast);
+}
+.RelationInput-module_tagRemove__4OplZ:hover {
+  opacity: 1;
+}
+
+.RelationInput-module_modeDisplay__iStf1 {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  padding: 0 var(--spacing-9);
+  flex-shrink: 0;
+  border-left: 1px solid var(--color-border);
+  align-self: stretch;
+}
+
+.RelationInput-module_modePill__-ZPmL {
+  padding: 3px var(--spacing-7);
+  border-radius: var(--radius-md-sm);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-faint);
+  background: transparent;
+  border: 1px solid transparent;
+  font-family: inherit;
+  user-select: none;
+}
+
+.RelationInput-module_modePillActive__Rpjjo {
+  background: var(--color-surface-2);
+  color: var(--color-text-muted);
+  border-color: var(--color-border);
+}
+
+.RelationInput-module_triggerActions__aSWHa {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  padding: 0 var(--spacing-9);
+  flex-shrink: 0;
+}
+
+.RelationInput-module_clearBtn__kuiqq {
+  width: 24px;
+  height: 24px;
+  border-radius: var(--radius-md-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--color-red);
+  border: none;
+  background: transparent;
+  transition: background var(--transition-fast);
+  flex-shrink: 0;
+}
+.RelationInput-module_clearBtn__kuiqq:hover {
+  background: rgba(var(--color-red-rgb), 0.08);
+}
+
+.RelationInput-module_chevron__kbSBc {
+  color: var(--color-text-muted);
+  transition: transform 0.2s;
+  flex-shrink: 0;
+}
+
+.RelationInput-module_chevronOpen__6rvYy {
+  transform: rotate(180deg);
+}
+
+.RelationInput-module_dropdown__2Lavk {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  z-index: var(--z-index-dropdown);
   background: var(--color-surface);
-  width: 100%;
+  border: 1.5px solid var(--color-accent);
+  border-top: none;
+  border-radius: 0 0 9px 9px;
+  box-shadow: var(--shadow-md);
+  overflow: hidden;
+  animation: RelationInput-module_dropIn__hyUj4 0.14s cubic-bezier(0.16, 1, 0.3, 1);
 }
-.RelationSelect-module_selectDropdown__HAwgv > div {
-  width: 100%;
+
+@keyframes RelationInput-module_dropIn__hyUj4 {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.RelationInput-module_search__87EXl {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-7);
+  padding: var(--spacing-8) var(--spacing-10);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.RelationInput-module_searchIcon__FdWu3 {
+  color: var(--color-text-muted);
+  flex-shrink: 0;
+}
+
+.RelationInput-module_searchInput__xhP8U {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: var(--font-sans);
+  font-size: var(--font-size-md);
+  color: var(--color-text-primary);
+}
+.RelationInput-module_searchInput__xhP8U::placeholder {
+  color: var(--color-text-muted);
 }
 
-.RelationSelect-module_searchInputWrapper__2XT5T {
+.RelationInput-module_results__huI-d {
+  max-height: 220px;
+  overflow-y: auto;
+}
+.RelationInput-module_results__huI-d::-webkit-scrollbar {
+  width: 3px;
+}
+.RelationInput-module_results__huI-d::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: 2px;
+}
+
+.RelationInput-module_item__9hjjw {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-9);
+  padding: var(--spacing-9) var(--spacing-11);
+  cursor: pointer;
+  transition: background var(--transition-fast);
+  border-bottom: 1px solid var(--color-border);
+}
+.RelationInput-module_item__9hjjw:last-child {
+  border-bottom: none;
+}
+.RelationInput-module_item__9hjjw:hover {
+  background: var(--color-surface-2);
+}
+
+.RelationInput-module_itemSelected__Ug8iI {
+  background: var(--color-accent-subtle);
+}
+.RelationInput-module_itemSelected__Ug8iI .RelationInput-module_itemId__quQ14 {
+  color: var(--color-accent);
+}
+
+.RelationInput-module_itemCheck__2zQ30 {
+  width: 16px;
+  height: 16px;
+  border-radius: var(--radius-sm);
+  flex-shrink: 0;
+  border: 1.5px solid var(--color-border-mid);
+  background: var(--color-surface);
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--spacing-4);
+  transition: all var(--transition-fast);
+}
+.RelationInput-module_itemCheck__2zQ30 svg {
+  opacity: 0;
 }
 
-.RelationSelect-module_searchIcon__Wpvzz {
+.RelationInput-module_itemCheckSelected__3dnbH {
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+}
+.RelationInput-module_itemCheckSelected__3dnbH svg {
+  opacity: 1;
+}
+
+.RelationInput-module_itemBody__7R0lu {
+  flex: 1;
+  min-width: 0;
+}
+
+.RelationInput-module_itemId__quQ14 {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-base);
   color: var(--color-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.RelationSelect-module_searchInput__Aihgm {
-  border: 0;
+.RelationInput-module_empty__EdqQ- {
+  padding: 20px var(--spacing-11);
+  text-align: center;
+  font-size: var(--font-size-base-plus);
+  color: var(--color-text-muted);
+}
+
+.RelationInput-module_loading__4uzeT {
+  padding: var(--spacing-12) var(--spacing-11);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-7);
+  font-size: var(--font-size-base);
+  color: var(--color-text-muted);
+}
+
+@keyframes RelationInput-module_spin__pMDvY {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.RelationInput-module_spinner__lXuwT {
+  animation: RelationInput-module_spin__pMDvY 0.7s linear infinite;
+}
+
+.RelationInput-module_dropdownFoot__RCuVL {
+  padding: var(--spacing-7) var(--spacing-11);
+  border-top: 1px solid var(--color-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--color-surface-2);
+}
+
+.RelationInput-module_footCount__Mdu-T {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+  font-family: var(--font-mono);
+}
+.RelationInput-module_footCount__Mdu-T strong {
+  color: var(--color-accent);
+  font-weight: var(--font-weight-semibold);
 }
 
-.RelationSelect-module_deleteIcon__l6plf {
+.RelationInput-module_footClear__69I0C {
+  font-size: var(--font-size-sm-plus);
+  color: var(--color-text-muted);
+  cursor: pointer;
+  transition: color var(--transition-fast);
+}
+.RelationInput-module_footClear__69I0C:hover {
   color: var(--color-red);
 }
 
-.RelationSelect-module_infiniteScroll__UQClb {
-  overflow: hidden !important;
+.RelationInput-module_helper__n1rom {
+  margin-top: var(--spacing-3);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
 }
 
-.RelationSelect-module_deleteButton__9KhWk {
-  flex-shrink: 0;
+.RelationInput-module_helperError__E0erC {
+  color: var(--color-red);
 }
 .Boolean-module_bool__23D4m {
   display: inline-flex;
@@ -5482,19 +5760,37 @@ button.font-increment {
   font-family: var(--font-sans);
   padding: var(--spacing-9) var(--spacing-10);
   padding: 0;
+  width: 100%;
+  overflow: hidden;
 }
 .MultiSelection-module_multiSelectionContainer__tUi2u input {
   padding: 0;
 }
-.MultiSelection-module_multiSelectionContainer__tUi2u .MultiSelection-module_multiSelect__SA5u- {
-  background: transparent;
+
+.MultiSelection-module_selectedValues__oPNri {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  min-height: 34px;
+  width: 100%;
+  overflow-x: auto;
+  scrollbar-width: none;
 }
-.MultiSelection-module_multiSelectionContainer__tUi2u .MultiSelection-module_visible__q-F19 {
-  visibility: visible;
+.MultiSelection-module_selectedValues__oPNri::-webkit-scrollbar {
+  display: none;
 }
-.MultiSelection-module_multiSelectionContainer__tUi2u .MultiSelection-module_hidden__nt7o2 {
-  visibility: hidden;
-  pointer-events: none;
+
+.MultiSelection-module_selectedTag__RfYtm {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  background: var(--color-neutral-100, #f0f0f0);
+  color: var(--color-neutral-800, #333);
+  white-space: nowrap;
 }
 .NumberMinimized-module_numberMinimized__o1ZAN {
   background-color: var(--color-surface-2);
@@ -5645,6 +5941,7 @@ button.font-increment {
 
 .Drawer-module_contentContainer__Bku-Q {
   position: fixed;
+  z-index: var(--z-index-overlay, 1000);
   background-color: var(--color-surface);
   overflow: hidden;
   display: flex;

package/dist/index.export.d.ts

@@ -185,7 +185,6 @@ export { type TableHeaderCellProps } from "./components/organisms/table/Table";
 export { type TableCellProps } from "./components/organisms/table/Table";
 export { type TypeTable } from "./components/organisms/table/Table";
 export { type TypeColumn } from "./components/organisms/table/Table";
-export { type TypeColumnComponent } from "./components/organisms/table/Table";
 export { type TypeHeaderCell } from "./components/organisms/table/Table";
 export { type TypeCell } from "./components/organisms/table/Table";
 export { type NotificationPlacement, type NotificationConfig, type NotificationAPI, type NotificationProviderProps, } from "./components/organisms/notification";