basefn 1.3.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "basefn",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/brnrdog/basefn.git"
@@ -38,7 +38,7 @@
     "lucide": "^0.562.0"
   },
   "peerDependencies": {
-    "xote": "^4.10.0"
+    "xote": "^4.12.0"
   },
   "release": {
     "branches": [
@@ -81,6 +81,6 @@
     "@semantic-release/npm": "^13.1.3",
     "rescript": "^12.0.1",
     "vite": "^5.0.0",
-    "xote": "^4.11.0"
+    "xote": "^4.12.0"
   }
 }

package/src/Basefn.res

@@ -44,6 +44,24 @@ type appLayoutContentWidth = Basefn__AppLayout.contentWidth
 type appLayoutTopbarPosition = Basefn__AppLayout.topbarPosition
 type iconName = Basefn__Icon.name
 type iconSize = Basefn__Icon.size
+type skeletonVariant = Basefn__Skeleton.variant
+type skeletonAnimation = Basefn__Skeleton.animation
+type scrollAreaOrientation = Basefn__ScrollArea.orientation
+type scrollAreaScrollbarSize = Basefn__ScrollArea.scrollbarSize
+type toggleVariant = Basefn__Toggle.variant
+type toggleSize = Basefn__Toggle.size
+type buttonGroupOrientation = Basefn__ButtonGroup.orientation
+type toggleGroupSelectionType = Basefn__ToggleGroup.selectionType
+type toggleGroupItem = Basefn__ToggleGroup.toggleItem
+type toggleGroupVariant = Basefn__ToggleGroup.variant
+type toggleGroupSize = Basefn__ToggleGroup.size
+type popoverPosition = Basefn__Popover.position
+type popoverAlign = Basefn__Popover.align
+type hoverCardPosition = Basefn__HoverCard.position
+type hoverCardAlign = Basefn__HoverCard.align
+type alertDialogVariant = Basefn__AlertDialog.variant
+type contextMenuItem = Basefn__ContextMenu.menuItem
+type contextMenuContent = Basefn__ContextMenu.menuContent
 type gridColumns = Basefn__Grid.columns
 type gridRows = Basefn__Grid.rows
 type gridAutoFlow = Basefn__Grid.autoFlow
@@ -174,3 +192,35 @@ module ThemeToggle = {
 module Icon = {
   include Basefn__Icon
 }
+
+// New shadcn-style components
+module Skeleton = {
+  include Basefn__Skeleton
+}
+module AspectRatio = {
+  include Basefn__AspectRatio
+}
+module ScrollArea = {
+  include Basefn__ScrollArea
+}
+module Toggle = {
+  include Basefn__Toggle
+}
+module ButtonGroup = {
+  include Basefn__ButtonGroup
+}
+module ToggleGroup = {
+  include Basefn__ToggleGroup
+}
+module Popover = {
+  include Basefn__Popover
+}
+module HoverCard = {
+  include Basefn__HoverCard
+}
+module AlertDialog = {
+  include Basefn__AlertDialog
+}
+module ContextMenu = {
+  include Basefn__ContextMenu
+}

package/src/Basefn.res.mjs

@@ -19,7 +19,9 @@ import * as Basefn__Drawer from "./components/Basefn__Drawer.res.mjs";
 import * as Basefn__Select from "./components/Basefn__Select.res.mjs";
 import * as Basefn__Slider from "./components/Basefn__Slider.res.mjs";
 import * as Basefn__Switch from "./components/Basefn__Switch.res.mjs";
+import * as Basefn__Toggle from "./components/Basefn__Toggle.res.mjs";
 import * as Basefn__Topbar from "./components/Basefn__Topbar.res.mjs";
+import * as Basefn__Popover from "./components/Basefn__Popover.res.mjs";
 import * as Basefn__Sidebar from "./components/Basefn__Sidebar.res.mjs";
 import * as Basefn__Spinner from "./components/Basefn__Spinner.res.mjs";
 import * as Basefn__Stepper from "./components/Basefn__Stepper.res.mjs";
@@ -27,14 +29,22 @@ import * as Basefn__Tooltip from "./components/Basefn__Tooltip.res.mjs";
 import * as Basefn__Checkbox from "./components/Basefn__Checkbox.res.mjs";
 import * as Basefn__Dropdown from "./components/Basefn__Dropdown.res.mjs";
 import * as Basefn__Progress from "./components/Basefn__Progress.res.mjs";
+import * as Basefn__Skeleton from "./components/Basefn__Skeleton.res.mjs";
 import * as Basefn__Textarea from "./components/Basefn__Textarea.res.mjs";
 import * as Basefn__Timeline from "./components/Basefn__Timeline.res.mjs";
 import * as Basefn__Accordion from "./components/Basefn__Accordion.res.mjs";
 import * as Basefn__AppLayout from "./components/Basefn__AppLayout.res.mjs";
+import * as Basefn__HoverCard from "./components/Basefn__HoverCard.res.mjs";
 import * as Basefn__Separator from "./components/Basefn__Separator.res.mjs";
 import * as Basefn__Breadcrumb from "./components/Basefn__Breadcrumb.res.mjs";
+import * as Basefn__ScrollArea from "./components/Basefn__ScrollArea.res.mjs";
 import * as Basefn__Typography from "./components/Basefn__Typography.res.mjs";
+import * as Basefn__AlertDialog from "./components/Basefn__AlertDialog.res.mjs";
+import * as Basefn__AspectRatio from "./components/Basefn__AspectRatio.res.mjs";
+import * as Basefn__ButtonGroup from "./components/Basefn__ButtonGroup.res.mjs";
+import * as Basefn__ContextMenu from "./components/Basefn__ContextMenu.res.mjs";
 import * as Basefn__ThemeToggle from "./components/Basefn__ThemeToggle.res.mjs";
+import * as Basefn__ToggleGroup from "./components/Basefn__ToggleGroup.res.mjs";
 
 import './basefn.css'
 ;
@@ -109,6 +119,26 @@ let ThemeToggle = Basefn__ThemeToggle;
 
 let Icon = Basefn__Icon;
 
+let Skeleton = Basefn__Skeleton;
+
+let AspectRatio = Basefn__AspectRatio;
+
+let ScrollArea = Basefn__ScrollArea;
+
+let Toggle = Basefn__Toggle;
+
+let ButtonGroup = Basefn__ButtonGroup;
+
+let ToggleGroup = Basefn__ToggleGroup;
+
+let Popover = Basefn__Popover;
+
+let HoverCard = Basefn__HoverCard;
+
+let AlertDialog = Basefn__AlertDialog;
+
+let ContextMenu = Basefn__ContextMenu;
+
 export {
   Button,
   Input,
@@ -145,5 +175,15 @@ export {
   Theme,
   ThemeToggle,
   Icon,
+  Skeleton,
+  AspectRatio,
+  ScrollArea,
+  Toggle,
+  ButtonGroup,
+  ToggleGroup,
+  Popover,
+  HoverCard,
+  AlertDialog,
+  ContextMenu,
 }
 /*  Not a pure module */

package/src/components/Basefn__AlertDialog.css

@@ -0,0 +1,119 @@
+@import '../styles/variables.css';
+
+.basefn-alert-dialog-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--basefn-surface-overlay);
+  animation: basefn-alert-dialog-backdrop-fade var(--basefn-transition-fast);
+}
+
+@keyframes basefn-alert-dialog-backdrop-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.basefn-alert-dialog {
+  background: var(--basefn-surface-elevated);
+  border-radius: var(--basefn-radius-xl);
+  box-shadow: var(--basefn-shadow-lg);
+  width: 100%;
+  max-width: 450px;
+  margin: var(--basefn-spacing-lg);
+  animation: basefn-alert-dialog-slide-up var(--basefn-transition-fast);
+}
+
+@keyframes basefn-alert-dialog-slide-up {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.basefn-alert-dialog__header {
+  padding: var(--basefn-spacing-xl) var(--basefn-spacing-xl) 0;
+}
+
+.basefn-alert-dialog__title {
+  margin: 0;
+  font-size: var(--basefn-font-size-lg);
+  font-weight: var(--basefn-font-weight-semibold);
+  color: var(--basefn-text-primary);
+  line-height: var(--basefn-line-height-tight);
+}
+
+.basefn-alert-dialog__body {
+  padding: var(--basefn-spacing-md) var(--basefn-spacing-xl);
+}
+
+.basefn-alert-dialog__description {
+  margin: 0;
+  font-size: var(--basefn-font-size-base);
+  color: var(--basefn-text-secondary);
+  line-height: var(--basefn-line-height-normal);
+}
+
+.basefn-alert-dialog__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--basefn-spacing-sm);
+  padding: var(--basefn-spacing-lg) var(--basefn-spacing-xl) var(--basefn-spacing-xl);
+}
+
+.basefn-alert-dialog__cancel,
+.basefn-alert-dialog__confirm {
+  padding: var(--basefn-spacing-sm) var(--basefn-spacing-lg);
+  font-family: var(--basefn-font-family);
+  font-size: var(--basefn-font-size-sm);
+  font-weight: var(--basefn-font-weight-medium);
+  border-radius: var(--basefn-radius-md);
+  cursor: pointer;
+  transition: all var(--basefn-transition-fast);
+}
+
+.basefn-alert-dialog__cancel {
+  background: transparent;
+  border: var(--basefn-border-width) solid var(--basefn-border-primary);
+  color: var(--basefn-text-primary);
+}
+
+.basefn-alert-dialog__cancel:hover {
+  background: var(--basefn-bg-tertiary);
+}
+
+.basefn-alert-dialog__confirm--default {
+  background: var(--basefn-color-primary);
+  border: none;
+  color: white;
+}
+
+.basefn-alert-dialog__confirm--default:hover {
+  background: var(--basefn-color-primary-hover);
+}
+
+.basefn-alert-dialog__confirm--destructive {
+  background: var(--basefn-color-error);
+  border: none;
+  color: white;
+}
+
+.basefn-alert-dialog__confirm--destructive:hover {
+  background: #dc2626;
+}
+
+.basefn-alert-dialog__cancel:focus-visible,
+.basefn-alert-dialog__confirm:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--basefn-focus-ring-width) var(--basefn-focus-ring-color);
+}

package/src/components/Basefn__AlertDialog.res

@@ -0,0 +1,80 @@
+%%raw(`import './Basefn__AlertDialog.css'`)
+
+open Xote
+
+type variant = Default | Destructive
+
+let variantToString = (variant: variant) => {
+  switch variant {
+  | Default => "default"
+  | Destructive => "destructive"
+  }
+}
+
+@jsx.component
+let make = (
+  ~isOpen: Signal.t<bool>,
+  ~title: string,
+  ~description: string,
+  ~confirmLabel: string="Confirm",
+  ~cancelLabel: string="Cancel",
+  ~onConfirm: unit => unit,
+  ~onCancel: unit => unit,
+  ~variant: variant=Default,
+  ~closeOnBackdrop: bool=false,
+) => {
+  let handleBackdropClick = evt => {
+    if closeOnBackdrop {
+      let target = Obj.magic(evt)["target"]
+      let currentTarget = Obj.magic(evt)["currentTarget"]
+      if target === currentTarget {
+        onCancel()
+      }
+    }
+  }
+
+  let handleCancel = _ => {
+    Signal.set(isOpen, false)
+    onCancel()
+  }
+
+  let handleConfirm = _ => {
+    Signal.set(isOpen, false)
+    onConfirm()
+  }
+
+  let getConfirmButtonClass = () => {
+    let baseClass = "basefn-alert-dialog__confirm"
+    let variantClass = " basefn-alert-dialog__confirm--" ++ variantToString(variant)
+    baseClass ++ variantClass
+  }
+
+  let content = Computed.make(() => {
+    if Signal.get(isOpen) {
+      [
+        <div class="basefn-alert-dialog-backdrop" onClick={handleBackdropClick}>
+          <div class="basefn-alert-dialog" role="alertdialog">
+            <div class="basefn-alert-dialog__header">
+              <h2 class="basefn-alert-dialog__title"> {Component.text(title)} </h2>
+            </div>
+            <div class="basefn-alert-dialog__body">
+              <p class="basefn-alert-dialog__description"> {Component.text(description)} </p>
+            </div>
+            <div class="basefn-alert-dialog__footer">
+              <button class="basefn-alert-dialog__cancel" onClick={handleCancel}>
+                {Component.text(cancelLabel)}
+              </button>
+              <button class={getConfirmButtonClass()} onClick={handleConfirm}>
+                {Component.text(confirmLabel)}
+              </button>
+            </div>
+          </div>
+        </div>,
+      ]
+    } else {
+      []
+    }
+  })
+
+  Component.signalFragment(content)
+}

package/src/components/Basefn__AlertDialog.res.mjs

@@ -0,0 +1,106 @@
+// 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__AlertDialog.css'
+;
+
+function variantToString(variant) {
+  if (variant === "Default") {
+    return "default";
+  } else {
+    return "destructive";
+  }
+}
+
+function Basefn__AlertDialog(props) {
+  let __closeOnBackdrop = props.closeOnBackdrop;
+  let __variant = props.variant;
+  let onCancel = props.onCancel;
+  let onConfirm = props.onConfirm;
+  let __cancelLabel = props.cancelLabel;
+  let __confirmLabel = props.confirmLabel;
+  let description = props.description;
+  let title = props.title;
+  let isOpen = props.isOpen;
+  let confirmLabel = __confirmLabel !== undefined ? __confirmLabel : "Confirm";
+  let cancelLabel = __cancelLabel !== undefined ? __cancelLabel : "Cancel";
+  let variant = __variant !== undefined ? __variant : "Default";
+  let closeOnBackdrop = __closeOnBackdrop !== undefined ? __closeOnBackdrop : false;
+  let handleBackdropClick = evt => {
+    if (!closeOnBackdrop) {
+      return;
+    }
+    let target = evt.target;
+    let currentTarget = evt.currentTarget;
+    if (target === currentTarget) {
+      return onCancel();
+    }
+  };
+  let handleCancel = param => {
+    Xote.Signal.set(isOpen, false);
+    onCancel();
+  };
+  let handleConfirm = param => {
+    Xote.Signal.set(isOpen, false);
+    onConfirm();
+  };
+  let getConfirmButtonClass = () => {
+    let variantClass = " basefn-alert-dialog__confirm--" + variantToString(variant);
+    return "basefn-alert-dialog__confirm" + variantClass;
+  };
+  return Xote.Component.signalFragment(Xote.Computed.make(() => {
+    if (Xote.Signal.get(isOpen)) {
+      return [Xote__JSX.Elements.jsx("div", {
+          class: "basefn-alert-dialog-backdrop",
+          onClick: handleBackdropClick,
+          children: Xote__JSX.Elements.jsxs("div", {
+            class: "basefn-alert-dialog",
+            role: "alertdialog",
+            children: Xote__JSX.array([
+              Xote__JSX.Elements.jsx("div", {
+                class: "basefn-alert-dialog__header",
+                children: Xote__JSX.Elements.jsx("h2", {
+                  class: "basefn-alert-dialog__title",
+                  children: Xote.Component.text(title)
+                })
+              }),
+              Xote__JSX.Elements.jsx("div", {
+                class: "basefn-alert-dialog__body",
+                children: Xote__JSX.Elements.jsx("p", {
+                  class: "basefn-alert-dialog__description",
+                  children: Xote.Component.text(description)
+                })
+              }),
+              Xote__JSX.Elements.jsxs("div", {
+                class: "basefn-alert-dialog__footer",
+                children: Xote__JSX.array([
+                  Xote__JSX.Elements.jsx("button", {
+                    class: "basefn-alert-dialog__cancel",
+                    onClick: handleCancel,
+                    children: Xote.Component.text(cancelLabel)
+                  }),
+                  Xote__JSX.Elements.jsx("button", {
+                    class: getConfirmButtonClass(),
+                    onClick: handleConfirm,
+                    children: Xote.Component.text(confirmLabel)
+                  })
+                ])
+              })
+            ])
+          })
+        })];
+    } else {
+      return [];
+    }
+  }, undefined));
+}
+
+let make = Basefn__AlertDialog;
+
+export {
+  variantToString,
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__AppLayout.css

@@ -148,4 +148,14 @@
   .basefn-app-layout--topbar-above.basefn-app-layout--topbar-lg .basefn-app-layout__sidebar-backdrop {
     top: 72px;
   }
+
+  /* Reduce content padding on mobile */
+  .basefn-app-layout__content-inner {
+    padding: 0.75rem 1rem;
+  }
+
+  /* Contained variant needs full width on mobile */
+  .basefn-app-layout--contained .basefn-app-layout__content-inner {
+    max-width: 100%;
+  }
 }

package/src/components/Basefn__AspectRatio.css

@@ -0,0 +1,16 @@
+@import '../styles/variables.css';
+
+.basefn-aspect-ratio {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.basefn-aspect-ratio > * {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

package/src/components/Basefn__AspectRatio.res

@@ -0,0 +1,26 @@
+%%raw(`import './Basefn__AspectRatio.css'`)
+
+open Xote
+
+@jsx.component
+let make = (
+  ~ratio: float=1.0,
+  ~className: option<string>=?,
+  ~children: Component.node,
+) => {
+  let getClassName = () => {
+    let baseClass = "basefn-aspect-ratio"
+    switch className {
+    | Some(c) => baseClass ++ " " ++ c
+    | None => baseClass
+    }
+  }
+
+  let getStyle = () => {
+    "aspect-ratio: " ++ Float.toString(ratio) ++ ";"
+  }
+
+  <div class={getClassName()} style={getStyle()}>
+    {children}
+  </div>
+}

package/src/components/Basefn__AspectRatio.res.mjs

@@ -0,0 +1,33 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Xote__JSX from "xote/src/Xote__JSX.res.mjs";
+
+import './Basefn__AspectRatio.css'
+;
+
+function Basefn__AspectRatio(props) {
+  let className = props.className;
+  let __ratio = props.ratio;
+  let ratio = __ratio !== undefined ? __ratio : 1.0;
+  let getClassName = () => {
+    let baseClass = "basefn-aspect-ratio";
+    if (className !== undefined) {
+      return baseClass + " " + className;
+    } else {
+      return baseClass;
+    }
+  };
+  let getStyle = () => "aspect-ratio: " + ratio.toString() + ";";
+  return Xote__JSX.Elements.jsx("div", {
+    class: getClassName(),
+    style: getStyle(),
+    children: props.children
+  });
+}
+
+let make = Basefn__AspectRatio;
+
+export {
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Button.css

@@ -1,4 +1,4 @@
-@import '../styles/variables.css';
+@import "../styles/variables.css";
 
 .basefn-button {
   display: inline-flex;
@@ -11,7 +11,7 @@
   height: var(--basefn-button-height);
   padding: 0 var(--basefn-button-padding-x);
   border: var(--basefn-border-width) solid transparent;
-  border-radius: var(--basefn-radius-lg);
+  border-radius: var(--basefn-radius-xl);
   cursor: pointer;
   transition: all var(--basefn-transition-fast);
   outline: none;
@@ -64,7 +64,6 @@
   background-color: transparent;
   border-color: transparent;
   border: 0;
-  padding: 0;
   color: var(--basefn-text-tertiary);
 }
 

package/src/components/Basefn__ButtonGroup.css

@@ -0,0 +1,58 @@
+@import '../styles/variables.css';
+
+.basefn-button-group {
+  display: inline-flex;
+}
+
+/* Horizontal orientation */
+.basefn-button-group--horizontal {
+  flex-direction: row;
+}
+
+.basefn-button-group--horizontal > :first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.basefn-button-group--horizontal > :last-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.basefn-button-group--horizontal > :not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+
+.basefn-button-group--horizontal > :not(:first-child) {
+  margin-left: -1px;
+}
+
+/* Vertical orientation */
+.basefn-button-group--vertical {
+  flex-direction: column;
+}
+
+.basefn-button-group--vertical > :first-child {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.basefn-button-group--vertical > :last-child {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.basefn-button-group--vertical > :not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+
+.basefn-button-group--vertical > :not(:first-child) {
+  margin-top: -1px;
+}
+
+/* Ensure proper z-index on hover/focus */
+.basefn-button-group > *:hover,
+.basefn-button-group > *:focus {
+  z-index: 1;
+  position: relative;
+}

package/src/components/Basefn__ButtonGroup.res

@@ -0,0 +1,33 @@
+%%raw(`import './Basefn__ButtonGroup.css'`)
+
+open Xote
+
+type orientation = Horizontal | Vertical
+
+let orientationToString = (orientation: orientation) => {
+  switch orientation {
+  | Horizontal => "horizontal"
+  | Vertical => "vertical"
+  }
+}
+
+@jsx.component
+let make = (
+  ~orientation: orientation=Horizontal,
+  ~className: option<string>=?,
+  ~children: Component.node,
+) => {
+  let getClassName = () => {
+    let baseClass = "basefn-button-group"
+    let orientationClass = " basefn-button-group--" ++ orientationToString(orientation)
+    let customClass = switch className {
+    | Some(c) => " " ++ c
+    | None => ""
+    }
+    baseClass ++ orientationClass ++ customClass
+  }
+
+  <div class={getClassName()} role="group">
+    {children}
+  </div>
+}