@ryuzaki13/react-foundation-ui 0.1.0 → 1.0.0

package/dist/chunks/ui.module-BisoTevy.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui.module-BisoTevy.js","names":[],"sources":["../../src/ui.module.scss"],"sourcesContent":["@use \"@/styles/mixins\" as *;\r\n\r\n.uiSizable {\r\n\t--base-width: 100%;\r\n\r\n\twidth: var(--base-width);\r\n\r\n\t&.xs {\r\n\t\t--base-width: calc(var(--drp-ui-width-xs, var(--ui-width-xs)) - var(--width-add));\r\n\t}\r\n\r\n\t&.sm {\r\n\t\t--base-width: calc(var(--drp-ui-width-sm, var(--ui-width-sm)) - var(--width-add));\r\n\t}\r\n\r\n\t&.md {\r\n\t\t--base-width: calc(var(--drp-ui-width-md, var(--ui-width-md)) - var(--width-add));\r\n\t}\r\n\r\n\t&.lg {\r\n\t\t--base-width: calc(var(--drp-ui-width-lg, var(--ui-width-lg)) - var(--width-add));\r\n\t}\r\n\r\n\t&.xl {\r\n\t\t--base-width: calc(var(--drp-ui-width-xl, var(--ui-width-xl)) - var(--width-add));\r\n\t}\r\n}\r\n\r\n// TODO: Тестовый класс\r\n.uiErrorElement {\r\n\t--grid-size: var(--space-sm);\r\n\t--grid-line-size: var(--border-width);\r\n\t--grid-line-color: var(--status-error-soft);\r\n\r\n\theight: var(--control-height);\r\n\twidth: 100%; // calc(10em - var(--width-add));\r\n\tflex-shrink: 0;\r\n\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\r\n\tborder: var(--focus-width) solid var(--status-error-border);\r\n\tborder-radius: var(--radius-sm);\r\n\toutline: none;\r\n\r\n\tfont-weight: 700;\r\n\tfont-variation-settings: \"wght\" 700;\r\n\r\n\tcolor: var(--status-error-text);\r\n\tbackground-color: var(--surface-0);\r\n\tbackground-image:\r\n\t\trepeating-linear-gradient(\r\n\t\t\t45deg,\r\n\t\t\tvar(--grid-line-color) 0 var(--grid-line-size),\r\n\t\t\ttransparent var(--grid-line-size) var(--grid-size)\r\n\t\t),\r\n\t\trepeating-linear-gradient(\r\n\t\t\t-45deg,\r\n\t\t\tvar(--grid-line-color) 0 var(--grid-line-size),\r\n\t\t\ttransparent var(--grid-line-size) var(--grid-size)\r\n\t\t);\r\n}\r\n\r\n.uiContainer {\r\n\tposition: relative;\r\n\twidth: 100%;\r\n}\r\n\r\n.uiInputContainer {\r\n\t@extend .uiContainer;\r\n\r\n\t--padding-right: var(--control-height);\r\n}\r\n\r\n.uiLabelBase {\r\n\tdisplay: inline-block;\r\n\tfont-weight: 400;\r\n\tfont-variation-settings: \"wght\" 400;\r\n\r\n\t&:has(~ :required) {\r\n\t\t&::after {\r\n\t\t\tcontent: \" *\";\r\n\t\t\tcolor: var(--status-error-text);\r\n\t\t}\r\n\t}\r\n}\r\n\r\n.uiLabel {\r\n\t@extend .uiLabelBase;\r\n\r\n\tmargin-block: var(--space-xs);\r\n}\r\n\r\n.uiDescription {\r\n\t--paragraph-margin: 0;\r\n\r\n\tpadding-bottom: var(--space-xs);\r\n\tcolor: var(--content-2);\r\n\tfont-weight: 300;\r\n\tfont-variation-settings: \"wght\" 300;\r\n}\r\n\r\n.uiLabel,\r\n.uiDescription {\r\n\tmargin-inline: var(--space-xs);\r\n\t// user-select: none;\r\n}\r\n\r\n.uiPlaceholder {\r\n\tcolor: var(--content-2);\r\n\r\n\toverflow: hidden;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n}\r\n\r\n.uiControl {\r\n\t@include ui-tone(\"neutral\");\r\n\t@include ui-appearance-outline;\r\n\t@include ui-control-base;\r\n\r\n\t--ui-radius: var(--radius-sm);\r\n\r\n\t&.invalid,\r\n\t&:invalid {\r\n\t\t@include ui-tone(\"error\");\r\n\t\t@include ui-appearance-outline;\r\n\t}\r\n\r\n\t&::placeholder {\r\n\t\t@extend .uiPlaceholder;\r\n\t}\r\n}\r\n\r\n.uiToneNeutral {\r\n\t@include ui-tone(\"neutral\");\r\n}\r\n\r\n.uiToneError {\r\n\t@include ui-tone(\"error\");\r\n}\r\n\r\n.uiToneWarning {\r\n\t@include ui-tone(\"warning\");\r\n}\r\n\r\n.uiToneSuccess {\r\n\t@include ui-tone(\"success\");\r\n}\r\n\r\n.uiToneInfo {\r\n\t@include ui-tone(\"info\");\r\n}\r\n\r\n.uiAppearanceSolid {\r\n\t@include ui-appearance-solid;\r\n}\r\n\r\n.uiAppearanceOutline {\r\n\t@include ui-appearance-outline;\r\n}\r\n\r\n.uiAppearanceGhost {\r\n\t@include ui-appearance-ghost;\r\n}\r\n\r\n.uiAppearanceTransparent {\r\n\t@include ui-appearance-transparent;\r\n}\r\n\r\n.uiInputControl {\r\n\t@extend .uiControl;\r\n\r\n\theight: var(--control-height);\r\n}\r\n\r\n.uiInputWithToggle {\r\n\t@extend .uiInputControl;\r\n\r\n\tcolor: var(--content-0);\r\n\r\n\tpadding: 0 var(--padding-right) 0 var(--space-sm);\r\n\twidth: 100%;\r\n\ttext-align: left;\r\n\r\n\t// &[type=\"button\"] {\r\n\t// \twhite-space: nowrap;\r\n\t// }\r\n}\r\n\r\n.uiSelectionControl {\r\n\t// @extend .uiControl;\r\n\t@include ui-control-base;\r\n\r\n\t--ui-color: var(--content-0);\r\n\t--ui-color-hover: var(--content-0);\r\n\t--ui-color-active: var(--content-0);\r\n\t--ui-background: var(--surface-0);\r\n\t--ui-background-hover: var(--ui-tone-soft);\r\n\t--ui-background-active: var(--ui-tone-soft);\r\n\t--ui-border-color: var(--ui-tone-border);\r\n\t--ui-border-hover: var(--ui-tone-border-hover);\r\n\t--ui-border-active: var(--ui-tone-border-active);\r\n\t--ui-border-focus: var(--ui-tone-border-focus);\r\n\r\n\tappearance: none;\r\n\tmargin: 0;\r\n\tcursor: pointer;\r\n\r\n\t&:checked {\r\n\t\t& + .uiSelectionIcon {\r\n\t\t\tcolor: var(--ui-tone-fill);\r\n\t\t}\r\n\t}\r\n\r\n\t&:disabled {\r\n\t\tcursor: default;\r\n\r\n\t\t--ui-border-color: var(--border-0);\r\n\r\n\t\t&:checked {\r\n\t\t\t& + .uiSelectionIcon {\r\n\t\t\t\tcolor: var(--border-0);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n.uiSelectionIcon {\r\n\tdisplay: inline-flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tposition: absolute;\r\n\ttop: 50%;\r\n\tleft: 50%;\r\n\ttransform: translate(-50%, -50%);\r\n\tpointer-events: none;\r\n\tcolor: transparent;\r\n\ttransition:\r\n\t\tcolor var(--transition-fast) ease,\r\n\t\topacity var(--transition-fast) ease;\r\n}\r\n\r\n.uiElement,\r\n.uiSelectOption,\r\n.uiPopupOption {\r\n\t&.disabled,\r\n\t&:disabled {\r\n\t\tcursor: default;\r\n\t\tpointer-events: none;\r\n\t\tuser-select: none;\r\n\r\n\t\t.uiLabel,\r\n\t\t.uiDescription {\r\n\t\t\tcolor: var(--content-2);\r\n\t\t}\r\n\r\n\t\t.uiPlaceholder,\r\n\t\t.uiOptionText,\r\n\t\t.uiOptionCode {\r\n\t\t\topacity: 0.25;\r\n\t\t}\r\n\t}\r\n}\r\n\r\n.uiPanel {\r\n\tbackground-color: var(--ui-panel-background, var(--surface-0));\r\n\tcolor: var(--content-0);\r\n\tborder: var(--border);\r\n\tborder-radius: var(--radius-sm);\r\n\tpadding: var(--space-sm);\r\n}\r\n\r\n.uiPopupOptions {\r\n\t@extend .uiPanel;\r\n\r\n\tbackground-color: var(--surface-0);\r\n\r\n\t--anchor-gap: var(--space-xs);\r\n\t--anchor-padding: var(--space-xs);\r\n\t--anchor-offset: 0;\r\n\t--input-width: min(100vw, var(--base-width, 15em));\r\n\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\r\n\tmin-width: var(--input-width);\r\n\ttransform-origin: top;\r\n\tbox-shadow: var(--shadow-md);\r\n\tz-index: var(--z-dropdown);\r\n\r\n\t&:empty {\r\n\t\tvisibility: hidden;\r\n\t}\r\n}\r\n\r\n.uiStateFocus {\r\n\t@include focusVisible;\r\n\r\n\tbackground-color: var(--surface-1);\r\n\tborder-color: var(--border-1);\r\n\tcursor: pointer;\r\n}\r\n\r\n.uiOptionBase {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: flex-start;\r\n\tgap: var(--space-sm);\r\n\theight: 100%;\r\n\twidth: 100%;\r\n\ttext-align: left;\r\n}\r\n\r\n.uiPopupOption {\r\n\t@extend .uiOptionBase;\r\n\r\n\theight: auto;\r\n\tpadding: var(--space-xs) var(--space-sm);\r\n}\r\n\r\n.uiSelectOption,\r\n.uiPopupOption {\r\n\tborder-radius: var(--radius-sm);\r\n\tborder: none;\r\n\tbackground-color: transparent;\r\n\tcolor: var(--content-0);\r\n\r\n\ttransition:\r\n\t\tbackground-color var(--transition-fast) ease,\r\n\t\tcolor var(--transition-fast) ease;\r\n\r\n\t.uiMenuOptionIcon,\r\n\t.uiPopupOptionIcon {\r\n\t\tflex-shrink: 0;\r\n\t\twidth: var(--space-md);\r\n\t\theight: var(--space-md);\r\n\t}\r\n\r\n\t.uiMenuOptionIcon,\r\n\t.keyboard {\r\n\t\tcolor: var(--content-2);\r\n\t}\r\n\r\n\t&.selected {\r\n\t\tcolor: var(--content-accent);\r\n\t\tcursor: default;\r\n\t}\r\n\r\n\t&.uiPopupOptionActive {\r\n\t\tbackground-color: var(--surface-1);\r\n\t}\r\n\r\n\t&:focus {\r\n\t\t@extend .uiStateFocus;\r\n\t}\r\n\r\n\t@include hover(true) {\r\n\t\tbackground-color: var(--surface-accent);\r\n\t\tcursor: pointer;\r\n\t}\r\n}\r\n\r\n.uiPopupOptionSeparator {\r\n\tborder-top: var(--border);\r\n\tmargin-block: var(--space-xs);\r\n}\r\n\r\n.uiPopupGroupLabel {\r\n\tpadding: var(--space-xs) var(--space-sm);\r\n\tcolor: var(--content-2);\r\n\tfont-weight: 300;\r\n\ttext-transform: uppercase;\r\n\t// font-size: var(--font-size-sm);\r\n}\r\n\r\n.uiMenuOptionIcon {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n\r\n.uiSelectOption {\r\n\tdisplay: grid;\r\n\tgrid-template-columns: auto 1fr;\r\n\tgap: var(--space-xs);\r\n\r\n\tpadding-right: var(--space-xs);\r\n}\r\n\r\n.uiOptionText {\r\n\t// font-size: var(--font-size-sm);\r\n\tflex: 1;\r\n\t// .flexEllipsis\r\n}\r\n\r\n.uiOptionCode {\r\n\tfont-family: var(--font-family-mono);\r\n\t// font-size: var(--font-size-sm);\r\n\tcolor: var(--content-1);\r\n\tfont-variation-settings: \"wght\" 300;\r\n}\r\n\r\n.uiToggleButtonContainer {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: flex-end;\r\n\theight: 100%;\r\n\twidth: 100%;\r\n\r\n\ttransition-property: width;\r\n\ttransition-duration: var(--transition-fast);\r\n\ttransition-timing-function: cubic-bezier(1, 0, 0.5, 0.5);\r\n\r\n\t> button {\r\n\t\tbackground: transparent;\r\n\t\tborder: none;\r\n\t\tcursor: pointer;\r\n\t\tdisplay: flex;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t\theight: var(--control-height);\r\n\t\twidth: var(--control-height);\r\n\t\tborder-radius: var(--radius-sm);\r\n\t\tflex: 0 0 var(--control-height);\r\n\t}\r\n\r\n\t// &[data-disabled] {\r\n\t// \tcursor: default;\r\n\t// \tpointer-events: none;\r\n\t// \topacity: var(--disabled-opacity);\r\n\t// }\r\n}\r\n\r\n.uiToggleButton {\r\n\tcolor: var(--content-0);\r\n}\r\n\r\n.uiToggleIcon {\r\n\ttransition: transform var(--transition-fast) ease-in-out;\r\n\r\n\t&.uiToggleIconOpen {\r\n\t\ttransform: rotate(180deg);\r\n\t}\r\n}\r\n\r\n@include mobile {\r\n\t.uiPopupOptions {\r\n\t\t--input-width: calc(100dvw - var(--space-xl));\r\n\t}\r\n}\r\n\r\n// TODO: пока в свалку стили для дата-подобных компонентов\r\n\r\n// Для компонентов, который не являются input, но выставляют себя за него\r\n.uiInputControlFake {\r\n\t@extend .uiInputControl;\r\n\r\n\twidth: 100%;\r\n\tpadding: 0 var(--space-sm);\r\n\tfont-size: var(--font-size-md);\r\n\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\r\n\tcursor: text;\r\n}\r\n\r\n.uiClearButton {\r\n\tcolor: var(--status-error-text);\r\n\r\n\t&:disabled {\r\n\t\topacity: 0;\r\n\t\tpointer-events: none;\r\n\t\twidth: 0;\r\n\t\theight: 0;\r\n\t\tpadding: 0;\r\n\t\tmargin: 0;\r\n\t\toverflow: hidden;\r\n\t}\r\n}\r\n\r\n.uiButtonSeparator {\r\n\tborder-left: var(--border);\r\n\theight: calc(100% - var(--space-sm));\r\n}\r\n"],"mappings":""}
+{"version":3,"file":"ui.module-BisoTevy.js","names":[],"sources":["../../src/ui.module.scss"],"sourcesContent":["@use \"@/styles/mixins\" as *;\n\n.uiSizable {\n\t--base-width: 100%;\n\n\twidth: var(--base-width);\n\n\t&.xs {\n\t\t--base-width: calc(var(--drp-ui-width-xs, var(--ui-width-xs)) - var(--width-add));\n\t}\n\n\t&.sm {\n\t\t--base-width: calc(var(--drp-ui-width-sm, var(--ui-width-sm)) - var(--width-add));\n\t}\n\n\t&.md {\n\t\t--base-width: calc(var(--drp-ui-width-md, var(--ui-width-md)) - var(--width-add));\n\t}\n\n\t&.lg {\n\t\t--base-width: calc(var(--drp-ui-width-lg, var(--ui-width-lg)) - var(--width-add));\n\t}\n\n\t&.xl {\n\t\t--base-width: calc(var(--drp-ui-width-xl, var(--ui-width-xl)) - var(--width-add));\n\t}\n}\n\n// TODO: Тестовый класс\n.uiErrorElement {\n\t--grid-size: var(--space-sm);\n\t--grid-line-size: var(--border-width);\n\t--grid-line-color: var(--status-error-soft);\n\n\theight: var(--control-height);\n\twidth: 100%; // calc(10em - var(--width-add));\n\tflex-shrink: 0;\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\n\tborder: var(--focus-width) solid var(--status-error-border);\n\tborder-radius: var(--radius-sm);\n\toutline: none;\n\n\tfont-weight: 700;\n\tfont-variation-settings: \"wght\" 700;\n\n\tcolor: var(--status-error-text);\n\tbackground-color: var(--surface-0);\n\tbackground-image:\n\t\trepeating-linear-gradient(\n\t\t\t45deg,\n\t\t\tvar(--grid-line-color) 0 var(--grid-line-size),\n\t\t\ttransparent var(--grid-line-size) var(--grid-size)\n\t\t),\n\t\trepeating-linear-gradient(\n\t\t\t-45deg,\n\t\t\tvar(--grid-line-color) 0 var(--grid-line-size),\n\t\t\ttransparent var(--grid-line-size) var(--grid-size)\n\t\t);\n}\n\n.uiContainer {\n\tposition: relative;\n\twidth: 100%;\n}\n\n.uiInputContainer {\n\t@extend .uiContainer;\n\n\t--padding-right: var(--control-height);\n}\n\n.uiLabelBase {\n\tdisplay: inline-block;\n\tfont-weight: 400;\n\tfont-variation-settings: \"wght\" 400;\n\n\t&:has(~ :required) {\n\t\t&::after {\n\t\t\tcontent: \" *\";\n\t\t\tcolor: var(--status-error-text);\n\t\t}\n\t}\n}\n\n.uiLabel {\n\t@extend .uiLabelBase;\n\n\tmargin-block: var(--space-xs);\n}\n\n.uiDescription {\n\t--paragraph-margin: 0;\n\n\tpadding-bottom: var(--space-xs);\n\tcolor: var(--content-2);\n\tfont-weight: 300;\n\tfont-variation-settings: \"wght\" 300;\n}\n\n.uiLabel,\n.uiDescription {\n\tmargin-inline: var(--space-xs);\n\t// user-select: none;\n}\n\n.uiPlaceholder {\n\tcolor: var(--content-2);\n\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.uiControl {\n\t@include ui-tone(\"neutral\");\n\t@include ui-appearance-outline;\n\t@include ui-control-base;\n\n\t--ui-radius: var(--radius-sm);\n\n\t&.invalid,\n\t&:invalid {\n\t\t@include ui-tone(\"error\");\n\t\t@include ui-appearance-outline;\n\t}\n\n\t&::placeholder {\n\t\t@extend .uiPlaceholder;\n\t}\n}\n\n.uiToneNeutral {\n\t@include ui-tone(\"neutral\");\n}\n\n.uiToneError {\n\t@include ui-tone(\"error\");\n}\n\n.uiToneWarning {\n\t@include ui-tone(\"warning\");\n}\n\n.uiToneSuccess {\n\t@include ui-tone(\"success\");\n}\n\n.uiToneInfo {\n\t@include ui-tone(\"info\");\n}\n\n.uiAppearanceSolid {\n\t@include ui-appearance-solid;\n}\n\n.uiAppearanceOutline {\n\t@include ui-appearance-outline;\n}\n\n.uiAppearanceGhost {\n\t@include ui-appearance-ghost;\n}\n\n.uiAppearanceTransparent {\n\t@include ui-appearance-transparent;\n}\n\n.uiInputControl {\n\t@extend .uiControl;\n\n\theight: var(--control-height);\n}\n\n.uiInputWithToggle {\n\t@extend .uiInputControl;\n\n\tcolor: var(--content-0);\n\n\tpadding: 0 var(--padding-right) 0 var(--space-sm);\n\twidth: 100%;\n\ttext-align: left;\n\n\t// &[type=\"button\"] {\n\t// \twhite-space: nowrap;\n\t// }\n}\n\n.uiSelectionControl {\n\t// @extend .uiControl;\n\t@include ui-control-base;\n\n\t--ui-color: var(--content-0);\n\t--ui-color-hover: var(--content-0);\n\t--ui-color-active: var(--content-0);\n\t--ui-background: var(--surface-0);\n\t--ui-background-hover: var(--ui-tone-soft);\n\t--ui-background-active: var(--ui-tone-soft);\n\t--ui-border-color: var(--ui-tone-border);\n\t--ui-border-hover: var(--ui-tone-border-hover);\n\t--ui-border-active: var(--ui-tone-border-active);\n\t--ui-border-focus: var(--ui-tone-border-focus);\n\n\tappearance: none;\n\tmargin: 0;\n\tcursor: pointer;\n\n\t&:checked {\n\t\t& + .uiSelectionIcon {\n\t\t\tcolor: var(--ui-tone-fill);\n\t\t}\n\t}\n\n\t&:disabled {\n\t\tcursor: default;\n\n\t\t--ui-border-color: var(--border-0);\n\n\t\t&:checked {\n\t\t\t& + .uiSelectionIcon {\n\t\t\t\tcolor: var(--border-0);\n\t\t\t}\n\t\t}\n\t}\n}\n\n.uiSelectionIcon {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translate(-50%, -50%);\n\tpointer-events: none;\n\tcolor: transparent;\n\ttransition:\n\t\tcolor var(--transition-fast) ease,\n\t\topacity var(--transition-fast) ease;\n}\n\n.uiElement,\n.uiSelectOption,\n.uiPopupOption {\n\t&.disabled,\n\t&:disabled {\n\t\tcursor: default;\n\t\tpointer-events: none;\n\t\tuser-select: none;\n\n\t\t.uiLabel,\n\t\t.uiDescription {\n\t\t\tcolor: var(--content-2);\n\t\t}\n\n\t\t.uiPlaceholder,\n\t\t.uiOptionText,\n\t\t.uiOptionCode {\n\t\t\topacity: 0.25;\n\t\t}\n\t}\n}\n\n.uiPanel {\n\tbackground-color: var(--ui-panel-background, var(--surface-0));\n\tcolor: var(--content-0);\n\tborder: var(--border);\n\tborder-radius: var(--radius-sm);\n\tpadding: var(--space-sm);\n}\n\n.uiPopupOptions {\n\t@extend .uiPanel;\n\n\tbackground-color: var(--surface-0);\n\n\t--anchor-gap: var(--space-xs);\n\t--anchor-padding: var(--space-xs);\n\t--anchor-offset: 0;\n\t--input-width: min(100vw, var(--base-width, 15em));\n\n\tdisplay: flex;\n\tflex-direction: column;\n\n\tmin-width: var(--input-width);\n\ttransform-origin: top;\n\tbox-shadow: var(--shadow-md);\n\tz-index: var(--z-dropdown);\n\n\t&:empty {\n\t\tvisibility: hidden;\n\t}\n}\n\n.uiStateFocus {\n\t@include focusVisible;\n\n\tbackground-color: var(--surface-1);\n\tborder-color: var(--border-1);\n\tcursor: pointer;\n}\n\n.uiOptionBase {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-start;\n\tgap: var(--space-sm);\n\theight: 100%;\n\twidth: 100%;\n\ttext-align: left;\n}\n\n.uiPopupOption {\n\t@extend .uiOptionBase;\n\n\theight: auto;\n\tpadding: var(--space-xs) var(--space-sm);\n}\n\n.uiSelectOption,\n.uiPopupOption {\n\tborder-radius: var(--radius-sm);\n\tborder: none;\n\tbackground-color: transparent;\n\tcolor: var(--content-0);\n\n\ttransition:\n\t\tbackground-color var(--transition-fast) ease,\n\t\tcolor var(--transition-fast) ease;\n\n\t.uiMenuOptionIcon,\n\t.uiPopupOptionIcon {\n\t\tflex-shrink: 0;\n\t\twidth: var(--space-md);\n\t\theight: var(--space-md);\n\t}\n\n\t.uiMenuOptionIcon,\n\t.keyboard {\n\t\tcolor: var(--content-2);\n\t}\n\n\t&.selected {\n\t\tcolor: var(--content-accent);\n\t\tcursor: default;\n\t}\n\n\t&.uiPopupOptionActive {\n\t\tbackground-color: var(--surface-1);\n\t}\n\n\t&:focus {\n\t\t@extend .uiStateFocus;\n\t}\n\n\t@include hover(true) {\n\t\tbackground-color: var(--surface-accent);\n\t\tcursor: pointer;\n\t}\n}\n\n.uiPopupOptionSeparator {\n\tborder-top: var(--border);\n\tmargin-block: var(--space-xs);\n}\n\n.uiPopupGroupLabel {\n\tpadding: var(--space-xs) var(--space-sm);\n\tcolor: var(--content-2);\n\tfont-weight: 300;\n\ttext-transform: uppercase;\n\t// font-size: var(--font-size-sm);\n}\n\n.uiMenuOptionIcon {\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.uiSelectOption {\n\tdisplay: grid;\n\tgrid-template-columns: auto 1fr;\n\tgap: var(--space-xs);\n\n\tpadding-right: var(--space-xs);\n}\n\n.uiOptionText {\n\t// font-size: var(--font-size-sm);\n\tflex: 1;\n\t// .flexEllipsis\n}\n\n.uiOptionCode {\n\tfont-family: var(--font-family-mono);\n\t// font-size: var(--font-size-sm);\n\tcolor: var(--content-1);\n\tfont-variation-settings: \"wght\" 300;\n}\n\n.uiToggleButtonContainer {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-end;\n\theight: 100%;\n\twidth: 100%;\n\n\ttransition-property: width;\n\ttransition-duration: var(--transition-fast);\n\ttransition-timing-function: cubic-bezier(1, 0, 0.5, 0.5);\n\n\t> button {\n\t\tbackground: transparent;\n\t\tborder: none;\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\theight: var(--control-height);\n\t\twidth: var(--control-height);\n\t\tborder-radius: var(--radius-sm);\n\t\tflex: 0 0 var(--control-height);\n\t}\n\n\t// &[data-disabled] {\n\t// \tcursor: default;\n\t// \tpointer-events: none;\n\t// \topacity: var(--disabled-opacity);\n\t// }\n}\n\n.uiToggleButton {\n\tcolor: var(--content-0);\n}\n\n.uiToggleIcon {\n\ttransition: transform var(--transition-fast) ease-in-out;\n\n\t&.uiToggleIconOpen {\n\t\ttransform: rotate(180deg);\n\t}\n}\n\n@include mobile {\n\t.uiPopupOptions {\n\t\t--input-width: calc(100dvw - var(--space-xl));\n\t}\n}\n\n// TODO: пока в свалку стили для дата-подобных компонентов\n\n// Для компонентов, который не являются input, но выставляют себя за него\n.uiInputControlFake {\n\t@extend .uiInputControl;\n\n\twidth: 100%;\n\tpadding: 0 var(--space-sm);\n\tfont-size: var(--font-size-md);\n\n\tdisplay: flex;\n\talign-items: center;\n\n\tcursor: text;\n}\n\n.uiClearButton {\n\tcolor: var(--status-error-text);\n\n\t&:disabled {\n\t\topacity: 0;\n\t\tpointer-events: none;\n\t\twidth: 0;\n\t\theight: 0;\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\toverflow: hidden;\n\t}\n}\n\n.uiButtonSeparator {\n\tborder-left: var(--border);\n\theight: calc(100% - var(--space-sm));\n}\n"],"mappings":""}

package/dist/select/stories/odataStoryCollection.d.ts

@@ -0,0 +1,2 @@
+export declare const mockCollectionItems: Array<Record<string, string>>;
+//# sourceMappingURL=odataStoryCollection.d.ts.map

package/dist/select/stories/odataStoryCollection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"odataStoryCollection.d.ts","sourceRoot":"","sources":["../../../src/select/stories/odataStoryCollection.ts"],"names":[],"mappings":"AA2HA,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAe7D,CAAC"}

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 export type UiSize = "xs" | "sm" | "md" | "lg" | "xl";
 export type ChangeHandler<T> = (value: T) => void;
 export type UiBaseProps<C, V = C> = {

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtD,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;AAElD,MAAM,MAAM,WAAW,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAE1E,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAC;AAEzE,MAAM,MAAM,SAAS,GAClB,aAAa,GACb,OAAO,GACP,SAAS,GACT,OAAO,GACP,SAAS,GACT,SAAS,GACT,MAAM,GACN,gBAAgB,GAChB,cAAc,GACd,gBAAgB,GAChB,gBAAgB,GAChB,aAAa,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtD,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;AAElD,MAAM,MAAM,WAAW,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAE1E,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAC;AAEzE,MAAM,MAAM,SAAS,GAClB,aAAa,GACb,OAAO,GACP,SAAS,GACT,OAAO,GACP,SAAS,GACT,SAAS,GACT,MAAM,GACN,gBAAgB,GAChB,cAAc,GACd,gBAAgB,GAChB,gBAAgB,GAChB,aAAa,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ryuzaki13/react-foundation-ui",
-	"version": "0.1.0",
+	"version": "1.0.0",
 	"description": "Reusable React foundation UI primitives and Storybook stories.",
 	"license": "MIT",
 	"author": "Ryuzaki13",
@@ -57,6 +57,10 @@
 			"sass": "./styles/themes.scss",
 			"default": "./styles/themes.scss"
 		},
+		"./types": {
+			"types": "./dist/types.d.ts",
+			"import": "./dist/types.js"
+		},
 		"./badge": {
 			"types": "./dist/badge/index.d.ts",
 			"import": "./dist/badge/index.js"
@@ -497,6 +501,9 @@
 	},
 	"typesVersions": {
 		"*": {
+			"types": [
+				"dist/types.d.ts"
+			],
 			"badge": [
 				"dist/badge/index.d.ts"
 			],
@@ -932,13 +939,13 @@
 			"optional": true
 		},
 		"@tanstack/react-router": {
-			"optional": "true"
+			"optional": true
 		},
 		"storybook": {
-			"optional": "true"
+			"optional": true
 		},
 		"@storybook/react-vite": {
-			"optional": "true"
+			"optional": true
 		}
 	},
 	"devDependencies": {