@blenx-dev/core 0.1.0

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

@@ -0,0 +1,67 @@
+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/Accordion/accordion.css.ts

@@ -0,0 +1,84 @@
+import { style } from "@vanilla-extract/css";
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+
+export const root = style({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  boxSizing: "border-box",
+});
+
+export const rootVertical = style({
+  flexDirection: "column",
+});
+
+export const item = style({
+  borderBottomWidth: tokenVars.borderWidth.thin,
+  borderBottomStyle: "solid",
+  borderBottomColor: semanticVars.border.subtle,
+});
+
+export const itemDisabled = style({
+  opacity: 0.5,
+});
+
+export const trigger = style({
+  display: "flex",
+  alignItems: "center",
+  gap: tokenVars.spacing.xxs,
+  width: "100%",
+  paddingTop: tokenVars.spacing.xs,
+  paddingBottom: tokenVars.spacing.xs,
+  paddingLeft: tokenVars.spacing.xxs,
+  paddingRight: tokenVars.spacing.xxs,
+  boxSizing: "border-box",
+  fontSize: tokenVars.fontSize.sm,
+  lineHeight: tokenVars.lineHeight.normal,
+  fontWeight: tokenVars.fontWeight.medium,
+  color: semanticVars.text.primary,
+  backgroundColor: "transparent",
+  border: "none",
+  borderRadius: tokenVars.borderRadius.default,
+  appearance: "none",
+  fontFamily: "inherit",
+  textAlign: "left",
+  borderWidth: 0,
+  cursor: "pointer",
+  WebkitTapHighlightColor: "transparent",
+  outline: "none",
+  outlineOffset: "2px",
+  transitionProperty: "background-color",
+  transitionDuration: tokenVars.duration.fast,
+  transitionTimingFunction: tokenVars.easing.standard,
+  selectors: {
+    "&:hover": {
+      backgroundColor: semanticVars.background.subtle,
+    },
+    "&:focus-visible": {
+      outline: `2px solid ${semanticVars.focus.ring}`,
+    },
+  },
+});
+
+export const triggerIcon = style({
+  flexShrink: 0,
+  color: semanticVars.text.secondary,
+  transform: "rotate(0deg)",
+  transitionProperty: "transform",
+  transitionDuration: tokenVars.duration.normal,
+  transitionTimingFunction: tokenVars.easing.standard,
+  selectors: {
+    "[data-panel-open] &": {
+      transform: "rotate(180deg)",
+    },
+  },
+});
+
+export const panel = style({
+  overflow: "hidden",
+  boxSizing: "border-box",
+  transitionProperty: "grid-template-rows, opacity",
+  padding: tokenVars.spacing.xs,
+  transitionDuration: tokenVars.duration.normal,
+  transitionTimingFunction: tokenVars.easing.standard,
+});

package/src/components/Accordion/accordion.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+import { CaretDownIcon } from "@phosphor-icons/react";
+import clsx from "clsx";
+import {
+  root,
+  rootVertical,
+  item,
+  itemDisabled,
+  trigger,
+  triggerIcon,
+  panel,
+} from "./accordion.css";
+
+type AccordionRootProps = AccordionPrimitive.Root.Props;
+
+function AccordionRoot({ children, className, ...props }: AccordionRootProps) {
+  return (
+    <AccordionPrimitive.Root
+      className={(state) => clsx(root, state.orientation === "vertical" && rootVertical, className)}
+      {...props}
+    >
+      {children}
+    </AccordionPrimitive.Root>
+  );
+}
+
+type AccordionItemProps = AccordionPrimitive.Item.Props;
+
+function AccordionItem({ children, className, ...props }: AccordionItemProps) {
+  return (
+    <AccordionPrimitive.Item
+      className={(state) => clsx(item, state.disabled && itemDisabled, className)}
+      {...props}
+    >
+      {children}
+    </AccordionPrimitive.Item>
+  );
+}
+
+type AccordionHeaderProps = AccordionPrimitive.Header.Props;
+
+function AccordionHeader({ children, className, ...props }: AccordionHeaderProps) {
+  return (
+    <AccordionPrimitive.Header className={className} {...props}>
+      {children}
+    </AccordionPrimitive.Header>
+  );
+}
+
+type AccordionTriggerProps = AccordionPrimitive.Trigger.Props;
+
+function AccordionTrigger({ children, className, ...props }: AccordionTriggerProps) {
+  return (
+    <AccordionPrimitive.Trigger className={clsx(trigger, className)} {...props}>
+      <CaretDownIcon size={16} className={triggerIcon} />
+      {children}
+    </AccordionPrimitive.Trigger>
+  );
+}
+
+type AccordionPanelProps = AccordionPrimitive.Panel.Props;
+
+function AccordionPanel({ children, className, ...props }: AccordionPanelProps) {
+  return (
+    <AccordionPrimitive.Panel className={clsx(panel, className)} {...props}>
+      {children}
+    </AccordionPrimitive.Panel>
+  );
+}
+
+export { AccordionPanel, AccordionTrigger, AccordionHeader, AccordionItem, AccordionRoot };
+export type {
+  AccordionPanelProps,
+  AccordionTriggerProps,
+  AccordionHeaderProps,
+  AccordionItemProps,
+  AccordionRootProps,
+};
+export const Accordion = {
+  Root: AccordionRoot,
+  Item: AccordionItem,
+  Header: AccordionHeader,
+  Trigger: AccordionTrigger,
+  Panel: AccordionPanel,
+};

package/src/components/Accordion/index.ts

@@ -0,0 +1,8 @@
+export {
+  Accordion,
+  AccordionHeader,
+  AccordionItem,
+  AccordionPanel,
+  AccordionRoot,
+  AccordionTrigger,
+} from "./accordion";

package/src/components/Alert/alert.css.ts

@@ -0,0 +1,29 @@
+import { semanticVars } from "@blenx-dev/theme/contract";
+import { recipe } from "@vanilla-extract/recipes";
+
+export const alertVariants = recipe({
+  variants: {
+    variant: {
+      info: {
+        backgroundColor: semanticVars.status.infoBg,
+        color: semanticVars.status.info.active,
+        borderColor: semanticVars.status.info.default,
+      },
+      success: {
+        backgroundColor: semanticVars.status.successBg,
+        color: semanticVars.status.success.active,
+        borderColor: semanticVars.status.success.default,
+      },
+      warning: {
+        backgroundColor: semanticVars.status.warningBg,
+        color: semanticVars.status.warning.active,
+        borderColor: semanticVars.status.warning.default,
+      },
+      error: {
+        backgroundColor: semanticVars.status.dangerBg,
+        color: semanticVars.status.danger.default,
+        borderColor: semanticVars.status.danger.default,
+      },
+    },
+  },
+});

package/src/components/Alert/alert.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from "react";
+import { Text } from "../Text";
+import type { RecipeVariants } from "@vanilla-extract/recipes";
+import { alertVariants } from "./alert.css";
+import clsx from "clsx";
+import { HStack, VStack } from "../Stack/stack";
+import { Box } from "../Box/box";
+
+type Props = RecipeVariants<typeof alertVariants> & {
+  icon?: ReactNode;
+  title?: string;
+  description?: string;
+  children?: ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+};
+
+function Alert({ variant = "info", icon, title, description, children, className }: Props) {
+  return (
+    <HStack
+      align={icon ? "start" : "center"}
+      gap="xs"
+      p="sm"
+      className={clsx(alertVariants({ variant }), className)}
+    >
+      <Box p={"xxs"}>{icon}</Box>
+      <VStack gap="xxs">
+        {title ? (
+          <Text variant="h6" padding="none" margin="none" color={variant}>
+            {title}
+          </Text>
+        ) : null}
+        {description ? <span style={{ color: "currentColor" }}>{description}</span> : null}
+        {children}
+      </VStack>
+    </HStack>
+  );
+}
+
+export { Alert };

package/src/components/Alert/index.ts

@@ -0,0 +1 @@
+export { Alert } from "./alert";

package/src/components/AlertDialog/alert-dialog.css.ts

@@ -0,0 +1,62 @@
+import { style } from "@vanilla-extract/css";
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+
+export const header = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: tokenVars.spacing.xxs,
+  padding: tokenVars.spacing.md,
+  boxSizing: "border-box",
+  paddingBottom: tokenVars.spacing.xs,
+});
+
+export const footer = style({
+  display: "flex",
+  flexDirection: "column-reverse",
+  gap: tokenVars.spacing.sm,
+  paddingLeft: tokenVars.spacing.md,
+  paddingRight: tokenVars.spacing.md,
+  boxSizing: "border-box",
+  "@media": {
+    "(min-width: 640px)": {
+      flexDirection: "row",
+      justifyContent: "flex-end",
+      borderBottomLeftRadius: "calc(16px - 1px)",
+      borderBottomRightRadius: "calc(16px - 1px)",
+    },
+  },
+});
+
+export const footerDefault = style({
+  borderTopWidth: tokenVars.borderWidth.thin,
+  borderTopStyle: "solid",
+  borderTopColor: semanticVars.border.subtle,
+  backgroundColor: semanticVars.background.subtle,
+  paddingTop: tokenVars.spacing.md,
+  paddingBottom: tokenVars.spacing.md,
+});
+
+export const footerBare = style({
+  paddingTop: tokenVars.spacing.md,
+  paddingBottom: tokenVars.spacing.lg,
+});
+
+export const title = style({
+  fontSize: tokenVars.fontSize.lg,
+  lineHeight: tokenVars.lineHeight.tight,
+  fontWeight: tokenVars.fontWeight.semibold,
+  color: semanticVars.text.primary,
+});
+
+export const description = style({
+  fontSize: tokenVars.fontSize.sm,
+  lineHeight: tokenVars.lineHeight.normal,
+  color: semanticVars.text.secondary,
+});
+
+export const panel = style({
+  boxSizing: "border-box",
+  padding: tokenVars.spacing.md,
+  paddingTop: tokenVars.spacing.xxs,
+  paddingBottom: tokenVars.spacing.xxs,
+});

package/src/components/AlertDialog/alert-dialog.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import { useRender } from "@base-ui/react/use-render";
+import clsx from "clsx";
+import type React from "react";
+import type { _BaseDivProps } from "../../utils/types";
+import { ScrollArea } from "../ScrollArea/scroll-area";
+import {
+  header,
+  footer,
+  footerDefault,
+  footerBare,
+  title,
+  description,
+  panel,
+} from "./alert-dialog.css";
+import { CloseButton } from "../CloseButton";
+import { Box } from "../Box/box";
+import {
+  backdrop,
+  popup,
+  viewport,
+  viewportShellBottomStickOnMobile,
+  popupBottomStickOnMobile,
+} from "../../utils/drawer-styles.css";
+
+function AlertDialog(props: AlertDialogPrimitive.Root.Props): React.ReactElement {
+  return <AlertDialogPrimitive.Root {...props} />;
+}
+
+function AlertDialogTrigger(props: AlertDialogPrimitive.Trigger.Props): React.ReactElement {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+function AlertDialogClose(props: AlertDialogPrimitive.Close.Props): React.ReactElement {
+  return <AlertDialogPrimitive.Close data-slot="alert-dialog-close" {...props} />;
+}
+
+function AlertDialogPortal(props: AlertDialogPrimitive.Portal.Props): React.ReactElement {
+  return <AlertDialogPrimitive.Portal {...props} />;
+}
+
+function AlertDialogBackdrop(props: AlertDialogPrimitive.Backdrop.Props): React.ReactElement {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      className={backdrop}
+      data-slot="alert-dialog-backdrop"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogViewport(
+  props: AlertDialogPrimitive.Viewport.Props & {
+    bottomStickOnMobile?: boolean;
+  },
+): React.ReactElement {
+  const { bottomStickOnMobile, className, ...restProps } = props;
+  return (
+    <AlertDialogPrimitive.Viewport
+      className={clsx(viewport, bottomStickOnMobile && viewportShellBottomStickOnMobile, className)}
+      data-slot="alert-dialog-viewport"
+      {...restProps}
+    />
+  );
+}
+
+type AlertDialogPopupProps = AlertDialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean;
+  closeProps?: AlertDialogPrimitive.Close.Props;
+  bottomStickOnMobile?: boolean;
+};
+
+function AlertDialogPopup({
+  children,
+  bottomStickOnMobile = true,
+  showCloseButton = true,
+  closeProps,
+  className,
+  ...props
+}: AlertDialogPopupProps): React.ReactElement {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogBackdrop />
+      <AlertDialogViewport bottomStickOnMobile={bottomStickOnMobile}>
+        <AlertDialogPrimitive.Popup
+          className={clsx(popup, bottomStickOnMobile && popupBottomStickOnMobile, className)}
+          data-slot="alert-dialog-popup"
+          {...props}
+        >
+          {showCloseButton && (
+            <Box position="absolute" right="xs" top="xs">
+              <AlertDialogPrimitive.Close
+                aria-label="Close"
+                render={<CloseButton variant="ghost" />}
+                {...closeProps}
+              />
+            </Box>
+          )}
+          {children}
+        </AlertDialogPrimitive.Popup>
+      </AlertDialogViewport>
+    </AlertDialogPortal>
+  );
+}
+
+type HeaderProps = _BaseDivProps;
+
+function AlertDialogHeader({ className, render, ...props }: HeaderProps): React.ReactElement {
+  return useRender({
+    defaultTagName: "div",
+    props: {
+      className: clsx(header, className),
+      "data-slot": "alert-dialog-header",
+      ...props,
+    } as never,
+    render,
+  });
+}
+
+type FooterProps = _BaseDivProps & {
+  variant?: "default" | "bare";
+};
+
+function AlertDialogFooter({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: FooterProps): React.ReactElement {
+  return useRender({
+    defaultTagName: "div",
+    props: {
+      className: clsx(
+        footer,
+        variant === "default" && footerDefault,
+        variant === "bare" && footerBare,
+        className,
+      ),
+      "data-slot": "alert-dialog-footer",
+      ...props,
+    } as never,
+    render,
+  });
+}
+
+function AlertDialogTitle(props: AlertDialogPrimitive.Title.Props): React.ReactElement {
+  return <AlertDialogPrimitive.Title className={title} data-slot="alert-dialog-title" {...props} />;
+}
+
+function AlertDialogDescription(props: AlertDialogPrimitive.Description.Props): React.ReactElement {
+  return (
+    <AlertDialogPrimitive.Description
+      className={description}
+      data-slot="alert-dialog-description"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogPanel({
+  scrollFade = true,
+  render,
+  className,
+  ...props
+}: _BaseDivProps & {
+  scrollFade?: boolean;
+}): React.ReactElement {
+  return (
+    <ScrollArea scrollFade={scrollFade} height="fit-content">
+      {useRender({
+        defaultTagName: "div",
+        props: {
+          className: clsx(panel, className),
+          "data-slot": "alert-dialog-panel",
+          ...props,
+        } as never,
+        render,
+      })}
+    </ScrollArea>
+  );
+}
+
+export type { AlertDialogPopupProps };
+export {
+  AlertDialog,
+  AlertDialogBackdrop,
+  AlertDialogClose,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogPanel,
+  AlertDialogPopup,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  AlertDialogViewport,
+};

package/src/components/AlertDialog/index.ts

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

package/src/components/AspectRatio/aspect-ratio.css.ts

@@ -0,0 +1,7 @@
+import { style } from "@vanilla-extract/css";
+
+export const root = style({
+  position: "relative",
+  overflow: "hidden",
+  maxWidth: "100%",
+});

package/src/components/AspectRatio/aspect-ratio.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import clsx from "clsx";
+import type { BoxProps } from "../Box/box";
+import { Box } from "../Box/box";
+import * as styles from "./aspect-ratio.css";
+
+type AspectRatioProps = BoxProps & {
+  ratio?: number;
+};
+
+export function AspectRatio({ ratio = 16 / 9, className, style, ...boxProps }: AspectRatioProps) {
+  return (
+    <Box
+      className={clsx(styles.root, className)}
+      style={{ aspectRatio: `${ratio}`, ...style }}
+      {...boxProps}
+    />
+  );
+}

package/src/components/AspectRatio/index.ts

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