@blenx-dev/core 0.1.0 → 0.2.3

package/src/DataTable/use-infinite-scroll.ts

@@ -1,67 +0,0 @@
-import { type RefObject, useCallback, useEffect, useRef } from "react";
-
-interface UseInfiniteScrollOptions {
-  /** Whether there are more pages to load */
-  hasNextPage: boolean;
-  /** Whether a fetch is currently in progress */
-  isFetchingNextPage: boolean;
-  /** Function to fetch the next page */
-  fetchNextPage: () => void;
-  /** IntersectionObserver root margin. Default: "200px" */
-  rootMargin?: string;
-  /** IntersectionObserver threshold. Default: 0 */
-  threshold?: number;
-  /** If true, the observer is disabled */
-  enabled?: boolean;
-}
-
-interface UseInfiniteScrollReturn {
-  /** Ref to attach to the sentinel element */
-  sentinelRef: RefObject<HTMLDivElement | null>;
-}
-
-/**
- * Hook to observe a sentinel element and trigger fetchNextPage when visible.
- *
- * Uses IntersectionObserver with a configurable root margin and threshold.
- * Respects hasNextPage, isFetchingNextPage, and enabled state to prevent
- * duplicate requests.
- */
-export function useInfiniteScroll({
-  hasNextPage,
-  isFetchingNextPage,
-  fetchNextPage,
-  rootMargin = "200px",
-  threshold = 0,
-  enabled = true,
-}: UseInfiniteScrollOptions): UseInfiniteScrollReturn {
-  const sentinelRef = useRef<HTMLDivElement | null>(null);
-
-  const handleIntersection = useCallback(
-    (entries: IntersectionObserverEntry[]) => {
-      const [entry] = entries;
-      if (entry?.isIntersecting && hasNextPage && !isFetchingNextPage) {
-        fetchNextPage();
-      }
-    },
-    [hasNextPage, isFetchingNextPage, fetchNextPage],
-  );
-
-  useEffect(() => {
-    const sentinel = sentinelRef.current;
-    if (!sentinel || !enabled) return;
-
-    const observer = new IntersectionObserver(handleIntersection, {
-      rootMargin,
-      threshold,
-    });
-
-    observer.observe(sentinel);
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [enabled, handleIntersection, rootMargin, threshold]);
-
-  return { sentinelRef };
-}

package/src/components/Calendar/calendar.css.ts

@@ -1,187 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
-
-export const root = style({
-  display: "inline-block",
-  width: "100%",
-});
-
-export const months = style({
-  display: "flex",
-  flexDirection: "column",
-});
-
-export const monthCaption = style({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  position: "relative",
-  paddingBottom: tokenVars.spacing.sm,
-  minHeight: 40,
-});
-
-export const captionLabel = style({
-  fontSize: tokenVars.fontSize.md,
-  fontWeight: tokenVars.fontWeight.semibold,
-  color: semanticVars.text.primary,
-  margin: 0,
-  padding: 0,
-});
-
-export const nav = style({
-  height: "fit-content",
-  display: "flex",
-  justifyContent: "space-between",
-  alignItems: "center",
-  position: "absolute",
-  inset: 0,
-  padding: tokenVars.spacing.xs,
-  pointerEvents: "none",
-  zIndex: 10,
-});
-
-export const buttonNav = style({
-  pointerEvents: "auto",
-  appearance: "none",
-  backgroundColor: "transparent",
-  border: "none",
-  padding: 0,
-  font: "inherit",
-  WebkitTapHighlightColor: "transparent",
-  width: 28,
-  height: 28,
-  borderRadius: tokenVars.borderRadius.default,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  color: semanticVars.text.secondary,
-  cursor: "pointer",
-  flexShrink: 0,
-  selectors: {
-    "&:hover": {
-      backgroundColor: semanticVars.background.subtle,
-    },
-    "&:focus-visible": {
-      boxShadow: `0 0 0 2px ${semanticVars.focus.ring}`,
-    },
-  },
-});
-
-export const monthGrid = style({
-  width: "100%",
-  borderCollapse: "collapse",
-});
-
-export const weekday = style({
-  fontSize: tokenVars.fontSize.xs,
-  fontWeight: tokenVars.fontWeight.medium,
-  color: semanticVars.text.secondary,
-  textAlign: "center",
-  verticalAlign: "middle",
-  padding: tokenVars.spacing.xxs,
-  width: 40,
-  height: 32,
-  boxSizing: "border-box",
-});
-
-export const day = style({
-  textAlign: "center",
-  verticalAlign: "middle",
-  padding: 1,
-  width: 40,
-  height: 40,
-  boxSizing: "border-box",
-});
-
-export const dayButton = style({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: "100%",
-  height: "100%",
-  minWidth: 32,
-  minHeight: 32,
-  maxWidth: 36,
-  maxHeight: 36,
-  borderRadius: tokenVars.borderRadius.default,
-  border: "none",
-  backgroundColor: "transparent",
-  cursor: "pointer",
-  fontSize: tokenVars.fontSize.sm,
-  color: semanticVars.text.primary,
-  outline: "none",
-  margin: "0 auto",
-  padding: 0,
-  fontFamily: "inherit",
-  lineHeight: 1,
-  transitionProperty: "background-color, color",
-  transitionDuration: "100ms",
-  transitionTimingFunction: "ease",
-  selectors: {
-    "&:hover": {
-      backgroundColor: semanticVars.background.subtle,
-    },
-    "&:focus-visible": {
-      boxShadow: `0 0 0 2px ${semanticVars.focus.ring}`,
-    },
-  },
-});
-
-export const dayButtonSelected = style({
-  backgroundColor: semanticVars.interactive.primary.default,
-  color: semanticVars.interactive.primaryFg,
-  fontWeight: tokenVars.fontWeight.semibold,
-  selectors: {
-    "&:hover": {
-      backgroundColor: semanticVars.interactive.primary.default,
-    },
-  },
-});
-
-export const dayButtonToday = style({
-  fontWeight: tokenVars.fontWeight.semibold,
-});
-
-export const dayButtonDisabled = style({
-  color: semanticVars.text.disabled,
-  cursor: "not-allowed",
-  opacity: 0.5,
-  selectors: {
-    "&:hover": {
-      backgroundColor: "transparent",
-    },
-  },
-});
-
-export const dayButtonOutside = style({
-  color: semanticVars.text.disabled,
-  opacity: 0.5,
-});
-
-export const footer = style({
-  paddingTop: tokenVars.spacing.sm,
-});
-
-export const dropdowns = style({
-  display: "flex",
-  gap: tokenVars.spacing.xs,
-  alignItems: "center",
-});
-
-export const dropdown = style({
-  appearance: "none",
-  backgroundColor: semanticVars.background.subtle,
-  border: `1px solid ${semanticVars.border.default}`,
-  borderRadius: tokenVars.borderRadius.default,
-  color: semanticVars.text.primary,
-  fontSize: tokenVars.fontSize.sm,
-  padding: `${tokenVars.spacing.xxs} ${tokenVars.spacing.sm}`,
-  cursor: "pointer",
-  outline: "none",
-  selectors: {
-    "&:focus-visible": {
-      borderColor: semanticVars.border.strong,
-      boxShadow: `0 0 0 2px ${semanticVars.border.strong}`,
-    },
-  },
-});

package/src/components/Calendar/calendar.tsx

@@ -1,143 +0,0 @@
-"use client";
-
-import { CaretLeftIcon, CaretRightIcon, CaretUpDownIcon } from "@phosphor-icons/react";
-import clsx from "clsx";
-import { useEffect, useRef } from "react";
-import { DayPicker, type DayPickerProps } from "react-day-picker";
-import { Button } from "../Button/button";
-import {
-  root,
-  months,
-  monthCaption,
-  captionLabel,
-  nav,
-  buttonNav,
-  monthGrid,
-  weekday,
-  day,
-  dayButton,
-  dayButtonSelected,
-  dayButtonToday,
-  dayButtonDisabled,
-  dayButtonOutside,
-  footer,
-  dropdowns,
-  dropdown,
-} from "./calendar.css";
-
-function StyledDayButton({
-  day: _day,
-  modifiers,
-  className,
-  ...props
-}: {
-  day: object;
-  modifiers: Record<string, boolean>;
-} & React.ComponentPropsWithoutRef<"button">) {
-  const ref = useRef<HTMLButtonElement>(null);
-
-  useEffect(() => {
-    if (modifiers.focused) {
-      ref.current?.focus();
-    }
-  }, [modifiers.focused]);
-
-  const isSelected = modifiers.selected;
-  const isToday = modifiers.today;
-  const isDisabled = modifiers.disabled;
-  const isOutside = modifiers.outside;
-
-  const composed = clsx(
-    dayButton,
-    isSelected && dayButtonSelected,
-    isToday && dayButtonToday,
-    isDisabled && dayButtonDisabled,
-    isOutside && dayButtonOutside,
-    className,
-  );
-
-  return <button ref={ref} className={composed} {...props} />;
-}
-
-function Calendar({ className, components: userComponents, ...props }: DayPickerProps) {
-  const classNames = {
-    root: clsx(root, className),
-    months: months,
-    month: "",
-    month_caption: monthCaption,
-    caption_label: captionLabel,
-    nav: nav,
-    button_previous: buttonNav,
-    button_next: buttonNav,
-    chevron: "",
-    month_grid: monthGrid,
-    weekdays: "",
-    weekday: weekday,
-    weeks: "",
-    week: "",
-    day: day,
-    day_button: "",
-    footer: footer,
-    dropdowns: dropdowns,
-    dropdown: dropdown,
-    dropdown_root: "",
-    months_dropdown: "",
-    years_dropdown: "",
-    week_number: "",
-    week_number_header: "",
-    selected: "",
-    today: "",
-    disabled: "",
-    hidden: "",
-    outside: "",
-    focused: "",
-    range_start: "",
-    range_end: "",
-    range_middle: "",
-    weeks_before_enter: "",
-    weeks_before_exit: "",
-    weeks_after_enter: "",
-    weeks_after_exit: "",
-    caption_after_enter: "",
-    caption_after_exit: "",
-    caption_before_enter: "",
-    caption_before_exit: "",
-  };
-  const defaultComponents = {
-    Chevron: ({
-      orientation,
-      ...chevronProps
-    }: {
-      orientation?: "left" | "right" | "up" | "down";
-    }): React.ReactElement => {
-      if (orientation === "left") {
-        return (
-          <Button size="icon" variant="ghost">
-            <CaretLeftIcon {...chevronProps} aria-hidden="true" />
-          </Button>
-        );
-      }
-      if (orientation === "right") {
-        return (
-          <Button size="icon" variant="ghost">
-            <CaretRightIcon {...chevronProps} aria-hidden="true" />
-          </Button>
-        );
-      }
-      return (
-        <Button size="icon" variant="ghost">
-          <CaretUpDownIcon {...chevronProps} aria-hidden="true" />
-        </Button>
-      );
-    },
-  };
-  const mergedComponents = {
-    ...defaultComponents,
-    ...userComponents,
-    DayButton: StyledDayButton,
-  };
-
-  return <DayPicker classNames={classNames} components={mergedComponents} {...props} />;
-}
-
-export { Calendar };

package/src/components/Calendar/index.ts

@@ -1 +0,0 @@
-export * from "./calendar";

package/src/components/ColorPicker/color-picker.tsx

@@ -1,123 +0,0 @@
-import { CaretDownIcon } from "@phosphor-icons/react";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { HexAlphaColorPicker, HexColorInput } from "react-colorful";
-import { Button } from "../Button/button";
-import { ColorSwatch } from "../ColorSwatch/color-swatch";
-import { Field, FieldLabel } from "../Field/field";
-import { Input } from "../Input/input";
-import {
-  Popover,
-  PopoverArrow,
-  PopoverCompound,
-  PopoverPopup,
-  PopoverPositioner,
-  PopoverTrigger,
-} from "../Popover/popover";
-import { VStack } from "../Stack/stack";
-import { Text } from "../Text/text";
-
-const HEX_REGEX = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
-
-type Props = {
-  value: string;
-  onChange: (color: string) => void;
-  label?: string;
-};
-
-export function ColorPicker({ value, onChange, label }: Props) {
-  const [open, setOpen] = useState(false);
-  const [internalValue, setInternalValue] = useState(value);
-  const lastValidRef = useRef(value);
-  const triggerRef = useRef<HTMLButtonElement>(null);
-  const prevValueRef = useRef(value);
-
-  useEffect(() => {
-    if (prevValueRef.current !== value) {
-      prevValueRef.current = value;
-      setInternalValue(value);
-      lastValidRef.current = value;
-    }
-  }, [value]);
-
-  const handleOpenChange = useCallback((nextOpen: boolean) => {
-    if (!nextOpen && triggerRef.current) {
-      triggerRef.current.focus();
-    }
-    setOpen(nextOpen);
-  }, []);
-
-  const handleHexInputChange = useCallback(
-    (newColor: string) => {
-      setInternalValue(newColor);
-      if (HEX_REGEX.test(newColor)) {
-        lastValidRef.current = newColor;
-        onChange(newColor);
-      }
-    },
-    [onChange],
-  );
-
-  const revertToLastValid = useCallback(() => {
-    setInternalValue(lastValidRef.current);
-    onChange(lastValidRef.current);
-  }, [onChange]);
-
-  return (
-    <Field>
-      <Popover open={open} onOpenChange={handleOpenChange}>
-        {label && (
-          <FieldLabel
-            onClick={() => {
-              triggerRef.current?.click();
-              triggerRef.current?.focus();
-            }}
-          >
-            {label}
-          </FieldLabel>
-        )}
-        <PopoverTrigger
-          ref={triggerRef}
-          aria-label={label ? `${label} color picker` : "Color picker"}
-          render={<Button type="button" variant="outline" />}
-        >
-          <ColorSwatch color={value} size={20} />
-          <Text variant="body2">{value}</Text>
-          <CaretDownIcon />
-        </PopoverTrigger>
-        <PopoverCompound.Portal>
-          <PopoverPositioner sideOffset={6} side="bottom" align="start">
-            <PopoverPopup>
-              <PopoverArrow />
-              <VStack gap="xs">
-                <HexAlphaColorPicker
-                  color={internalValue}
-                  onChange={(color) => {
-                    setInternalValue(color);
-                    lastValidRef.current = color;
-                    onChange(color);
-                  }}
-                />
-                <Input
-                  size="sm"
-                  render={
-                    <HexColorInput
-                      color={internalValue}
-                      onChange={handleHexInputChange}
-                      onBlur={() => {
-                        if (!HEX_REGEX.test(internalValue)) {
-                          revertToLastValid();
-                        }
-                      }}
-                      prefixed
-                      aria-label="Hex color value"
-                    />
-                  }
-                />
-              </VStack>
-            </PopoverPopup>
-          </PopoverPositioner>
-        </PopoverCompound.Portal>
-      </Popover>
-    </Field>
-  );
-}

package/src/components/ColorPicker/index.ts

@@ -1 +0,0 @@
-export * from "./color-picker";

package/src/components/DatePicker/date-picker.tsx

@@ -1,75 +0,0 @@
-"use client";
-
-import { CalendarBlankIcon } from "@phosphor-icons/react";
-import { useRef, useState } from "react";
-import { Button } from "../Button/button";
-import { Calendar } from "../Calendar/calendar";
-import { Field, FieldError, FieldLabel } from "../Field/field";
-import {
-  Popover,
-  PopoverCompound,
-  PopoverPopup,
-  PopoverPositioner,
-  PopoverTrigger,
-} from "../Popover/popover";
-
-type Props = {
-  value: Date | undefined;
-  onChange: (date: Date | undefined) => void;
-  format?: (date: Date | undefined) => string;
-  label?: string;
-  placeholder?: string;
-  error?: string;
-  disabled?: boolean;
-};
-
-export function DatePicker({
-  value,
-  onChange,
-  label,
-  format,
-  placeholder = "Pick a date",
-  error,
-  disabled,
-}: Props) {
-  const [open, setOpen] = useState(false);
-  const triggerRef = useRef<HTMLButtonElement>(null);
-
-  const handleSelect = (date: Date | undefined) => {
-    onChange(date);
-    setOpen(false);
-  };
-
-  return (
-    <Field>
-      <Popover open={open} onOpenChange={setOpen}>
-        {label && (
-          <FieldLabel
-            onClick={() => {
-              triggerRef.current?.click();
-              triggerRef.current?.focus();
-            }}
-          >
-            {label}
-          </FieldLabel>
-        )}
-        <PopoverTrigger
-          ref={triggerRef}
-          disabled={disabled}
-          render={<Button type="button" variant="outline" fullWidth />}
-        >
-          <CalendarBlankIcon size={18} />
-          {value ? (format?.(value) ?? value.toString()) : placeholder}
-        </PopoverTrigger>
-        <PopoverCompound.Portal>
-          <PopoverPositioner sideOffset={6} side="bottom" align="start">
-            <PopoverPopup>
-              <Calendar mode="single" selected={value} onSelect={handleSelect} />
-            </PopoverPopup>
-          </PopoverPositioner>
-        </PopoverCompound.Portal>
-      </Popover>
-      {error && <FieldError>{error}</FieldError>}
-    </Field>
-  );
-}

package/src/components/DatePicker/index.ts

@@ -1 +0,0 @@
-export * from "./date-picker";

package/src/components/Stack/stack.css.ts

@@ -1,42 +0,0 @@
-import { recipe } from "@vanilla-extract/recipes";
-import { tokenVars } from "@blenx-dev/theme/contract";
-
-export const stackRecipe = recipe({
-  variants: {
-    gap: {
-      none: { gap: 0 },
-      xxs: { gap: tokenVars.spacing.xxs },
-      xs: { gap: tokenVars.spacing.xs },
-      sm: { gap: tokenVars.spacing.sm },
-      md: { gap: tokenVars.spacing.md },
-      lg: { gap: tokenVars.spacing.lg },
-      xl: { gap: tokenVars.spacing.xl },
-      xxl: { gap: tokenVars.spacing.xxl },
-      xxxl: { gap: tokenVars.spacing.xxxl },
-      huge: { gap: tokenVars.spacing.huge },
-      massive: { gap: tokenVars.spacing.massive },
-    },
-    align: {
-      start: { alignItems: "flex-start" },
-      center: { alignItems: "center" },
-      end: { alignItems: "flex-end" },
-      stretch: { alignItems: "stretch" },
-      baseline: { alignItems: "baseline" },
-    },
-    justify: {
-      start: { justifyContent: "flex-start" },
-      center: { justifyContent: "center" },
-      end: { justifyContent: "flex-end" },
-      between: { justifyContent: "space-between" },
-      around: { justifyContent: "space-around" },
-      evenly: { justifyContent: "space-evenly" },
-      stretch: { justifyContent: "stretch" },
-    },
-    wrap: {
-      true: { flexWrap: "wrap" },
-    },
-  },
-  defaultVariants: {
-    gap: "md",
-  },
-});