@rivtn/noseur 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Rivtn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,2 @@
+# noseur
+Eccentric, managed and configurable react components by Rivtn

package/dist/esm/Template.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { ComponentBaseProps } from "./core/ComponentBaseProps";
+export interface TemplateManageRef {
+}
+export interface TemplateProps extends ComponentBaseProps<HTMLDivElement, TemplateManageRef> {
+}
+export declare const Template: ({ ref, ...props }: Partial<TemplateProps>) => React.JSX.Element;

package/dist/esm/Template.js

@@ -0,0 +1,13 @@
+import React from "react";
+class TemplateComponent extends React.Component {
+    static defaultProps = {};
+    state = {};
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (React.createElement("div", null, "Template"));
+    }
+    ;
+}
+export const Template = ({ ref, ...props }) => (React.createElement(TemplateComponent, { ...props, forwardRef: ref }));

package/dist/esm/compose/Composed.css

@@ -0,0 +1,437 @@
+/* Form Control */
+.noseur-fctrl {
+  margin: 0px;
+  display: flex;
+  width: fit-content;
+  align-items: stretch;
+  flex-direction: column;
+}
+
+.noseur-fctrl > .noseur-fctrl-l {
+  margin-bottom: 5px;
+}
+
+.noseur-fctrl > .noseur-fctrl-il,
+.noseur-fctrl > .noseur-fctrl-hl {
+  margin-top: 5px;
+  font-size: 13px;
+}
+
+.noseur-fctrl-c {
+  margin: 0px;
+  width: 100%;
+  display: flex;
+  outline: none;
+  position: relative;
+  border-radius: 6px;
+  align-items: center;
+  box-sizing: border-box;
+  border: 1px solid #dfdfdf;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+
+.noseur-fctrl-lc,
+.noseur-fctrl-rc,
+.noseur-fctrl-coc {
+  top: 0px;
+  margin: 0px;
+  height: 100%;
+  display: flex;
+  min-width: 40px;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.noseur-fctrl-coc {
+  position: absolute;
+}
+
+.noseur-fctrl-lc {
+  top: 0px;
+  left: 0px;
+}
+
+.noseur-fctrl-rc {
+  right: 0px;
+}
+
+.noseur-fctrl-coc {
+  left: 10px;
+}
+
+.noseur-fctrl-cc {
+  flex: 1;
+}
+
+input.noseur-fctrl-cc {
+  width: 0px;
+}
+
+/* ComposedPassword */
+.noseur-composed-password {
+  display: flex;
+  flex-direction: column;
+}
+
+.noseur-composed-password > .noseur-fctrl {
+  width: 100%;
+}
+
+.noseur-composed-password > .noseur-progress-bar {
+  height: 5px;
+  margin-top: 5px;
+}
+
+/* Alert */
+.noseur-alert {
+  max-width: 90%;
+  width: max-content !important;
+}
+
+.noseur-popover.noseur-alert {
+  padding: 1rem;
+  background-color: white;
+}
+
+.noseur-popover.noseur-alert,
+.noseur-alert > .noseur-dialog-content {
+  border-radius: 4px;
+}
+
+.noseur-alert > .noseur-dialog-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.noseur-popover.noseur-alert > .noseur-alert-content,
+.noseur-alert > .noseur-dialog-content > .noseur-alert-content {
+  flex: 1;
+  display: flex;
+}
+
+.noseur-popover.noseur-alert > .noseur-alert-footer,
+.noseur-alert > .noseur-dialog-content > .noseur-alert-footer {
+  display: flex;
+  padding-top: 1rem;
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+
+.noseur-alert-footer-left {
+  align-items: flex-start !important;
+  justify-content: flex-start !important;
+}
+
+.noseur-alert-footer-center {
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+.noseur-alert-footer > * {
+  margin-left: 1rem;
+  margin-right: 0rem;
+}
+
+.noseur-alert-footer-left > * {
+  margin-left: 0px;
+  margin-right: 1rem;
+}
+
+.noseur-alert-footer-center > * {
+  margin-left: 0px;
+  margin-right: 1rem;
+}
+
+.noseur-alert-footer-center > *:last-child {
+  margin-right: 0px;
+}
+
+.noseur-popover.noseur-alert > .noseur-alert-content > .noseur-dialog-content-icon,
+.noseur-alert > .noseur-dialog-content > .noseur-alert-content > .noseur-dialog-content-icon {
+  margin: 0px 1rem 1rem 0px;
+  font-size: 3em;
+}
+
+.noseur-popover.noseur-alert.noseur-alert-loading > .noseur-alert-content > .noseur-dialog-content-icon,
+.noseur-alert.noseur-alert-loading > .noseur-dialog-content > .noseur-alert-content > .noseur-dialog-content-icon {
+  margin: 0px;
+}
+
+/* Date Time Picker */
+.noseur-date-time-picker,
+.noseur-date-time-picker-column,
+.noseur-date-time-picker-header,
+.noseur-date-time-picker-footer,
+.noseur-date-time-picker-weekdays,
+.noseur-date-time-picker-top-panel,
+.noseur-date-time-picker-layout-row,
+.noseur-date-time-picker-left-panel,
+.noseur-date-time-picker-right-panel,
+.noseur-date-time-picker-bottom-panel,
+.noseur-date-time-picker-layout-column,
+.noseur-date-time-picker-year-mode-header,
+.noseur-date-time-picker-year-mode-footer,
+.noseur-date-time-picker-month-mode-header,
+.noseur-date-time-picker-month-mode-footer {
+  display: flex;
+}
+
+.noseur-date-time-picker,
+.noseur-date-time-picker-column,
+.noseur-date-time-picker-layout-column {
+  width: fit-content;
+  flex-direction: column;
+}
+
+.noseur-date-time-picker-modal,
+.noseur-date-time-picker-inline,
+.noseur-date-time-picker-popover {
+  padding: 15px;
+  border-radius: 7px;
+  border: 1px solid var(--noseurSchemeDataBorderColor, rgb(145, 144, 144));
+}
+
+.noseur-date-time-picker-modal {
+  width: 100% !important;
+  padding: 0px !important;
+}
+
+.noseur-date-time-picker-modal .noseur-date-time-picker-layout-column {
+  flex: 1;
+}
+
+.noseur-date-time-picker-popover {
+  background: var(--containerBackground, white);
+}
+
+.noseur-date-time-picker-time-only {
+  padding: 0px 7px;
+  --componentMarginTopOrBottom: 0px !important;
+}
+
+.noseur-date-time-picker-top-panel,
+.noseur-date-time-picker-bottom-panel {
+  flex: 1;
+}
+
+.noseur-date-time-picker-time-only > div > div > .noseur-date-time-picker-time {
+  margin: 0px;
+}
+
+.noseur-date-time-picker-popover {
+  margin: 15px;
+}
+
+.noseur-date-time-picker-seperator {
+  flex: 1;
+}
+
+.noseur-date-time-picker-header,
+.noseur-date-time-picker-footer,
+.noseur-date-time-picker-year-mode-header,
+.noseur-date-time-picker-year-mode-footer,
+.noseur-date-time-picker-month-mode-header,
+.noseur-date-time-picker-month-mode-footer {
+  width: auto;
+  flex-grow: 1;
+  align-items: center;
+}
+
+.noseur-date-time-picker-header,
+.noseur-date-time-picker-year-mode-header,
+.noseur-date-time-picker-month-mode-header {
+  margin-bottom: 15px;
+}
+
+.noseur-date-time-picker-footer,
+.noseur-date-time-picker-year-mode-footer,
+.noseur-date-time-picker-month-mode-footer {
+  margin-top: 15px;
+}
+
+.noseur-date-time-picker-header > span,
+.noseur-date-time-picker-footer > span,
+.noseur-date-time-picker-year-mode-header > span,
+.noseur-date-time-picker-year-mode-footer > span,
+.noseur-date-time-picker-month-mode-header > span,
+.noseur-date-time-picker-month-mode-footer > span {
+  margin: 0px 5px;
+}
+
+.noseur-date-time-picker-footer > button:first-child,
+.noseur-date-time-picker-top-panel > button:first-child,
+.noseur-date-time-picker-year-mode-footer:first-child,
+.noseur-date-time-picker-month-mode-footer:first-child,
+.noseur-date-time-picker-bottom-panel > button:first-child {
+  margin-right: 10px;
+}
+
+.noseur-date-time-picker-footer > button:not(.noseur-date-time-picker-footer > button:first-child),
+.noseur-date-time-picker-top-panel > button:not(.noseur-date-time-picker-top-panel > button:first-child),
+.noseur-date-time-picker-bottom-panel > button:not(.noseur-date-time-picker-bottom-panel > button:first-child) .noseur-date-time-picker-year-mode-footer > button:not(.noseur-date-time-picker-year-mode-footer > button:first-child),
+.noseur-date-time-picker-month-mode-footer > button:not(.noseur-date-time-picker-month-mode-footer > button:first-child) {
+  margin-left: 10px;
+}
+
+.noseur-date-time-picker-left-panel,
+.noseur-date-time-picker-right-panel {
+  height: 100%;
+  flex-direction: column;
+}
+
+.noseur-date-time-picker-left-panel {
+  margin-right: 25px;
+}
+
+.noseur-date-time-picker-right-panel {
+  margin-left: 25px;
+}
+
+.noseur-date-time-picker-weekdays > .noseur-date-time-picker-weekdays-day {
+  flex: 1;
+  display: flex;
+  font-weight: 500;
+  align-items: center;
+  justify-content: center;
+}
+
+.noseur-date-time-picker-days {
+  display: grid;
+  margin-top: 15px;
+}
+
+.noseur-date-time-picker-days > .noseur-date-time-picker-days-date {
+  width: 75%;
+  margin: 2px;
+  justify-self: center;
+}
+
+.noseur-date-time-picker-days > .noseur-date-time-picker-days-date-today,
+.noseur-date-time-picker-days > .noseur-date-time-picker-days-date-in-range,
+.noseur-date-time-picker-days > .noseur-date-time-picker-days-date-hover:hover {
+  background: var(--noseurSchemeStripColor, #dee2e6);
+}
+
+.noseur-date-time-picker-row,
+.noseur-date-time-picker-time,
+.noseur-date-time-picker-column {
+  width: fit-content;
+  align-items: center;
+  justify-content: center;
+}
+
+.noseur-date-time-picker-days-underline {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  border-top: 1px solid var(--noseurSchemeDataBorderColor, rgb(145, 144, 144));
+  border-bottom: 1px solid var(--noseurSchemeDataBorderColor, rgb(145, 144, 144));
+}
+
+.noseur-date-time-picker-selected-dates {
+  width: auto;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.noseur-date-time-picker-selected-dates > .noseur-date-time-picker-selected-dates-selected-date:first-child {
+  margin-right: 10px;
+}
+
+.noseur-date-time-picker-selected-dates > .noseur-date-time-picker-selected-dates-selected-date:not(.noseur-date-time-picker-selected-dates > .noseur-date-time-picker-selected-dates-selected-date:first-child) {
+  margin-left: 10px;
+}
+
+.noseur-date-time-picker-time {
+  width: auto;
+  height: auto;
+  display: flex;
+}
+
+.noseur-date-time-picker-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.noseur-date-time-picker-time-hours,
+.noseur-date-time-picker-time-minutes,
+.noseur-date-time-picker-time-seconds,
+.noseur-date-time-picker-time-meridian {
+  margin: 0px 5px;
+}
+
+.noseur-date-time-picker-long-year,
+.noseur-date-time-picker-month-name {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+}
+
+.noseur-date-time-picker-long-year-enabled,
+.noseur-date-time-picker-month-name-enabled {
+  cursor: pointer;
+}
+
+.noseur-date-time-picker-long-year-selected,
+.noseur-date-time-picker-month-name-selected,
+.noseur-date-time-picker-long-year-enabled:hover,
+.noseur-date-time-picker-month-name-enabled:hover {
+  color: var(--noseurSchemeTextColor, black);
+}
+
+.noseur-date-time-picker-years,
+.noseur-date-time-picker-months {
+  display: grid;
+  grid-gap: 20px;
+  grid-template-columns: auto auto auto;
+}
+
+/* Date Time Picker */
+.noseur-date-time-input {
+  width: auto;
+}
+
+.noseur-date-time-input-date-time-picker {
+  --componentMarginTopOrBottom: 3px !important;
+}
+
+/* ColorSlider */
+.noseur-color-slider {
+  content: "";
+  --noseurSchemeAccentColor: transparent !important;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC) center repeat !important;
+}
+
+.noseur-color-slider-vertical {
+  width: 10px !important;
+}
+
+.noseur-color-slider-horizontal {
+  height: 10px !important;
+}
+
+.noseur-color-slider > .noseur-slider-handle {
+  --noseurSchemeMainColor: rgba(1, 1, 1, 0.6) !important;
+}
+
+.noseur-color-slider-range-vertical {
+  height: 100%;
+}
+
+.noseur-color-slider-range-horizontal {
+  width: 100%;
+}
+
+/* Fieldset */
+.noseur-fieldset {
+  padding: 0px;
+}
+
+.noseur-fieldset-legend {
+  z-index: 2;
+  padding: 0px 7px;
+  margin: 0px 15px -6px 15px;
+}

package/dist/esm/compose/exotic/ColorPicker.d.ts

@@ -0,0 +1,41 @@
+import "../Composed.css";
+import React from "react";
+import { ColorEventHandler } from "../../constants/Types";
+import { ComponentBaseProps, ComponentRenderType } from "../../core/ComponentBaseProps";
+import { DialogProps } from "../../overlay/Dialog";
+import { PopoverProps } from "../../overlay/Popover";
+export declare enum ColorPickerLayoutElement {
+    DashElement = "[d]",
+    SpaceElement = "[s]",
+    RowDividerElement = "[-]",
+    OpenRowGroupElement = "{",
+    CloseRowGroupElement = "}",
+    PanelSeparatorElement = "|",
+    ColumnDividerElement = "[|]",
+    SpaceLeftRightElement = "<>",
+    OpenColumnGroupElement = "<",
+    CloseColumnGroupElement = ">",
+    ClearElement = "ClearElement",
+    ChooseElement = "ChooseElement",
+    CancelElement = "CancelElement",
+    MapToggleElement = "MapToggleElement",
+    PalleteToggleElement = "PalleteToggleElement",
+    ClearSolidColorElement = "ClearSolidColorElement",
+    ColorFormatDropdownElement = "ColorFormatDropdownElement",
+    ClearTransparentColorElement = "ClearTransparentColorElement"
+}
+export declare enum ColorPickerLayout {
+}
+export type ColorPickerAttributesRelays = {
+    dialog?: Partial<DialogProps>;
+    popover?: Partial<PopoverProps>;
+};
+export interface ColorPickerManageRef {
+}
+export interface ColorPickerProps extends ComponentBaseProps<HTMLDivElement, ColorPickerManageRef, ColorPickerAttributesRelays> {
+    autoFocus: boolean;
+    modalVisible: boolean;
+    type: ComponentRenderType;
+    onSelectColor: ColorEventHandler;
+}
+export declare const ColorPicker: ({ ref, ...props }: Partial<ColorPickerProps>) => React.JSX.Element;

package/dist/esm/compose/exotic/ColorPicker.js

@@ -0,0 +1,85 @@
+import "../Composed.css";
+import React from "react";
+import { ComponentRenderType } from "../../core/ComponentBaseProps";
+export var ColorPickerLayoutElement;
+(function (ColorPickerLayoutElement) {
+    ColorPickerLayoutElement["DashElement"] = "[d]";
+    ColorPickerLayoutElement["SpaceElement"] = "[s]";
+    ColorPickerLayoutElement["RowDividerElement"] = "[-]";
+    ColorPickerLayoutElement["OpenRowGroupElement"] = "{";
+    ColorPickerLayoutElement["CloseRowGroupElement"] = "}";
+    ColorPickerLayoutElement["PanelSeparatorElement"] = "|";
+    ColorPickerLayoutElement["ColumnDividerElement"] = "[|]";
+    ColorPickerLayoutElement["SpaceLeftRightElement"] = "<>";
+    ColorPickerLayoutElement["OpenColumnGroupElement"] = "<";
+    ColorPickerLayoutElement["CloseColumnGroupElement"] = ">";
+    ColorPickerLayoutElement["ClearElement"] = "ClearElement";
+    ColorPickerLayoutElement["ChooseElement"] = "ChooseElement";
+    ColorPickerLayoutElement["CancelElement"] = "CancelElement";
+    ColorPickerLayoutElement["MapToggleElement"] = "MapToggleElement";
+    ColorPickerLayoutElement["PalleteToggleElement"] = "PalleteToggleElement";
+    ColorPickerLayoutElement["ClearSolidColorElement"] = "ClearSolidColorElement";
+    ColorPickerLayoutElement["ColorFormatDropdownElement"] = "ColorFormatDropdownElement";
+    ColorPickerLayoutElement["ClearTransparentColorElement"] = "ClearTransparentColorElement";
+})(ColorPickerLayoutElement || (ColorPickerLayoutElement = {}));
+export var ColorPickerLayout;
+(function (ColorPickerLayout) {
+})(ColorPickerLayout || (ColorPickerLayout = {}));
+class ColorPickerComponent extends React.Component {
+    static defaultProps = {};
+    state = {
+        modalVisible: this.props.modalVisible,
+    };
+    dialogManageRef = {};
+    popoverManageRef = {};
+    constructor(props) {
+        super(props);
+        this.toggle = this.toggle.bind(this);
+        this.toggleMapComponent = this.toggleMapComponent.bind(this);
+        this.togglePalleteElement = this.togglePalleteElement.bind(this);
+        this.reportOnSelectColor = this.reportOnSelectColor.bind(this);
+        this.performColorControlAction = this.performColorControlAction.bind(this);
+    }
+    toggle(event, target) {
+        switch (this.props.type) {
+            case ComponentRenderType.MODAL:
+                this.setState({ modalVisible: !this.state.modalVisible });
+                break;
+            case ComponentRenderType.POPOVER:
+                this.popoverManageRef.toggle(event, target);
+                break;
+        }
+    }
+    performColorControlAction(element) {
+        switch (element) {
+            case ColorPickerLayoutElement.ClearElement:
+                // TODO impl.
+                break;
+            case ColorPickerLayoutElement.CancelElement:
+                // TODO impl.
+                break;
+            case ColorPickerLayoutElement.ChooseElement:
+                // TODO impl.
+                break;
+            case ColorPickerLayoutElement.ClearSolidColorElement:
+                // TODO impl.
+                break;
+            case ColorPickerLayoutElement.ColorFormatDropdownElement:
+                // TODO impl.
+                break;
+            case ColorPickerLayoutElement.ClearTransparentColorElement:
+                // TODO impl.
+                break;
+        }
+    }
+    reportOnSelectColor(hex) {
+        if (!this.props.onSelectColor)
+            return;
+        throw new Error("Implement report on select color " + hex);
+    }
+    toggleMapComponent() {
+    }
+    togglePalleteElement() {
+    }
+}
+export const ColorPicker = ({ ref, ...props }) => (React.createElement(ColorPickerComponent, { ...props, forwardRef: ref }));

package/dist/esm/compose/exotic/ColorSlider.d.ts

@@ -0,0 +1,30 @@
+import "../Composed.css";
+import React from "react";
+import { BareInputManageRef } from "../../form/Input";
+import { SliderProps } from "../../form/Slider";
+import { Orientation } from "../../constants/Orientation";
+import { Color, ColorEventHandler } from "../../constants/Types";
+import { ComponentBaseProps } from "../../core/ComponentBaseProps";
+export declare const ColorSliderGradient: {
+    TRANSPARENT: string;
+    TRANSPARENT_VERTICAL: string;
+    TRANSPARENT_HORIZONTAL: string;
+    RAINBOW: string;
+    RAINBOW_VERTICAL: string;
+    RAINBOW_HORIZONTAL: string;
+};
+export type ColorSliderAttributesRelays = {
+    sliderProps?: Partial<SliderProps>;
+};
+export interface ColorSliderManageRef extends BareInputManageRef<Color> {
+}
+export interface ColorSliderProps extends ComponentBaseProps<HTMLDivElement, ColorSliderManageRef, ColorSliderAttributesRelays> {
+    hue: string;
+    primaryColor: string;
+    reportOnDrag: boolean;
+    colorGradient: string;
+    allowedOverflow: number;
+    orientation: Orientation.VERTICAL | Orientation.HORIZONTAL;
+    onSelectColor: ColorEventHandler;
+}
+export declare const ColorSlider: ({ ref, ...props }: Partial<ColorSliderProps>) => React.JSX.Element;