basefn 1.2.0 → 1.4.0

package/src/components/Basefn__HoverCard.res.mjs

@@ -0,0 +1,109 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Xote from "xote/src/Xote.res.mjs";
+import * as Xote__JSX from "xote/src/Xote__JSX.res.mjs";
+import * as Primitive_option from "@rescript/runtime/lib/es6/Primitive_option.js";
+
+import './Basefn__HoverCard.css'
+;
+
+function positionToString(position) {
+  switch (position) {
+    case "Top" :
+      return "top";
+    case "Bottom" :
+      return "bottom";
+    case "Left" :
+      return "left";
+    case "Right" :
+      return "right";
+  }
+}
+
+function alignToString(align) {
+  switch (align) {
+    case "Start" :
+      return "start";
+    case "Center" :
+      return "center";
+    case "End" :
+      return "end";
+  }
+}
+
+function Basefn__HoverCard(props) {
+  let className = props.className;
+  let __closeDelay = props.closeDelay;
+  let __openDelay = props.openDelay;
+  let __align = props.align;
+  let __position = props.position;
+  let content = props.content;
+  let position = __position !== undefined ? __position : "Bottom";
+  let align = __align !== undefined ? __align : "Center";
+  let openDelay = __openDelay !== undefined ? __openDelay : 200;
+  let closeDelay = __closeDelay !== undefined ? __closeDelay : 100;
+  let isOpen = Xote.Signal.make(false, undefined, undefined);
+  let timeoutId = {
+    contents: undefined
+  };
+  let clearExistingTimeout = () => {
+    let id = timeoutId.contents;
+    if (id !== undefined) {
+      clearTimeout(Primitive_option.valFromOption(id));
+      timeoutId.contents = undefined;
+      return;
+    }
+  };
+  let handleMouseEnter = param => {
+    clearExistingTimeout();
+    let id = setTimeout(() => Xote.Signal.set(isOpen, true), openDelay);
+    timeoutId.contents = Primitive_option.some(id);
+  };
+  let handleMouseLeave = param => {
+    clearExistingTimeout();
+    let id = setTimeout(() => Xote.Signal.set(isOpen, false), closeDelay);
+    timeoutId.contents = Primitive_option.some(id);
+  };
+  let getHoverCardClassName = () => {
+    let customClass = className !== undefined ? " " + className : "";
+    return "basefn-hover-card" + customClass;
+  };
+  let getContentClassName = () => {
+    let positionClass = " basefn-hover-card__content--" + positionToString(position);
+    let alignClass = " basefn-hover-card__content--align-" + alignToString(align);
+    return "basefn-hover-card__content" + positionClass + alignClass;
+  };
+  let hoverCardContent = Xote.Computed.make(() => {
+    if (Xote.Signal.get(isOpen)) {
+      return [Xote__JSX.Elements.jsx("div", {
+          class: getContentClassName(),
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
+          children: content
+        })];
+    } else {
+      return [];
+    }
+  }, undefined);
+  return Xote__JSX.Elements.jsxs("div", {
+    class: getHoverCardClassName(),
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    children: Xote__JSX.array([
+      Xote__JSX.Elements.jsx("div", {
+        class: "basefn-hover-card__trigger",
+        children: props.trigger
+      }),
+      Xote.Component.signalFragment(hoverCardContent)
+    ])
+  });
+}
+
+let make = Basefn__HoverCard;
+
+export {
+  positionToString,
+  alignToString,
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Modal.css

@@ -98,3 +98,41 @@
     transform: scale(1) translateY(0);
   }
 }
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+  .basefn-modal-backdrop {
+    align-items: flex-end;
+  }
+
+  .basefn-modal {
+    max-width: 100vw;
+    max-height: 85vh;
+    width: 100% !important;
+    border-radius: 0.75rem 0.75rem 0 0;
+    animation: basefn-modal-slide-up 0.3s ease-out;
+  }
+
+  .basefn-modal__header {
+    padding: 1rem;
+  }
+
+  .basefn-modal__body {
+    padding: 1rem;
+  }
+
+  .basefn-modal__footer {
+    padding: 1rem;
+  }
+
+  @keyframes basefn-modal-slide-up {
+    from {
+      opacity: 0;
+      transform: translateY(100%);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}

package/src/components/Basefn__Popover.css

@@ -0,0 +1,98 @@
+@import '../styles/variables.css';
+
+.basefn-popover {
+  position: relative;
+  display: inline-block;
+}
+
+.basefn-popover__trigger {
+  cursor: pointer;
+}
+
+.basefn-popover__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 49;
+}
+
+.basefn-popover__content {
+  position: absolute;
+  z-index: 50;
+  background: var(--basefn-surface-elevated);
+  border: var(--basefn-border-width) solid var(--basefn-border-primary);
+  border-radius: var(--basefn-radius-lg);
+  box-shadow: var(--basefn-shadow-lg);
+  padding: var(--basefn-spacing-lg);
+  min-width: 200px;
+  animation: basefn-popover-fade-in var(--basefn-transition-fast);
+}
+
+@keyframes basefn-popover-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Position: Bottom */
+.basefn-popover__content--bottom {
+  top: 100%;
+  margin-top: var(--basefn-spacing-sm);
+}
+
+/* Position: Top */
+.basefn-popover__content--top {
+  bottom: 100%;
+  margin-bottom: var(--basefn-spacing-sm);
+}
+
+/* Position: Left */
+.basefn-popover__content--left {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-right: var(--basefn-spacing-sm);
+}
+
+/* Position: Right */
+.basefn-popover__content--right {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: var(--basefn-spacing-sm);
+}
+
+/* Alignment for top/bottom positions */
+.basefn-popover__content--bottom.basefn-popover__content--align-start,
+.basefn-popover__content--top.basefn-popover__content--align-start {
+  left: 0;
+}
+
+.basefn-popover__content--bottom.basefn-popover__content--align-center,
+.basefn-popover__content--top.basefn-popover__content--align-center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.basefn-popover__content--bottom.basefn-popover__content--align-end,
+.basefn-popover__content--top.basefn-popover__content--align-end {
+  right: 0;
+}
+
+/* Alignment for left/right positions */
+.basefn-popover__content--left.basefn-popover__content--align-start,
+.basefn-popover__content--right.basefn-popover__content--align-start {
+  top: 0;
+  transform: none;
+}
+
+.basefn-popover__content--left.basefn-popover__content--align-end,
+.basefn-popover__content--right.basefn-popover__content--align-end {
+  top: auto;
+  bottom: 0;
+  transform: none;
+}

package/src/components/Basefn__Popover.res

@@ -0,0 +1,95 @@
+%%raw(`import './Basefn__Popover.css'`)
+
+open Xote
+
+type position = Top | Bottom | Left | Right
+
+type align = Start | Center | End
+
+let positionToString = (position: position) => {
+  switch position {
+  | Top => "top"
+  | Bottom => "bottom"
+  | Left => "left"
+  | Right => "right"
+  }
+}
+
+let alignToString = (align: align) => {
+  switch align {
+  | Start => "start"
+  | Center => "center"
+  | End => "end"
+  }
+}
+
+@jsx.component
+let make = (
+  ~trigger: Component.node,
+  ~content: Component.node,
+  ~isOpen: Signal.t<bool>,
+  ~onOpenChange: option<bool => unit>=?,
+  ~position: position=Bottom,
+  ~align: align=Center,
+  ~closeOnClickOutside: bool=true,
+  ~className: option<string>=?,
+) => {
+  let handleTriggerClick = _ => {
+    let newValue = !Signal.get(isOpen)
+    Signal.set(isOpen, newValue)
+    switch onOpenChange {
+    | Some(callback) => callback(newValue)
+    | None => ()
+    }
+  }
+
+  let handleClose = () => {
+    Signal.set(isOpen, false)
+    switch onOpenChange {
+    | Some(callback) => callback(false)
+    | None => ()
+    }
+  }
+
+  let handleBackdropClick = _ => {
+    if closeOnClickOutside {
+      handleClose()
+    }
+  }
+
+  let getPopoverClassName = () => {
+    let baseClass = "basefn-popover"
+    let customClass = switch className {
+    | Some(c) => " " ++ c
+    | None => ""
+    }
+    baseClass ++ customClass
+  }
+
+  let getContentClassName = () => {
+    let baseClass = "basefn-popover__content"
+    let positionClass = " basefn-popover__content--" ++ positionToString(position)
+    let alignClass = " basefn-popover__content--align-" ++ alignToString(align)
+    baseClass ++ positionClass ++ alignClass
+  }
+
+  let popoverContent = Computed.make(() => {
+    if Signal.get(isOpen) {
+      [
+        <div class="basefn-popover__backdrop" onClick={handleBackdropClick} />,
+        <div class={getContentClassName()}>
+          {content}
+        </div>,
+      ]
+    } else {
+      []
+    }
+  })
+
+  <div class={getPopoverClassName()}>
+    <div class="basefn-popover__trigger" onClick={handleTriggerClick}>
+      {trigger}
+    </div>
+    {Component.signalFragment(popoverContent)}
+  </div>
+}

package/src/components/Basefn__Popover.res.mjs

@@ -0,0 +1,107 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Xote from "xote/src/Xote.res.mjs";
+import * as Xote__JSX from "xote/src/Xote__JSX.res.mjs";
+
+import './Basefn__Popover.css'
+;
+
+function positionToString(position) {
+  switch (position) {
+    case "Top" :
+      return "top";
+    case "Bottom" :
+      return "bottom";
+    case "Left" :
+      return "left";
+    case "Right" :
+      return "right";
+  }
+}
+
+function alignToString(align) {
+  switch (align) {
+    case "Start" :
+      return "start";
+    case "Center" :
+      return "center";
+    case "End" :
+      return "end";
+  }
+}
+
+function Basefn__Popover(props) {
+  let className = props.className;
+  let __closeOnClickOutside = props.closeOnClickOutside;
+  let __align = props.align;
+  let __position = props.position;
+  let onOpenChange = props.onOpenChange;
+  let isOpen = props.isOpen;
+  let content = props.content;
+  let position = __position !== undefined ? __position : "Bottom";
+  let align = __align !== undefined ? __align : "Center";
+  let closeOnClickOutside = __closeOnClickOutside !== undefined ? __closeOnClickOutside : true;
+  let handleTriggerClick = param => {
+    let newValue = !Xote.Signal.get(isOpen);
+    Xote.Signal.set(isOpen, newValue);
+    if (onOpenChange !== undefined) {
+      return onOpenChange(newValue);
+    }
+  };
+  let handleClose = () => {
+    Xote.Signal.set(isOpen, false);
+    if (onOpenChange !== undefined) {
+      return onOpenChange(false);
+    }
+  };
+  let handleBackdropClick = param => {
+    if (closeOnClickOutside) {
+      return handleClose();
+    }
+  };
+  let getPopoverClassName = () => {
+    let customClass = className !== undefined ? " " + className : "";
+    return "basefn-popover" + customClass;
+  };
+  let getContentClassName = () => {
+    let positionClass = " basefn-popover__content--" + positionToString(position);
+    let alignClass = " basefn-popover__content--align-" + alignToString(align);
+    return "basefn-popover__content" + positionClass + alignClass;
+  };
+  let popoverContent = Xote.Computed.make(() => {
+    if (Xote.Signal.get(isOpen)) {
+      return [
+        Xote__JSX.Elements.jsx("div", {
+          class: "basefn-popover__backdrop",
+          onClick: handleBackdropClick
+        }),
+        Xote__JSX.Elements.jsx("div", {
+          class: getContentClassName(),
+          children: content
+        })
+      ];
+    } else {
+      return [];
+    }
+  }, undefined);
+  return Xote__JSX.Elements.jsxs("div", {
+    class: getPopoverClassName(),
+    children: Xote__JSX.array([
+      Xote__JSX.Elements.jsx("div", {
+        class: "basefn-popover__trigger",
+        onClick: handleTriggerClick,
+        children: props.trigger
+      }),
+      Xote.Component.signalFragment(popoverContent)
+    ])
+  });
+}
+
+let make = Basefn__Popover;
+
+export {
+  positionToString,
+  alignToString,
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__ScrollArea.css

@@ -0,0 +1,76 @@
+@import '../styles/variables.css';
+
+.basefn-scroll-area {
+  position: relative;
+  scrollbar-color: var(--basefn-border-secondary) transparent;
+}
+
+/* Orientation */
+.basefn-scroll-area--vertical {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.basefn-scroll-area--horizontal {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.basefn-scroll-area--both {
+  overflow: auto;
+}
+
+/* Webkit scrollbar styling */
+.basefn-scroll-area::-webkit-scrollbar {
+  background: transparent;
+}
+
+.basefn-scroll-area::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: var(--basefn-radius-full);
+}
+
+.basefn-scroll-area::-webkit-scrollbar-thumb {
+  background-color: var(--basefn-border-secondary);
+  border-radius: var(--basefn-radius-full);
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+.basefn-scroll-area::-webkit-scrollbar-thumb:hover {
+  background-color: var(--basefn-text-muted);
+}
+
+/* Scrollbar sizes */
+.basefn-scroll-area--scrollbar-sm::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.basefn-scroll-area--scrollbar-md::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.basefn-scroll-area--scrollbar-lg::-webkit-scrollbar {
+  width: 14px;
+  height: 14px;
+}
+
+/* Firefox scrollbar sizes */
+.basefn-scroll-area--scrollbar-sm {
+  scrollbar-width: thin;
+}
+
+.basefn-scroll-area--scrollbar-md {
+  scrollbar-width: auto;
+}
+
+.basefn-scroll-area--scrollbar-lg {
+  scrollbar-width: auto;
+}
+
+/* Corner styling for both scrollbars */
+.basefn-scroll-area::-webkit-scrollbar-corner {
+  background: transparent;
+}

package/src/components/Basefn__ScrollArea.res

@@ -0,0 +1,60 @@
+%%raw(`import './Basefn__ScrollArea.css'`)
+
+open Xote
+
+type orientation = Vertical | Horizontal | Both
+
+type scrollbarSize = Sm | Md | Lg
+
+let orientationToString = (orientation: orientation) => {
+  switch orientation {
+  | Vertical => "vertical"
+  | Horizontal => "horizontal"
+  | Both => "both"
+  }
+}
+
+let scrollbarSizeToString = (size: scrollbarSize) => {
+  switch size {
+  | Sm => "sm"
+  | Md => "md"
+  | Lg => "lg"
+  }
+}
+
+@jsx.component
+let make = (
+  ~orientation: orientation=Vertical,
+  ~scrollbarSize: scrollbarSize=Md,
+  ~maxHeight: option<string>=?,
+  ~maxWidth: option<string>=?,
+  ~className: option<string>=?,
+  ~children: Component.node,
+) => {
+  let getClassName = () => {
+    let baseClass = "basefn-scroll-area"
+    let orientationClass = " basefn-scroll-area--" ++ orientationToString(orientation)
+    let sizeClass = " basefn-scroll-area--scrollbar-" ++ scrollbarSizeToString(scrollbarSize)
+    let customClass = switch className {
+    | Some(c) => " " ++ c
+    | None => ""
+    }
+    baseClass ++ orientationClass ++ sizeClass ++ customClass
+  }
+
+  let getStyle = () => {
+    let maxHeightStyle = switch maxHeight {
+    | Some(h) => "max-height: " ++ h ++ ";"
+    | None => ""
+    }
+    let maxWidthStyle = switch maxWidth {
+    | Some(w) => "max-width: " ++ w ++ ";"
+    | None => ""
+    }
+    maxHeightStyle ++ maxWidthStyle
+  }
+
+  <div class={getClassName()} style={getStyle()}>
+    {children}
+  </div>
+}

package/src/components/Basefn__ScrollArea.res.mjs

@@ -0,0 +1,63 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Xote__JSX from "xote/src/Xote__JSX.res.mjs";
+
+import './Basefn__ScrollArea.css'
+;
+
+function orientationToString(orientation) {
+  switch (orientation) {
+    case "Vertical" :
+      return "vertical";
+    case "Horizontal" :
+      return "horizontal";
+    case "Both" :
+      return "both";
+  }
+}
+
+function scrollbarSizeToString(size) {
+  switch (size) {
+    case "Sm" :
+      return "sm";
+    case "Md" :
+      return "md";
+    case "Lg" :
+      return "lg";
+  }
+}
+
+function Basefn__ScrollArea(props) {
+  let className = props.className;
+  let maxWidth = props.maxWidth;
+  let maxHeight = props.maxHeight;
+  let __scrollbarSize = props.scrollbarSize;
+  let __orientation = props.orientation;
+  let orientation = __orientation !== undefined ? __orientation : "Vertical";
+  let scrollbarSize = __scrollbarSize !== undefined ? __scrollbarSize : "Md";
+  let getClassName = () => {
+    let orientationClass = " basefn-scroll-area--" + orientationToString(orientation);
+    let sizeClass = " basefn-scroll-area--scrollbar-" + scrollbarSizeToString(scrollbarSize);
+    let customClass = className !== undefined ? " " + className : "";
+    return "basefn-scroll-area" + orientationClass + sizeClass + customClass;
+  };
+  let getStyle = () => {
+    let maxHeightStyle = maxHeight !== undefined ? "max-height: " + maxHeight + ";" : "";
+    let maxWidthStyle = maxWidth !== undefined ? "max-width: " + maxWidth + ";" : "";
+    return maxHeightStyle + maxWidthStyle;
+  };
+  return Xote__JSX.Elements.jsx("div", {
+    class: getClassName(),
+    style: getStyle(),
+    children: props.children
+  });
+}
+
+let make = Basefn__ScrollArea;
+
+export {
+  orientationToString,
+  scrollbarSizeToString,
+  make,
+}
+/*  Not a pure module */