@blenx-dev/core 0.1.0

package/src/components/Sheet/sheet.css.ts

@@ -0,0 +1,184 @@
+import { style } from "@vanilla-extract/css";
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+
+export const backdrop = style({
+  position: "fixed",
+  inset: 0,
+  backgroundColor: "rgba(0, 0, 0, 0.32)",
+  backdropFilter: "blur(4px)",
+  transitionProperty: "opacity",
+  transitionDuration: "200ms",
+  "@media": {
+    "(prefers-reduced-motion: reduce)": {
+      transitionProperty: "none",
+      transitionDuration: "0ms",
+    },
+  },
+});
+
+export const viewport = style({
+  position: "fixed",
+  inset: 0,
+  boxSizing: "border-box",
+});
+
+export const viewportBottom = style({
+  display: "grid",
+  gridTemplateRows: "1fr auto",
+  paddingTop: tokenVars.spacing.xxl,
+});
+
+export const viewportTop = style({
+  display: "grid",
+  gridTemplateRows: "auto 1fr",
+  paddingBottom: tokenVars.spacing.xxl,
+});
+
+export const viewportLeft = style({
+  display: "flex",
+  justifyContent: "flex-start",
+});
+
+export const viewportRight = style({
+  display: "flex",
+  justifyContent: "flex-end",
+});
+
+export const viewportInset = style({
+  "@media": {
+    "(min-width: 640px)": {
+      padding: tokenVars.spacing.md,
+    },
+  },
+});
+
+export const popup = style({
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  maxHeight: "100%",
+  minHeight: 0,
+  minWidth: 0,
+  width: "100%",
+  boxSizing: "border-box",
+  backgroundColor: semanticVars.surface.default,
+  color: semanticVars.text.primary,
+  borderStyle: "solid",
+  borderColor: semanticVars.border.default,
+  outline: "none",
+  boxShadow: tokenVars.shadow.lg,
+  willChange: "translate",
+  transitionProperty: "opacity, translate",
+  transitionDuration: "200ms",
+  transitionTimingFunction: "ease-in-out",
+  "::before": {
+    content: '""',
+    pointerEvents: "none",
+    position: "absolute",
+    inset: 0,
+    boxShadow: "0 1px 0 rgba(0, 0, 0, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.02)",
+  },
+  "@media": {
+    "(prefers-reduced-motion: reduce)": {
+      transitionProperty: "none",
+      transitionDuration: "0ms",
+    },
+  },
+});
+
+export const popupBottom = style({
+  gridRowStart: 2,
+  borderTopWidth: tokenVars.borderWidth.thin,
+  borderTopLeftRadius: tokenVars.borderRadius.xl,
+  borderTopRightRadius: tokenVars.borderRadius.xl,
+});
+
+export const popupTop = style({
+  borderBottomWidth: tokenVars.borderWidth.thin,
+  borderBottomLeftRadius: tokenVars.borderRadius.xl,
+  borderBottomRightRadius: tokenVars.borderRadius.xl,
+});
+
+export const popupLeft = style({
+  width: "calc(100% - 48px)",
+  maxWidth: "28rem",
+  borderRightWidth: tokenVars.borderWidth.thin,
+  borderTopRightRadius: tokenVars.borderRadius.xl,
+  borderBottomRightRadius: tokenVars.borderRadius.xl,
+});
+
+export const popupRight = style({
+  width: "calc(100% - 48px)",
+  maxWidth: "28rem",
+  borderLeftWidth: tokenVars.borderWidth.thin,
+  borderTopLeftRadius: tokenVars.borderRadius.xl,
+  borderBottomLeftRadius: tokenVars.borderRadius.xl,
+});
+
+export const popupInset = style({
+  borderRadius: 0,
+  borderWidth: 0,
+  "::before": {
+    content: "none",
+  },
+  "@media": {
+    "(min-width: 640px)": {
+      borderRadius: tokenVars.borderRadius.xl,
+      borderWidth: tokenVars.borderWidth.thin,
+    },
+  },
+});
+
+export const header = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: tokenVars.spacing.sm,
+  padding: tokenVars.spacing.lg,
+  boxSizing: "border-box",
+});
+
+export const footer = style({
+  display: "flex",
+  flexDirection: "column-reverse",
+  gap: tokenVars.spacing.sm,
+  paddingLeft: tokenVars.spacing.lg,
+  paddingRight: tokenVars.spacing.lg,
+  boxSizing: "border-box",
+  "@media": {
+    "(min-width: 640px)": {
+      flexDirection: "row",
+      justifyContent: "flex-end",
+    },
+  },
+});
+
+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.xl,
+  lineHeight: 1,
+  fontWeight: tokenVars.fontWeight.semibold,
+});
+
+export const description = style({
+  fontSize: tokenVars.fontSize.sm,
+  lineHeight: 1.4,
+  color: semanticVars.text.secondary,
+});
+
+export const panel = style({
+  boxSizing: "border-box",
+  padding: tokenVars.spacing.lg,
+});

package/src/components/Sheet/sheet.tsx

@@ -0,0 +1,215 @@
+"use client";
+
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
+import { useRender } from "@base-ui/react/use-render";
+import clsx from "clsx";
+import type React from "react";
+import { ScrollArea } from "../ScrollArea/scroll-area";
+import {
+  backdrop,
+  viewport,
+  viewportBottom,
+  viewportTop,
+  viewportLeft,
+  viewportRight,
+  viewportInset,
+  popup,
+  popupBottom,
+  popupTop,
+  popupLeft,
+  popupRight,
+  popupInset,
+  header,
+  footer,
+  footerDefault,
+  footerBare,
+  title,
+  description,
+  panel,
+} from "./sheet.css";
+import { CloseButton } from "../CloseButton";
+import type { _BaseDivProps } from "../../utils/types";
+import { Box } from "../Box";
+
+type Side = "right" | "left" | "top" | "bottom";
+
+export const Sheet: typeof SheetPrimitive.Root = SheetPrimitive.Root;
+
+export const SheetPortal: typeof SheetPrimitive.Portal = SheetPrimitive.Portal;
+
+export function SheetTrigger(props: SheetPrimitive.Trigger.Props): React.ReactElement {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+export function SheetClose(props: SheetPrimitive.Close.Props): React.ReactElement {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+export function SheetBackdrop({
+  className,
+  ...props
+}: SheetPrimitive.Backdrop.Props): React.ReactElement {
+  return (
+    <SheetPrimitive.Backdrop
+      className={clsx(backdrop, className)}
+      data-slot="sheet-backdrop"
+      {...props}
+    />
+  );
+}
+
+type SheetViewportProps = SheetPrimitive.Viewport.Props & {
+  side?: Side;
+  variant?: "default" | "inset";
+};
+
+export function SheetViewport({
+  className,
+  side,
+  variant = "default",
+  ...props
+}: SheetViewportProps): React.ReactElement {
+  return (
+    <SheetPrimitive.Viewport
+      className={clsx(
+        viewport,
+        side === "bottom" && viewportBottom,
+        side === "top" && viewportTop,
+        side === "left" && viewportLeft,
+        side === "right" && viewportRight,
+        variant === "inset" && viewportInset,
+        className,
+      )}
+      data-slot="sheet-viewport"
+      {...props}
+    />
+  );
+}
+
+export function SheetPopup({
+  children,
+  showCloseButton = true,
+  side = "right",
+  variant = "default",
+  closeProps,
+  portalProps,
+  className,
+  ...props
+}: SheetPrimitive.Popup.Props & {
+  showCloseButton?: boolean;
+  side?: Side;
+  variant?: "default" | "inset";
+  closeProps?: SheetPrimitive.Close.Props;
+  portalProps?: SheetPrimitive.Portal.Props;
+}): React.ReactElement {
+  return (
+    <SheetPortal {...portalProps}>
+      <SheetBackdrop />
+      <SheetViewport side={side} variant={variant}>
+        <SheetPrimitive.Popup
+          className={clsx(
+            popup,
+            side === "bottom" && popupBottom,
+            side === "top" && popupTop,
+            side === "left" && popupLeft,
+            side === "right" && popupRight,
+            variant === "inset" && popupInset,
+            className,
+          )}
+          data-slot="sheet-popup"
+          {...props}
+        >
+          {children}
+          {showCloseButton && (
+            <Box position="absolute" top="xs" right="xs">
+              <SheetPrimitive.Close
+                aria-label="Close"
+                render={<CloseButton variant="ghost" />}
+                {...closeProps}
+              />
+            </Box>
+          )}
+        </SheetPrimitive.Popup>
+      </SheetViewport>
+    </SheetPortal>
+  );
+}
+
+type HeaderProps = _BaseDivProps;
+
+export function SheetHeader({ className, render, ...props }: HeaderProps): React.ReactElement {
+  return useRender({
+    defaultTagName: "div",
+    props: {
+      className: clsx(header, className),
+      "data-slot": "sheet-header",
+      ...props,
+    } as never,
+    render,
+  });
+}
+
+type FooterProps = _BaseDivProps & {
+  variant?: "default" | "bare";
+};
+
+export function SheetFooter({
+  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": "sheet-footer",
+      ...props,
+    } as never,
+    render,
+  });
+}
+
+export function SheetTitle(props: SheetPrimitive.Title.Props): React.ReactElement {
+  return <SheetPrimitive.Title className={title} data-slot="sheet-title" {...props} />;
+}
+
+export function SheetDescription(props: SheetPrimitive.Description.Props): React.ReactElement {
+  return (
+    <SheetPrimitive.Description className={description} data-slot="sheet-description" {...props} />
+  );
+}
+
+type PanelProps = _BaseDivProps & {
+  scrollFade?: boolean;
+};
+
+export function SheetPanel({
+  scrollFade = true,
+  render,
+  className,
+  ...props
+}: PanelProps): React.ReactElement {
+  return (
+    <ScrollArea scrollFade={scrollFade}>
+      {useRender({
+        defaultTagName: "div",
+        props: {
+          className: clsx(panel, className),
+          "data-slot": "sheet-panel",
+          ...props,
+        } as never,
+        render,
+      })}
+    </ScrollArea>
+  );
+}
+
+export type { SheetViewportProps };
+
+export { SheetBackdrop as SheetOverlay, SheetPopup as SheetContent };

package/src/components/Slider/index.ts

@@ -0,0 +1 @@
+export { Slider, SliderValue } from "./slider";

package/src/components/Slider/slider.css.ts

@@ -0,0 +1,81 @@
+import { style } from "@vanilla-extract/css";
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+
+export const disabled = style({
+  pointerEvents: "none",
+  opacity: 0.64,
+});
+
+export const control = style({
+  display: "flex",
+  touchAction: "none",
+  userSelect: "none",
+});
+
+export const controlHorizontal = style({
+  width: "100%",
+  minWidth: 176,
+  height: 7,
+});
+
+export const controlVertical = style({
+  height: "100%",
+  minHeight: 176,
+  flexDirection: "column",
+});
+
+export const track = style({
+  position: "relative",
+  flexGrow: 1,
+  userSelect: "none",
+  borderRadius: tokenVars.borderRadius.full,
+  backgroundColor: semanticVars.border.default,
+});
+
+export const trackHorizontal = style({
+  width: "100%",
+  height: 7,
+});
+
+export const trackVertical = style({
+  height: "100%",
+});
+
+export const indicator = style({
+  userSelect: "none",
+  borderRadius: tokenVars.borderRadius.full,
+  backgroundColor: semanticVars.interactive.primary.default,
+});
+
+export const thumb = style({
+  display: "block",
+  flexShrink: 0,
+  userSelect: "none",
+  borderRadius: tokenVars.borderRadius.full,
+  borderWidth: tokenVars.borderWidth.thin,
+  borderStyle: "solid",
+  borderColor: semanticVars.border.default,
+  backgroundColor: semanticVars.surface.default,
+  outline: "none",
+  transitionProperty: "box-shadow, transform",
+  transitionDuration: "150ms",
+  width: 16,
+  height: 16,
+  boxShadow: tokenVars.shadow.sm,
+  selectors: {
+    "&:has(:focus-visible)": {
+      boxShadow: `0 0 0 3px ${semanticVars.focus.ring}`,
+    },
+  },
+});
+
+export const thumbDragging = style({
+  transform: "scale(1.2)",
+  boxShadow: "none",
+});
+
+export const value = style({
+  display: "flex",
+  justifyContent: "flex-end",
+  fontSize: tokenVars.fontSize.sm,
+});

package/src/components/Slider/slider.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { Slider as SliderPrimitive } from "@base-ui/react/slider";
+import clsx from "clsx";
+import * as React from "react";
+import {
+  disabled,
+  control,
+  controlHorizontal,
+  controlVertical,
+  track,
+  trackHorizontal,
+  trackVertical,
+  indicator,
+  thumb,
+  thumbDragging,
+  value,
+} from "./slider.css";
+
+type SliderProps = Omit<SliderPrimitive.Root.Props, "style"> & {
+  className?: string;
+};
+
+type SliderValueProps = Omit<SliderPrimitive.Value.Props, "style"> & {
+  className?: string;
+};
+
+function Slider({
+  className,
+  children,
+  defaultValue,
+  value: controlledValue,
+  min = 0,
+  max = 100,
+  ...props
+}: SliderProps): React.ReactElement {
+  const values = React.useMemo(() => {
+    if (controlledValue !== undefined) {
+      return Array.isArray(controlledValue) ? controlledValue : [controlledValue];
+    }
+    if (defaultValue !== undefined) {
+      return Array.isArray(defaultValue) ? defaultValue : [defaultValue];
+    }
+    return [min];
+  }, [controlledValue, defaultValue, min]);
+  const orientation = props.orientation || "horizontal";
+
+  return (
+    <SliderPrimitive.Root
+      className={clsx(props.disabled && disabled, className)}
+      defaultValue={defaultValue}
+      max={max}
+      min={min}
+      thumbAlignment="edge"
+      value={controlledValue}
+      {...props}
+    >
+      {children}
+      <SliderPrimitive.Control
+        className={clsx(
+          control,
+          orientation === "horizontal" ? controlHorizontal : controlVertical,
+        )}
+        data-slot="slider-control"
+      >
+        <SliderPrimitive.Track
+          className={clsx(track, orientation === "horizontal" ? trackHorizontal : trackVertical)}
+          data-slot="slider-track"
+        >
+          <SliderPrimitive.Indicator className={indicator} data-slot="slider-indicator" />
+          {Array.from({ length: values.length }, (_, index) => (
+            <SliderPrimitive.Thumb
+              index={index}
+              key={index}
+              render={(thumbRenderProps, state) => (
+                <div
+                  {...thumbRenderProps}
+                  className={clsx(
+                    thumbRenderProps.className,
+                    thumb,
+                    state.dragging && thumbDragging,
+                    state.disabled && disabled,
+                  )}
+                />
+              )}
+            />
+          ))}
+        </SliderPrimitive.Track>
+      </SliderPrimitive.Control>
+    </SliderPrimitive.Root>
+  );
+}
+
+function SliderValue({ className, ...props }: SliderValueProps): React.ReactElement {
+  return (
+    <SliderPrimitive.Value className={clsx(value, className)} data-slot="slider-value" {...props} />
+  );
+}
+
+export { SliderValue, Slider };

package/src/components/Spinner/index.ts

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

package/src/components/Spinner/spinner.css.ts

@@ -0,0 +1,17 @@
+import { style, keyframes } from "@vanilla-extract/css";
+
+export const spin = keyframes({
+  from: { transform: "rotate(0deg)" },
+  to: { transform: "rotate(360deg)" },
+});
+
+export const spinner = style({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transformOrigin: "center",
+  animationName: spin,
+  animationDuration: "1s",
+  animationIterationCount: "infinite",
+  animationTimingFunction: "linear",
+});

package/src/components/Spinner/spinner.tsx

@@ -0,0 +1,15 @@
+import { CircleNotchIcon } from "@phosphor-icons/react";
+import clsx from "clsx";
+import type React from "react";
+import { spinner } from "./spinner.css";
+
+type Props = Omit<React.ComponentProps<typeof CircleNotchIcon>, "className" | "style"> & {
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export function Spinner({ className, style, ...props }: Props): React.ReactElement {
+  return (
+    <CircleNotchIcon weight="bold" className={clsx(spinner, className)} style={style} {...props} />
+  );
+}

package/src/components/Splitter/index.ts

@@ -0,0 +1 @@
+export { Splitter, SplitterHandle, SplitterPanel } from "./splitter";

package/src/components/Splitter/splitter.css.ts

@@ -0,0 +1,69 @@
+import { style } from "@vanilla-extract/css";
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+
+export const HANDLE_SIZE = 8;
+
+export const root = style({
+  display: "flex",
+  overflow: "hidden",
+  width: "100%",
+  height: "100%",
+});
+
+export const rootHorizontal = style({
+  flexDirection: "row",
+});
+
+export const rootVertical = style({
+  flexDirection: "column",
+});
+
+export const rootDisabled = style({
+  pointerEvents: "none",
+  opacity: 0.6,
+});
+
+export const panel = style({
+  overflow: "hidden",
+  flexShrink: 0,
+  flexBasis: 0,
+});
+
+export const handle = style({
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  backgroundColor: semanticVars.border.subtle,
+  transitionProperty: "background-color",
+  transitionDuration: tokenVars.duration.fast,
+  outline: "none",
+  selectors: {
+    "&:hover": {
+      backgroundColor: semanticVars.border.default,
+    },
+    "&:focus-visible": {
+      backgroundColor: semanticVars.interactive.primary.default,
+    },
+  },
+});
+
+export const handleActive = style({
+  backgroundColor: semanticVars.interactive.primary.default,
+});
+
+export const handleDisabled = style({
+  cursor: "not-allowed",
+  opacity: 0.4,
+});
+
+export const handleHorizontal = style({
+  width: HANDLE_SIZE,
+  cursor: "col-resize",
+});
+
+export const handleVertical = style({
+  height: HANDLE_SIZE,
+  cursor: "row-resize",
+});