@rettangoli/ui 1.0.0-rc8 → 1.0.0

package/src/deps/createGlobalUI.js

@@ -66,7 +66,7 @@ const createGlobalUI = (globalUIElement) => {
       {
         throw new Error("globalUIElement is not set. Make sure to initialize the global UI component and pass it to createGlobalUIManager.");
       }
-      globalUIElement.transformedHandlers.showAlert(options);
+      globalUIElement.transformedHandlers.handleShowAlert(options);
     },
 
     /**
@@ -87,7 +87,7 @@ const createGlobalUI = (globalUIElement) => {
       {
         throw new Error("globalUIElement is not set. Make sure to initialize the global UI component and pass it to createGlobalUIManager.");
       }
-      return globalUIElement.transformedHandlers.showConfirm(options);
+      return globalUIElement.transformedHandlers.handleShowConfirm(options);
     },
 
     /**
@@ -109,7 +109,7 @@ const createGlobalUI = (globalUIElement) => {
       {
         throw new Error("globalUIElement is not set. Make sure to initialize the global UI component and pass it to createGlobalUIManager.");
       }
-      return globalUIElement.transformedHandlers.showDropdownMenu(options);
+      return globalUIElement.transformedHandlers.handleShowDropdownMenu(options);
     },
 
     /**
@@ -125,7 +125,7 @@ const createGlobalUI = (globalUIElement) => {
       {
         throw new Error("globalUIElement is not set. Make sure to initialize the global UI component and pass it to createGlobalUIManager.");
       }
-      return globalUIElement.transformedHandlers.closeAll();
+      return globalUIElement.transformedHandlers.handleCloseAll();
     }
   };
 }

package/src/entry-iife-layout.js

@@ -4,6 +4,9 @@ import RettangoliText from './primitives/text.js';
 import RettangoliImage from './primitives/image.js';
 import RettangoliSvg from './primitives/svg.js';
 import RettangoliInput from './primitives/input.js';
+import RettangoliInputDate from './primitives/input-date.js';
+import RettangoliInputTime from './primitives/input-time.js';
+import RettangoliInputDateTime from './primitives/input-datetime.js';
 import RettangoliInputNumber from './primitives/input-number.js';
 import RettangoliTextArea from './primitives/textarea.js';
 import RettangoliColorPicker from './primitives/colorPicker.js';
@@ -18,6 +21,9 @@ customElements.define("rtgl-text", RettangoliText({}));
 customElements.define("rtgl-image", RettangoliImage({}));
 customElements.define("rtgl-svg", RettangoliSvg({}));
 customElements.define("rtgl-input", RettangoliInput({}));
+customElements.define("rtgl-input-date", RettangoliInputDate({}));
+customElements.define("rtgl-input-time", RettangoliInputTime({}));
+customElements.define("rtgl-input-datetime", RettangoliInputDateTime({}));
 customElements.define("rtgl-input-number", RettangoliInputNumber({}));
 customElements.define("rtgl-textarea", RettangoliTextArea({}));
 customElements.define("rtgl-color-picker", RettangoliColorPicker({}));

package/src/entry-iife-ui.js

@@ -4,10 +4,14 @@ import RettangoliText from './primitives/text.js';
 import RettangoliImage from './primitives/image.js';
 import RettangoliSvg from './primitives/svg.js';
 import RettangoliInput from './primitives/input.js';
+import RettangoliInputDate from './primitives/input-date.js';
+import RettangoliInputTime from './primitives/input-time.js';
+import RettangoliInputDateTime from './primitives/input-datetime.js';
 import RettangoliInputNumber from './primitives/input-number.js';
 import RettangoliTextArea from './primitives/textarea.js';
 import RettangoliColorPicker from './primitives/colorPicker.js';
 import RettangoliSlider from './primitives/slider.js';
+import RettangoliCheckbox from './primitives/checkbox.js';
 import RettangoliDialog from './primitives/dialog.js';
 import RettangoliPopover from './primitives/popover.js';
 
@@ -17,10 +21,14 @@ customElements.define("rtgl-text", RettangoliText({}));
 customElements.define("rtgl-image", RettangoliImage({}));
 customElements.define("rtgl-svg", RettangoliSvg({}));
 customElements.define("rtgl-input", RettangoliInput({}));
+customElements.define("rtgl-input-date", RettangoliInputDate({}));
+customElements.define("rtgl-input-time", RettangoliInputTime({}));
+customElements.define("rtgl-input-datetime", RettangoliInputDateTime({}));
 customElements.define("rtgl-input-number", RettangoliInputNumber({}));
 customElements.define("rtgl-textarea", RettangoliTextArea({}));
 customElements.define("rtgl-color-picker", RettangoliColorPicker({}));
 customElements.define("rtgl-slider", RettangoliSlider({}));
+customElements.define("rtgl-checkbox", RettangoliCheckbox({}));
 customElements.define("rtgl-dialog", RettangoliDialog({}));
 customElements.define("rtgl-popover", RettangoliPopover({}));
 

package/src/index.js

@@ -4,12 +4,16 @@ import RettangoliText from './primitives/text.js';
 import RettangoliImage from './primitives/image.js';
 import RettangoliSvg from './primitives/svg.js';
 import RettangoliInput from './primitives/input.js';
+import RettangoliInputDate from './primitives/input-date.js';
+import RettangoliInputTime from './primitives/input-time.js';
+import RettangoliInputDateTime from './primitives/input-datetime.js';
 import RettangoliInputNumber from './primitives/input-number.js';
 import RettangoliTextArea from './primitives/textarea.js';
 import RettangoliDialog from './primitives/dialog.js';
 import RettangoliPopover from './primitives/popover.js';
 import RettangoliColorPicker from './primitives/colorPicker.js';
 import RettangoliSlider from './primitives/slider.js';
+import RettangoliCheckbox from './primitives/checkbox.js';
 import createGlobalUI from './deps/createGlobalUI.js';
 
 export {
@@ -19,11 +23,15 @@ export {
     RettangoliImage,
     RettangoliSvg,
     RettangoliInput,
+    RettangoliInputDate,
+    RettangoliInputTime,
+    RettangoliInputDateTime,
     RettangoliInputNumber,
     RettangoliTextArea,
     RettangoliDialog,
     RettangoliPopover,
     RettangoliColorPicker,
     RettangoliSlider,
+    RettangoliCheckbox,
     createGlobalUI,
 }

package/src/primitives/checkbox.js

@@ -0,0 +1,295 @@
+import {
+  css,
+  dimensionWithUnit,
+  convertObjectToCssString,
+  styleMapKeys,
+  permutateBreakpoints,
+} from "../common.js";
+import cursorStyles from "../styles/cursorStyles.js";
+import marginStyles from "../styles/marginStyles.js";
+
+class RettangoliCheckboxElement extends HTMLElement {
+  static styleSheet = null;
+
+  static initializeStyleSheet() {
+    if (!RettangoliCheckboxElement.styleSheet) {
+      RettangoliCheckboxElement.styleSheet = new CSSStyleSheet();
+      RettangoliCheckboxElement.styleSheet.replaceSync(css`
+        :host {
+          display: inline-flex;
+        }
+        .checkbox-wrapper {
+          display: inline-flex;
+          align-items: flex-start;
+          cursor: pointer;
+          color: var(--foreground);
+        }
+        :host([has-label]) .checkbox-wrapper {
+          gap: var(--spacing-sm);
+        }
+        :host([disabled]) .checkbox-wrapper {
+          cursor: not-allowed;
+        }
+        .checkbox-label {
+          display: none;
+          font-size: var(--sm-font-size);
+          font-weight: var(--sm-font-weight);
+          line-height: var(--sm-line-height);
+          letter-spacing: var(--sm-letter-spacing);
+          user-select: none;
+        }
+        :host([has-label]) .checkbox-label {
+          display: block;
+        }
+        input[type="checkbox"] {
+          -webkit-appearance: none;
+          appearance: none;
+          width: 18px;
+          height: 18px;
+          border: 2px solid var(--muted-foreground);
+          border-radius: var(--border-radius-sm);
+          background: var(--muted);
+          cursor: pointer;
+          transition: all 0.2s ease;
+          position: relative;
+          margin: 0;
+          flex-shrink: 0;
+        }
+        input[type="checkbox"]:checked {
+          background: var(--muted);
+          border-color: var(--foreground);
+        }
+        input[type="checkbox"]:checked::after {
+          content: "";
+          position: absolute;
+          left: 4px;
+          top: 1px;
+          width: 6px;
+          height: 10px;
+          border: solid var(--foreground);
+          border-width: 0 2px 2px 0;
+          transform: rotate(45deg);
+        }
+        input[type="checkbox"]:hover {
+          border-color: var(--foreground);
+        }
+        input[type="checkbox"]:focus {
+          outline: 2px solid var(--ring);
+          outline-offset: 2px;
+        }
+        input[type="checkbox"]:disabled {
+          cursor: not-allowed;
+          opacity: 0.5;
+        }
+        ${marginStyles}
+        ${cursorStyles}
+      `);
+    }
+  }
+
+  constructor() {
+    super();
+    RettangoliCheckboxElement.initializeStyleSheet();
+    this.shadow = this.attachShadow({ mode: "open" });
+    this.shadow.adoptedStyleSheets = [RettangoliCheckboxElement.styleSheet];
+
+    this._styles = {
+      default: {},
+      sm: {},
+      md: {},
+      lg: {},
+      xl: {},
+    };
+    this._lastStyleString = "";
+
+    this._inputElement = document.createElement('input');
+    this._inputElement.type = 'checkbox';
+    this._wrapperElement = document.createElement('label');
+    this._wrapperElement.className = 'checkbox-wrapper';
+    this._labelElement = document.createElement('span');
+    this._labelElement.className = 'checkbox-label';
+    this._labelSlotElement = document.createElement('slot');
+    this._labelSlotElement.addEventListener('slotchange', () => {
+      this._updateLabelState();
+    });
+    this._labelElement.appendChild(this._labelSlotElement);
+    this._styleElement = document.createElement('style');
+
+    this.shadow.appendChild(this._styleElement);
+    this._wrapperElement.appendChild(this._inputElement);
+    this._wrapperElement.appendChild(this._labelElement);
+    this.shadow.appendChild(this._wrapperElement);
+
+    this._inputElement.addEventListener('change', this._onChange);
+  }
+
+  static get observedAttributes() {
+    return [
+      "key",
+      "checked",
+      "disabled",
+      "label",
+      ...permutateBreakpoints([
+        ...styleMapKeys,
+        "wh",
+        "w",
+        "h",
+        "hide",
+        "show",
+        "op",
+        "z",
+      ])
+    ];
+  }
+
+  get checked() {
+    return this._inputElement.checked;
+  }
+
+  set checked(val) {
+    this._inputElement.checked = Boolean(val);
+  }
+
+  get value() {
+    return this._inputElement.checked;
+  }
+
+  set value(val) {
+    this._inputElement.checked = Boolean(val);
+  }
+
+  _onChange = () => {
+    this.dispatchEvent(new CustomEvent('value-change', {
+      detail: {
+        value: this._inputElement.checked,
+      },
+      bubbles: true,
+    }));
+  };
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "key" && oldValue !== newValue) {
+      requestAnimationFrame(() => {
+        const checked = this.hasAttribute("checked");
+        this._inputElement.checked = checked;
+      });
+      return;
+    }
+
+    if (name === "checked") {
+      this._inputElement.checked = newValue !== null;
+      return;
+    }
+
+    if (name === "disabled") {
+      if (newValue !== null) {
+        this._inputElement.setAttribute("disabled", "");
+      } else {
+        this._inputElement.removeAttribute("disabled");
+      }
+      return;
+    }
+
+    if (name === "label") {
+      this._updateLabelState();
+      return;
+    }
+
+    this._styles = {
+      default: {},
+      sm: {},
+      md: {},
+      lg: {},
+      xl: {},
+    };
+
+    ["default", "sm", "md", "lg", "xl"].forEach((size) => {
+      const addSizePrefix = (tag) => {
+        return `${size === "default" ? "" : `${size}-`}${tag}`;
+      };
+
+      const wh = this.getAttribute(addSizePrefix("wh"));
+      const width = dimensionWithUnit(
+        wh === null ? this.getAttribute(addSizePrefix("w")) : wh,
+      );
+      const height = dimensionWithUnit(
+        wh === null ? this.getAttribute(addSizePrefix("h")) : wh,
+      );
+      const opacity = this.getAttribute(addSizePrefix("op"));
+      const zIndex = this.getAttribute(addSizePrefix("z"));
+
+      if (zIndex !== null) {
+        this._styles[size]["z-index"] = zIndex;
+      }
+
+      if (opacity !== null) {
+        this._styles[size].opacity = opacity;
+      }
+
+      if (width === "f") {
+        this._styles[size].width = "var(--width-stretch)";
+      } else if (width !== undefined) {
+        this._styles[size].width = width;
+        this._styles[size]["min-width"] = width;
+        this._styles[size]["max-width"] = width;
+      }
+
+      if (height === "f") {
+        this._styles[size].height = "100%";
+      } else if (height !== undefined) {
+        this._styles[size].height = height;
+        this._styles[size]["min-height"] = height;
+        this._styles[size]["max-height"] = height;
+      }
+
+      if (this.hasAttribute(addSizePrefix("hide"))) {
+        this._styles[size].display = "none";
+      }
+
+      if (this.hasAttribute(addSizePrefix("show"))) {
+        this._styles[size].display = "block";
+      }
+    });
+
+    const newStyleString = convertObjectToCssString(this._styles, 'input[type="checkbox"]');
+    if (newStyleString !== this._lastStyleString) {
+      this._styleElement.textContent = newStyleString;
+      this._lastStyleString = newStyleString;
+    }
+  }
+
+  connectedCallback() {
+    const checked = this.hasAttribute("checked");
+    this._inputElement.checked = checked;
+
+    if (this.hasAttribute("disabled")) {
+      this._inputElement.setAttribute("disabled", "");
+    }
+
+    this._updateLabelState();
+  }
+
+  _updateLabelState() {
+    const fallbackLabel = this.getAttribute("label");
+    this._labelSlotElement.textContent = fallbackLabel ?? "";
+
+    const assignedNodes = this._labelSlotElement.assignedNodes({ flatten: true });
+    const hasAssignedLabel = assignedNodes.some((node) => {
+      if (node.nodeType === Node.TEXT_NODE) {
+        return node.textContent.trim().length > 0;
+      }
+      return node.nodeType === Node.ELEMENT_NODE;
+    });
+    const hasFallbackLabel = typeof fallbackLabel === "string" && fallbackLabel.trim().length > 0;
+
+    if (hasAssignedLabel || hasFallbackLabel) {
+      this.setAttribute("has-label", "");
+    } else {
+      this.removeAttribute("has-label");
+    }
+  }
+}
+
+export default ({ render, html }) => {
+  return RettangoliCheckboxElement;
+};

package/src/primitives/input-date.js

@@ -0,0 +1,31 @@
+import RettangoliInput from "./input.js";
+
+const BaseInputElement = RettangoliInput({});
+const FORCED_TYPE = "date";
+
+class RettangoliInputDateElement extends BaseInputElement {
+  connectedCallback() {
+    if (this.getAttribute("type") !== FORCED_TYPE) {
+      super.setAttribute("type", FORCED_TYPE);
+    }
+    if (super.connectedCallback) {
+      super.connectedCallback();
+    }
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "type" && newValue !== FORCED_TYPE) {
+      if (this.getAttribute("type") !== FORCED_TYPE) {
+        super.setAttribute("type", FORCED_TYPE);
+      }
+      return;
+    }
+    if (super.attributeChangedCallback) {
+      super.attributeChangedCallback(name, oldValue, newValue);
+    }
+  }
+}
+
+export default ({ render, html }) => {
+  return RettangoliInputDateElement;
+};

package/src/primitives/input-datetime.js

@@ -0,0 +1,31 @@
+import RettangoliInput from "./input.js";
+
+const BaseInputElement = RettangoliInput({});
+const FORCED_TYPE = "datetime-local";
+
+class RettangoliInputDateTimeElement extends BaseInputElement {
+  connectedCallback() {
+    if (this.getAttribute("type") !== FORCED_TYPE) {
+      super.setAttribute("type", FORCED_TYPE);
+    }
+    if (super.connectedCallback) {
+      super.connectedCallback();
+    }
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "type" && newValue !== FORCED_TYPE) {
+      if (this.getAttribute("type") !== FORCED_TYPE) {
+        super.setAttribute("type", FORCED_TYPE);
+      }
+      return;
+    }
+    if (super.attributeChangedCallback) {
+      super.attributeChangedCallback(name, oldValue, newValue);
+    }
+  }
+}
+
+export default ({ render, html }) => {
+  return RettangoliInputDateTimeElement;
+};

package/src/primitives/input-time.js

@@ -0,0 +1,31 @@
+import RettangoliInput from "./input.js";
+
+const BaseInputElement = RettangoliInput({});
+const FORCED_TYPE = "time";
+
+class RettangoliInputTimeElement extends BaseInputElement {
+  connectedCallback() {
+    if (this.getAttribute("type") !== FORCED_TYPE) {
+      super.setAttribute("type", FORCED_TYPE);
+    }
+    if (super.connectedCallback) {
+      super.connectedCallback();
+    }
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "type" && newValue !== FORCED_TYPE) {
+      if (this.getAttribute("type") !== FORCED_TYPE) {
+        super.setAttribute("type", FORCED_TYPE);
+      }
+      return;
+    }
+    if (super.attributeChangedCallback) {
+      super.attributeChangedCallback(name, oldValue, newValue);
+    }
+  }
+}
+
+export default ({ render, html }) => {
+  return RettangoliInputTimeElement;
+};

package/src/primitives/input.js

@@ -19,6 +19,9 @@ class RettangoliInputElement extends HTMLElement {
   static inputSpecificAttributes = [
     "type",
     "disabled",
+    "min",
+    "max",
+    "step",
     "s",
   ];
 
@@ -58,6 +61,35 @@ class RettangoliInputElement extends HTMLElement {
         input:disabled {
           cursor: not-allowed;
         }
+        input[type="date"],
+        input[type="time"],
+        input[type="datetime-local"] {
+          color: var(--foreground);
+          min-width: 0;
+        }
+        input[type="date"]::-webkit-calendar-picker-indicator,
+        input[type="time"]::-webkit-calendar-picker-indicator,
+        input[type="datetime-local"]::-webkit-calendar-picker-indicator {
+          cursor: pointer;
+          border-radius: var(--border-radius-sm);
+          opacity: 1;
+          padding: 2px;
+        }
+        input[type="date"]::-webkit-datetime-edit,
+        input[type="time"]::-webkit-datetime-edit,
+        input[type="datetime-local"]::-webkit-datetime-edit {
+          color: var(--foreground);
+        }
+        input[type="date"]::-webkit-datetime-edit-fields-wrapper,
+        input[type="time"]::-webkit-datetime-edit-fields-wrapper,
+        input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper {
+          padding: 0;
+        }
+        input[type="date"]::-webkit-date-and-time-value,
+        input[type="time"]::-webkit-date-and-time-value,
+        input[type="datetime-local"]::-webkit-date-and-time-value {
+          text-align: left;
+        }
         ${marginStyles}
         ${cursorStyles}
       `);
@@ -93,6 +125,9 @@ class RettangoliInputElement extends HTMLElement {
       "placeholder",
       "disabled",
       "value",
+      "min",
+      "max",
+      "step",
       "s",
       ...permutateBreakpoints([
         ...inputStyleMapKeys,
@@ -242,10 +277,17 @@ class RettangoliInputElement extends HTMLElement {
 
   _updateInputAttributes() {
     const requestedType = this.getAttribute("type");
-    const type = requestedType === "password" ? "password" : "text";
+    const allowedTypes = new Set(["text", "password", "date", "time", "datetime-local"]);
+    const type = allowedTypes.has(requestedType) ? requestedType : "text";
+    const min = this.getAttribute("min");
+    const max = this.getAttribute("max");
+    const step = this.getAttribute("step");
     const isDisabled = this.hasAttribute('disabled');
 
     this._setOrRemoveInputAttribute("type", type);
+    this._setOrRemoveInputAttribute("min", min);
+    this._setOrRemoveInputAttribute("max", max);
+    this._setOrRemoveInputAttribute("step", step);
 
     if (isDisabled) {
       this._inputElement.setAttribute("disabled", "");

package/src/primitives/textarea.js

@@ -38,6 +38,9 @@ class RettangoliTextAreaElement extends HTMLElement {
         textarea:focus {
           border-color: var(--foreground);
         }
+        textarea:disabled {
+          cursor: not-allowed;
+        }
         ${marginStyles}
         ${cursorStyles}
       `);

package/src/primitives/view.js

@@ -9,6 +9,7 @@ import {
   createResponsiveStyleBuckets,
   responsiveStyleSizes,
   applyDimensionToStyleBucket,
+  getResponsiveAttribute,
 } from "../common.js";
 import flexDirectionStyles from "../styles/flexDirectionStyles.js";
 import cursorStyles from "../styles/cursorStyles.js";
@@ -172,6 +173,11 @@ class RettangoliViewElement extends HTMLElement {
       const direction = this.getAttribute(addSizePrefix("d"));
       const alignHorizontal = this.getAttribute(addSizePrefix("ah"));
       const alignVertical = this.getAttribute(addSizePrefix("av"));
+      const effectiveDirection = getResponsiveAttribute({
+        element: this,
+        size,
+        attr: "d",
+      });
 
 
       if (direction === "h") {
@@ -190,8 +196,8 @@ class RettangoliViewElement extends HTMLElement {
       }
 
       // Handle alignment based on direction
-      const isHorizontal = direction === "h";
-      const isVerticalOrDefault = direction === "v" || !direction;
+      const isHorizontal = effectiveDirection === "h";
+      const isVerticalOrDefault = effectiveDirection === "v" || !effectiveDirection;
 
       // For horizontal direction: ah controls justify-content, av controls align-items
       if (isHorizontal) {

package/src/themes/base.css

@@ -21,7 +21,7 @@ html {
 
 body {
   margin: 0;
-  line-height: 1.5;
+  line-height: 1.2;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
 }
@@ -266,7 +266,7 @@ pre {
   white-space: pre;
   font-size: var(--sm-font-size);
   font-weight: var(--sm-font-weight);
-  line-height: var(--sm-line-height);
+  line-height: 1.2;
   letter-spacing: var(--sm-letter-spacing);
   padding: var(--spacing-lg);
   flex: 1;
@@ -290,7 +290,7 @@ code:not(pre code) {
   font-family: "Menlo", "Monaco", "Courier New", monospace;
   font-size: var(--sm-font-size);
   font-weight: var(--sm-font-weight);
-  line-height: var(--sm-line-height);
+  line-height: 1.2;
   letter-spacing: var(--sm-letter-spacing);
   background-color: var(--muted);
   padding: 0.1em 0.35em;
@@ -300,7 +300,7 @@ code:not(pre code) {
 
 a {
   color: var(--anchor-color, inherit);
-  text-decoration: var(--anchor-text-decoration, none);
+  text-decoration: var(--anchor-text-decoration, underline);
 }
 
 a:hover {

package/src/themes/theme-catppuccin.css

@@ -86,7 +86,7 @@
 
   --anchor-color: inherit;
   --anchor-color-hover: inherit;
-  --anchor-text-decoration: none;
+  --anchor-text-decoration: underline;
   --anchor-text-decoration-hover: underline;
 }
 

package/src/themes/theme-rtgl-mono.css

@@ -85,7 +85,7 @@
 
   --anchor-color: inherit;
   --anchor-color-hover: inherit;
-  --anchor-text-decoration: none;
+  --anchor-text-decoration: underline;
   --anchor-text-decoration-hover: underline;
 }