basefn 1.2.0 → 1.4.0

package/src/components/Basefn__Skeleton.css

@@ -0,0 +1,83 @@
+@import '../styles/variables.css';
+
+.basefn-skeleton {
+  background-color: var(--basefn-bg-tertiary);
+  display: block;
+}
+
+/* Variants */
+.basefn-skeleton--text {
+  height: 1em;
+  width: 100%;
+  border-radius: var(--basefn-radius-sm);
+}
+
+.basefn-skeleton--circular {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--basefn-radius-full);
+}
+
+.basefn-skeleton--rectangular {
+  width: 100%;
+  height: 100px;
+  border-radius: var(--basefn-radius-md);
+}
+
+/* Animations */
+@keyframes basefn-skeleton-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes basefn-skeleton-wave {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.basefn-skeleton--pulse {
+  animation: basefn-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.basefn-skeleton--wave {
+  position: relative;
+  overflow: hidden;
+}
+
+.basefn-skeleton--wave::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.3),
+    transparent
+  );
+  animation: basefn-skeleton-wave 1.5s infinite;
+}
+
+.basefn-skeleton--none {
+  animation: none;
+}
+
+/* Dark mode wave adjustment */
+[data-theme="dark"] .basefn-skeleton--wave::after {
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.1),
+    transparent
+  );
+}

package/src/components/Basefn__Skeleton.res

@@ -0,0 +1,55 @@
+%%raw(`import './Basefn__Skeleton.css'`)
+
+type variant = Text | Circular | Rectangular
+
+type animation = Pulse | Wave | None
+
+let variantToString = (variant: variant) => {
+  switch variant {
+  | Text => "text"
+  | Circular => "circular"
+  | Rectangular => "rectangular"
+  }
+}
+
+let animationToString = (animation: animation) => {
+  switch animation {
+  | Pulse => "pulse"
+  | Wave => "wave"
+  | None => "none"
+  }
+}
+
+@jsx.component
+let make = (
+  ~variant: variant=Rectangular,
+  ~animation: animation=Pulse,
+  ~width: option<string>=?,
+  ~height: option<string>=?,
+  ~className: option<string>=?,
+) => {
+  let getClassName = () => {
+    let baseClass = "basefn-skeleton"
+    let variantClass = " basefn-skeleton--" ++ variantToString(variant)
+    let animationClass = " basefn-skeleton--" ++ animationToString(animation)
+    let customClass = switch className {
+    | Some(c) => " " ++ c
+    | None => ""
+    }
+    baseClass ++ variantClass ++ animationClass ++ customClass
+  }
+
+  let getStyle = () => {
+    let widthStyle = switch width {
+    | Some(w) => "width: " ++ w ++ ";"
+    | None => ""
+    }
+    let heightStyle = switch height {
+    | Some(h) => "height: " ++ h ++ ";"
+    | None => ""
+    }
+    widthStyle ++ heightStyle
+  }
+
+  <div class={getClassName()} style={getStyle()} />
+}

package/src/components/Basefn__Skeleton.res.mjs

@@ -0,0 +1,62 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Xote__JSX from "xote/src/Xote__JSX.res.mjs";
+
+import './Basefn__Skeleton.css'
+;
+
+function variantToString(variant) {
+  switch (variant) {
+    case "Text" :
+      return "text";
+    case "Circular" :
+      return "circular";
+    case "Rectangular" :
+      return "rectangular";
+  }
+}
+
+function animationToString(animation) {
+  switch (animation) {
+    case "Pulse" :
+      return "pulse";
+    case "Wave" :
+      return "wave";
+    case "None" :
+      return "none";
+  }
+}
+
+function Basefn__Skeleton(props) {
+  let className = props.className;
+  let height = props.height;
+  let width = props.width;
+  let __animation = props.animation;
+  let __variant = props.variant;
+  let variant = __variant !== undefined ? __variant : "Rectangular";
+  let animation = __animation !== undefined ? __animation : "Pulse";
+  let getClassName = () => {
+    let variantClass = " basefn-skeleton--" + variantToString(variant);
+    let animationClass = " basefn-skeleton--" + animationToString(animation);
+    let customClass = className !== undefined ? " " + className : "";
+    return "basefn-skeleton" + variantClass + animationClass + customClass;
+  };
+  let getStyle = () => {
+    let widthStyle = width !== undefined ? "width: " + width + ";" : "";
+    let heightStyle = height !== undefined ? "height: " + height + ";" : "";
+    return widthStyle + heightStyle;
+  };
+  return Xote__JSX.Elements.jsx("div", {
+    class: getClassName(),
+    style: getStyle()
+  });
+}
+
+let make = Basefn__Skeleton;
+
+export {
+  variantToString,
+  animationToString,
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Stepper.css

@@ -139,3 +139,39 @@
 .basefn-stepper__step--clickable .basefn-stepper__step-indicator:hover {
   transform: scale(1.05);
 }
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+  .basefn-stepper--horizontal {
+    flex-direction: column;
+  }
+
+  .basefn-stepper--horizontal .basefn-stepper__step {
+    flex-direction: row;
+    margin-bottom: 2rem;
+  }
+
+  .basefn-stepper--horizontal .basefn-stepper__step:last-child {
+    margin-bottom: 0;
+  }
+
+  .basefn-stepper--horizontal .basefn-stepper__step-header {
+    flex-direction: row;
+    text-align: left;
+  }
+
+  .basefn-stepper--horizontal .basefn-stepper__connector {
+    width: 2px;
+    height: auto;
+    left: 1.25rem;
+    top: 2.5rem;
+    bottom: -2rem;
+    transform: none;
+  }
+
+  .basefn-stepper__step-indicator {
+    width: 2rem;
+    height: 2rem;
+    font-size: 0.75rem;
+  }
+}

package/src/components/Basefn__Tabs.css

@@ -52,3 +52,21 @@
     transform: translateY(0);
   }
 }
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+  .basefn-tabs__list {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+
+  .basefn-tabs__list::-webkit-scrollbar {
+    display: none;
+  }
+
+  .basefn-tabs__trigger {
+    padding: 0.625rem 1rem;
+    font-size: 0.8125rem;
+  }
+}

package/src/components/Basefn__Toggle.css

@@ -0,0 +1,87 @@
+@import '../styles/variables.css';
+
+.basefn-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  cursor: pointer;
+  font-family: var(--basefn-font-family);
+  font-weight: var(--basefn-font-weight-medium);
+  transition: all var(--basefn-transition-fast);
+  border-radius: var(--basefn-radius-md);
+  background: transparent;
+  color: var(--basefn-text-secondary);
+}
+
+.basefn-toggle:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--basefn-focus-ring-width) var(--basefn-focus-ring-color);
+}
+
+/* Sizes */
+.basefn-toggle--sm {
+  height: var(--basefn-button-height-sm);
+  padding: 0 var(--basefn-spacing-sm);
+  font-size: var(--basefn-font-size-sm);
+  gap: var(--basefn-spacing-xs);
+}
+
+.basefn-toggle--md {
+  height: var(--basefn-button-height);
+  padding: 0 var(--basefn-spacing-md);
+  font-size: var(--basefn-font-size-base);
+  gap: var(--basefn-spacing-sm);
+}
+
+.basefn-toggle--lg {
+  height: var(--basefn-button-height-lg);
+  padding: 0 var(--basefn-spacing-lg);
+  font-size: var(--basefn-font-size-lg);
+  gap: var(--basefn-spacing-sm);
+}
+
+/* Default variant */
+.basefn-toggle--default {
+  background: transparent;
+}
+
+.basefn-toggle--default:hover:not(.basefn-toggle--disabled) {
+  background: var(--basefn-bg-tertiary);
+  color: var(--basefn-text-primary);
+}
+
+.basefn-toggle--default.basefn-toggle--pressed {
+  background: var(--basefn-bg-tertiary);
+  color: var(--basefn-text-primary);
+}
+
+/* Outline variant */
+.basefn-toggle--outline {
+  background: transparent;
+  border: var(--basefn-border-width) solid var(--basefn-border-primary);
+}
+
+.basefn-toggle--outline:hover:not(.basefn-toggle--disabled) {
+  background: var(--basefn-bg-tertiary);
+  border-color: var(--basefn-border-secondary);
+  color: var(--basefn-text-primary);
+}
+
+.basefn-toggle--outline.basefn-toggle--pressed {
+  background: var(--basefn-bg-tertiary);
+  border-color: var(--basefn-color-primary);
+  color: var(--basefn-text-primary);
+}
+
+/* Disabled state */
+.basefn-toggle--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Icons in toggle */
+.basefn-toggle svg {
+  width: 1em;
+  height: 1em;
+}

package/src/components/Basefn__Toggle.res

@@ -0,0 +1,65 @@
+%%raw(`import './Basefn__Toggle.css'`)
+
+open Xote
+
+type variant = Default | Outline
+
+type size = Sm | Md | Lg
+
+let variantToString = (variant: variant) => {
+  switch variant {
+  | Default => "default"
+  | Outline => "outline"
+  }
+}
+
+let sizeToString = (size: size) => {
+  switch size {
+  | Sm => "sm"
+  | Md => "md"
+  | Lg => "lg"
+  }
+}
+
+@jsx.component
+let make = (
+  ~pressed: Signal.t<bool>,
+  ~onPressedChange: option<bool => unit>=?,
+  ~variant: variant=Default,
+  ~size: size=Md,
+  ~disabled: bool=false,
+  ~className: option<string>=?,
+  ~children: Component.node,
+) => {
+  let handleClick = _ => {
+    if !disabled {
+      let newValue = !Signal.get(pressed)
+      Signal.set(pressed, newValue)
+      switch onPressedChange {
+      | Some(callback) => callback(newValue)
+      | None => ()
+      }
+    }
+  }
+
+  let computedClassName = Computed.make(() => {
+    let baseClass = "basefn-toggle"
+    let variantClass = " basefn-toggle--" ++ variantToString(variant)
+    let sizeClass = " basefn-toggle--" ++ sizeToString(size)
+    let pressedClass = Signal.get(pressed) ? " basefn-toggle--pressed" : ""
+    let disabledClass = disabled ? " basefn-toggle--disabled" : ""
+    let customClass = switch className {
+    | Some(c) => " " ++ c
+    | None => ""
+    }
+    baseClass ++ variantClass ++ sizeClass ++ pressedClass ++ disabledClass ++ customClass
+  })
+
+  <button
+    class={computedClassName}
+    onClick={handleClick}
+    disabled={disabled}
+  >
+    {children}
+  </button>
+}

package/src/components/Basefn__Toggle.res.mjs

@@ -0,0 +1,71 @@
+// 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__Toggle.css'
+;
+
+function variantToString(variant) {
+  if (variant === "Default") {
+    return "default";
+  } else {
+    return "outline";
+  }
+}
+
+function sizeToString(size) {
+  switch (size) {
+    case "Sm" :
+      return "sm";
+    case "Md" :
+      return "md";
+    case "Lg" :
+      return "lg";
+  }
+}
+
+function Basefn__Toggle(props) {
+  let className = props.className;
+  let __disabled = props.disabled;
+  let __size = props.size;
+  let __variant = props.variant;
+  let onPressedChange = props.onPressedChange;
+  let pressed = props.pressed;
+  let variant = __variant !== undefined ? __variant : "Default";
+  let size = __size !== undefined ? __size : "Md";
+  let disabled = __disabled !== undefined ? __disabled : false;
+  let handleClick = param => {
+    if (disabled) {
+      return;
+    }
+    let newValue = !Xote.Signal.get(pressed);
+    Xote.Signal.set(pressed, newValue);
+    if (onPressedChange !== undefined) {
+      return onPressedChange(newValue);
+    }
+  };
+  let computedClassName = Xote.Computed.make(() => {
+    let variantClass = " basefn-toggle--" + variantToString(variant);
+    let sizeClass = " basefn-toggle--" + sizeToString(size);
+    let pressedClass = Xote.Signal.get(pressed) ? " basefn-toggle--pressed" : "";
+    let disabledClass = disabled ? " basefn-toggle--disabled" : "";
+    let customClass = className !== undefined ? " " + className : "";
+    return "basefn-toggle" + variantClass + sizeClass + pressedClass + disabledClass + customClass;
+  }, undefined);
+  return Xote__JSX.Elements.jsx("button", {
+    class: computedClassName,
+    disabled: disabled,
+    onClick: handleClick,
+    children: props.children
+  });
+}
+
+let make = Basefn__Toggle;
+
+export {
+  variantToString,
+  sizeToString,
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__ToggleGroup.css

@@ -0,0 +1,110 @@
+@import '../styles/variables.css';
+
+.basefn-toggle-group {
+  display: inline-flex;
+  gap: 0;
+}
+
+.basefn-toggle-group__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  cursor: pointer;
+  font-family: var(--basefn-font-family);
+  font-weight: var(--basefn-font-weight-medium);
+  transition: all var(--basefn-transition-fast);
+  background: transparent;
+  color: var(--basefn-text-secondary);
+}
+
+.basefn-toggle-group__item:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--basefn-focus-ring-width) var(--basefn-focus-ring-color);
+  z-index: 1;
+  position: relative;
+}
+
+/* First item */
+.basefn-toggle-group__item:first-child {
+  border-top-left-radius: var(--basefn-radius-md);
+  border-bottom-left-radius: var(--basefn-radius-md);
+}
+
+/* Last item */
+.basefn-toggle-group__item:last-child {
+  border-top-right-radius: var(--basefn-radius-md);
+  border-bottom-right-radius: var(--basefn-radius-md);
+}
+
+/* Middle items */
+.basefn-toggle-group__item:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+
+/* Sizes */
+.basefn-toggle-group__item--sm {
+  height: var(--basefn-button-height-sm);
+  padding: 0 var(--basefn-spacing-sm);
+  font-size: var(--basefn-font-size-sm);
+}
+
+.basefn-toggle-group__item--md {
+  height: var(--basefn-button-height);
+  padding: 0 var(--basefn-spacing-md);
+  font-size: var(--basefn-font-size-base);
+}
+
+.basefn-toggle-group__item--lg {
+  height: var(--basefn-button-height-lg);
+  padding: 0 var(--basefn-spacing-lg);
+  font-size: var(--basefn-font-size-lg);
+}
+
+/* Default variant */
+.basefn-toggle-group__item--default {
+  background: var(--basefn-bg-secondary);
+  border: var(--basefn-border-width) solid var(--basefn-border-primary);
+}
+
+.basefn-toggle-group__item--default:not(:first-child) {
+  margin-left: -1px;
+}
+
+.basefn-toggle-group__item--default:hover:not(.basefn-toggle-group__item--disabled) {
+  background: var(--basefn-bg-tertiary);
+  color: var(--basefn-text-primary);
+}
+
+.basefn-toggle-group__item--default.basefn-toggle-group__item--pressed {
+  background: var(--basefn-bg-tertiary);
+  color: var(--basefn-text-primary);
+}
+
+/* Outline variant */
+.basefn-toggle-group__item--outline {
+  background: transparent;
+  border: var(--basefn-border-width) solid var(--basefn-border-primary);
+}
+
+.basefn-toggle-group__item--outline:not(:first-child) {
+  margin-left: -1px;
+}
+
+.basefn-toggle-group__item--outline:hover:not(.basefn-toggle-group__item--disabled) {
+  background: var(--basefn-bg-tertiary);
+  border-color: var(--basefn-border-secondary);
+  color: var(--basefn-text-primary);
+}
+
+.basefn-toggle-group__item--outline.basefn-toggle-group__item--pressed {
+  background: var(--basefn-bg-tertiary);
+  border-color: var(--basefn-color-primary);
+  color: var(--basefn-text-primary);
+}
+
+/* Disabled state */
+.basefn-toggle-group__item--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/src/components/Basefn__ToggleGroup.res

@@ -0,0 +1,106 @@
+%%raw(`import './Basefn__ToggleGroup.css'`)
+
+open Xote
+
+type selectionType = Single | Multiple
+
+type toggleItem = {
+  value: string,
+  label: string,
+  disabled?: bool,
+}
+
+type variant = Default | Outline
+
+type size = Sm | Md | Lg
+
+let variantToString = (variant: variant) => {
+  switch variant {
+  | Default => "default"
+  | Outline => "outline"
+  }
+}
+
+let sizeToString = (size: size) => {
+  switch size {
+  | Sm => "sm"
+  | Md => "md"
+  | Lg => "lg"
+  }
+}
+
+@jsx.component
+let make = (
+  ~type_: selectionType=Single,
+  ~value: Signal.t<array<string>>,
+  ~items: array<toggleItem>,
+  ~onValueChange: option<array<string> => unit>=?,
+  ~variant: variant=Default,
+  ~size: size=Md,
+  ~className: option<string>=?,
+) => {
+  let handleItemClick = (itemValue: string, itemDisabled: bool) => {
+    if !itemDisabled {
+      let currentValues = Signal.get(value)
+      let newValues = switch type_ {
+      | Single =>
+        if Array.includes(currentValues, itemValue) {
+          []
+        } else {
+          [itemValue]
+        }
+      | Multiple =>
+        if Array.includes(currentValues, itemValue) {
+          currentValues->Array.filter(v => v !== itemValue)
+        } else {
+          Array.concat(currentValues, [itemValue])
+        }
+      }
+      Signal.set(value, newValues)
+      switch onValueChange {
+      | Some(callback) => callback(newValues)
+      | None => ()
+      }
+    }
+  }
+
+  let getGroupClassName = () => {
+    let baseClass = "basefn-toggle-group"
+    let customClass = switch className {
+    | Some(c) => " " ++ c
+    | None => ""
+    }
+    baseClass ++ customClass
+  }
+
+  let getItemClassName = (itemValue: string, itemDisabled: bool) => {
+    Computed.make(() => {
+      let baseClass = "basefn-toggle-group__item"
+      let variantClass = " basefn-toggle-group__item--" ++ variantToString(variant)
+      let sizeClass = " basefn-toggle-group__item--" ++ sizeToString(size)
+      let currentValues = Signal.get(value)
+      let pressedClass = Array.includes(currentValues, itemValue) ? " basefn-toggle-group__item--pressed" : ""
+      let disabledClass = itemDisabled ? " basefn-toggle-group__item--disabled" : ""
+      baseClass ++ variantClass ++ sizeClass ++ pressedClass ++ disabledClass
+    })
+  }
+
+  <div class={getGroupClassName()} role="group">
+    {items
+    ->Array.map(item => {
+      let isDisabled = switch item.disabled {
+      | Some(d) => d
+      | None => false
+      }
+      <button
+        key={item.value}
+        class={getItemClassName(item.value, isDisabled)}
+        onClick={_ => handleItemClick(item.value, isDisabled)}
+        disabled={isDisabled}
+      >
+        {Component.text(item.label)}
+      </button>
+    })
+    ->Component.fragment}
+  </div>
+}