@arolariu/components 0.4.2 → 1.0.0

package/src/components/ui/resizable.tsx

@@ -1,39 +1,119 @@
 "use client";
 
+/* eslint-disable react/jsx-handler-names */
+
 import {GripVertical} from "lucide-react";
 import * as React from "react";
+import type {ImperativePanelGroupHandle, ImperativePanelHandle} from "react-resizable-panels";
 import * as ResizablePrimitive from "react-resizable-panels";
 
 import {cn} from "@/lib/utilities";
 
-const ResizablePanelGroup = ({className, ...props}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
-  <ResizablePrimitive.PanelGroup
-    className={cn("flex h-full w-full data-[panel-group-direction=vertical]:flex-col", className)}
-    {...props}
-  />
-);
+import styles from "./resizable.module.css";
 
-const ResizablePanel = ResizablePrimitive.Panel;
+export type {ImperativePanelGroupHandle, ImperativePanelHandle};
+
+/**
+ * Props for the {@link ResizablePanelGroup} component.
+ */
+export type ResizablePanelGroupProps = React.ComponentProps<typeof ResizablePrimitive.PanelGroup>;
 
-const ResizableHandle = ({
-  withHandle,
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+/**
+ * Props for the {@link ResizablePanel} component.
+ */
+export type ResizablePanelProps = React.ComponentProps<typeof ResizablePrimitive.Panel>;
+
+/**
+ * Props for the {@link ResizableHandle} component.
+ *
+ * @see {@link https://github.com/bvaughn/react-resizable-panels | react-resizable-panels docs}
+ */
+export interface ResizableHandleProps extends React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> {
+  /**
+   * Renders a visual drag grip inside the resize handle to indicate that adjacent panels can be resized.
+   *
+   * @default false
+   * @see {@link https://github.com/bvaughn/react-resizable-panels | react-resizable-panels docs}
+   */
   withHandle?: boolean;
-}) => (
-  <ResizablePrimitive.PanelResizeHandle
-    className={cn(
-      "relative flex w-px items-center justify-center bg-neutral-200 after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-neutral-950 focus-visible:ring-offset-1 focus-visible:outline-none data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 dark:bg-neutral-800 dark:focus-visible:ring-neutral-300 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-      className,
-    )}
-    {...props}>
-    {Boolean(withHandle) && (
-      <div className='z-10 flex h-4 w-3 items-center justify-center rounded-sm border border-neutral-200 bg-neutral-200 dark:border-neutral-800 dark:bg-neutral-800'>
-        <GripVertical className='h-2.5 w-2.5' />
-      </div>
-    )}
-  </ResizablePrimitive.PanelResizeHandle>
-);
+}
+
+/**
+ * Wraps `react-resizable-panels` panel groups with shared styles.
+ *
+ * @remarks
+ * - Third-party wrapper component
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <ResizablePanelGroup direction='horizontal'>...</ResizablePanelGroup>
+ * ```
+ *
+ * @see {@link ResizablePanelGroupProps} for available props
+ * @see {@link https://github.com/bvaughn/react-resizable-panels | react-resizable-panels docs}
+ * @see {@link https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels#readme | react-resizable-panels API reference}
+ */
+const ResizablePanelGroup: React.ForwardRefExoticComponent<ResizablePanelGroupProps & React.RefAttributes<ImperativePanelGroupHandle>> =
+  React.forwardRef<ImperativePanelGroupHandle, ResizablePanelGroupProps>(({className, ...props}, ref) => (
+    <ResizablePrimitive.PanelGroup
+      ref={ref}
+      className={cn(styles.group, className)}
+      {...props}
+    />
+  ));
+
+/**
+ * Re-exports the underlying resizable panel primitive for consistent composition.
+ *
+ * @remarks
+ * - Third-party wrapper component
+ * - Styling is applied by parent panel group and handles
+ *
+ * @example
+ * ```tsx
+ * <ResizablePanel defaultSize={50}>Content</ResizablePanel>
+ * ```
+ *
+ * @see {@link ResizablePanelProps} for available props
+ * @see {@link https://github.com/bvaughn/react-resizable-panels | react-resizable-panels docs}
+ * @see {@link https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels#readme | react-resizable-panels API reference}
+ */
+const ResizablePanel = ResizablePrimitive.Panel;
+
+/**
+ * Renders a draggable resize handle between resizable panels.
+ *
+ * @remarks
+ * - Third-party wrapper component
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <ResizableHandle withHandle />
+ * ```
+ *
+ * @see {@link ResizableHandleProps} for available props
+ * @see {@link https://github.com/bvaughn/react-resizable-panels | react-resizable-panels docs}
+ * @see {@link https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels#readme | react-resizable-panels API reference}
+ */
+function ResizableHandle({withHandle = false, className, children, ...props}: Readonly<ResizableHandleProps>): React.JSX.Element {
+  return (
+    <ResizablePrimitive.PanelResizeHandle
+      className={cn(styles.handle, className)}
+      {...props}>
+      {Boolean(withHandle) && (
+        <div className={styles.handleGrip}>
+          <GripVertical className={styles.handleGripIcon} />
+        </div>
+      )}
+      {children}
+    </ResizablePrimitive.PanelResizeHandle>
+  );
+}
+
+ResizablePanelGroup.displayName = "ResizablePanelGroup";
+ResizablePanel.displayName = "ResizablePanel";
+ResizableHandle.displayName = "ResizableHandle";
 
 export {ResizableHandle, ResizablePanel, ResizablePanelGroup};

package/src/components/ui/ripple-button.module.css

@@ -0,0 +1,35 @@
+.button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  height: 2.5rem;
+  padding: 0.5rem 1rem;
+  border: 0;
+  border-radius: var(--ac-radius-lg);
+  background: var(--ac-primary);
+  color: var(--ac-primary-foreground);
+  cursor: pointer;
+  font-size: var(--ac-text-sm);
+  font-weight: 500;
+}
+
+.button:focus-visible {
+  outline: 2px solid var(--ac-ring);
+  outline-offset: 2px;
+}
+
+.content {
+  position: relative;
+  z-index: 1;
+}
+
+.ripple {
+  position: absolute;
+  width: 1.25rem;
+  height: 1.25rem;
+  pointer-events: none;
+  border-radius: 9999px;
+  background: var(--ac-primary-foreground);
+}

package/src/components/ui/ripple-button.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import {type HTMLMotionProps, motion, type Transition} from "motion/react";
+import {motion, type HTMLMotionProps, type Transition} from "motion/react";
 import * as React from "react";
 
 import {cn} from "@/lib/utilities";
+import styles from "./ripple-button.module.css";
 
 interface Ripple {
   id: number;
@@ -11,22 +12,58 @@ interface Ripple {
   y: number;
 }
 
-interface RippleButtonProps extends HTMLMotionProps<"button"> {
+/** Props accepted by {@link RippleButton}. */
+export interface RippleButtonProps extends HTMLMotionProps<"button"> {
+  /** Button contents rendered above the ripple layer. @default undefined */
   children: React.ReactNode;
+  /** Additional CSS classes merged with each generated ripple. @default undefined */
   rippleClassName?: string;
+  /** Final expansion scale applied to each ripple animation. @default 10 */
   scale?: number;
+  /** Motion timing used for each ripple animation. @default {duration: 0.6, ease: "easeOut"} */
   transition?: Transition;
 }
 
+/**
+ * Renders a pressable button that emits animated ripples from the click position.
+ *
+ * @remarks
+ * - Animated component using the `motion` library
+ * - Renders a `<button>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ * - Client-side only (`"use client"` directive)
+ *
+ * @example
+ * ```tsx
+ * <RippleButton>Click me</RippleButton>
+ * ```
+ *
+ * @see {@link RippleButtonProps} for available props
+ */
 const RippleButton = React.forwardRef<HTMLButtonElement, RippleButtonProps>(
   ({children, onClick, className, rippleClassName, scale = 10, transition = {duration: 0.6, ease: "easeOut"}, ...props}, ref) => {
-    const [ripples, setRipples] = React.useState<Ripple[]>([]);
+    // eslint-disable-next-line sonarjs/no-unused-vars -- removing React key avoids implicit key spreading
+    const {key: _ignoredKey, ...restProps} = props;
+    const [ripples, setRipples] = React.useState<ReadonlyArray<Ripple>>([]);
     const buttonRef = React.useRef<HTMLButtonElement>(null);
-    React.useImperativeHandle(ref, () => buttonRef.current as HTMLButtonElement);
+    const timeoutIdsRef = React.useRef<ReadonlyArray<number>>([]);
 
-    const createRipple = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+    React.useImperativeHandle(ref, () => buttonRef.current!, []);
+
+    React.useEffect(
+      () => () => {
+        timeoutIdsRef.current.forEach((timeoutId) => {
+          globalThis.window.clearTimeout(timeoutId);
+        });
+      },
+      [],
+    );
+
+    const createRipple = React.useCallback((event: React.MouseEvent<HTMLButtonElement>): void => {
       const button = buttonRef.current;
-      if (!button) return;
+      if (!button) {
+        return;
+      }
 
       const rect = button.getBoundingClientRect();
       const x = event.clientX - rect.left;
@@ -38,19 +75,19 @@ const RippleButton = React.forwardRef<HTMLButtonElement, RippleButtonProps>(
         y,
       };
 
-      setRipples((prev) => [...prev, newRipple]);
+      setRipples((previousRipples) => [...previousRipples, newRipple]);
 
-      setTimeout(() => {
-        setRipples((prev) => prev.filter((r) => r.id !== newRipple.id));
+      const timeoutId = globalThis.window.setTimeout(() => {
+        setRipples((previousRipples) => previousRipples.filter((ripple) => ripple.id !== newRipple.id));
       }, 600);
+
+      timeoutIdsRef.current = [...timeoutIdsRef.current, timeoutId];
     }, []);
 
     const handleClick = React.useCallback(
-      (event: React.MouseEvent<HTMLButtonElement>) => {
+      (event: React.MouseEvent<HTMLButtonElement>): void => {
         createRipple(event);
-        if (onClick) {
-          onClick(event);
-        }
+        onClick?.(event);
       },
       [createRipple, onClick],
     );
@@ -61,19 +98,16 @@ const RippleButton = React.forwardRef<HTMLButtonElement, RippleButtonProps>(
         onClick={handleClick}
         whileTap={{scale: 0.95}}
         whileHover={{scale: 1.05}}
-        className={cn(
-          "text-primary-foreground bg-primary relative h-10 cursor-pointer overflow-hidden rounded-lg px-4 py-2 text-sm font-medium focus:outline-none",
-          className,
-        )}
-        {...props}>
-        {children}
+        className={cn(styles.button, className)}
+        {...restProps}>
+        <span className={styles.content}>{children}</span>
         {ripples.map((ripple) => (
           <motion.span
             key={ripple.id}
             initial={{scale: 0, opacity: 0.5}}
             animate={{scale, opacity: 0}}
             transition={transition}
-            className={cn("bg-primary-foreground pointer-events-none absolute size-5 rounded-full", rippleClassName)}
+            className={cn(styles.ripple, rippleClassName)}
             style={{
               top: ripple.y - 10,
               left: ripple.x - 10,
@@ -87,4 +121,4 @@ const RippleButton = React.forwardRef<HTMLButtonElement, RippleButtonProps>(
 
 RippleButton.displayName = "RippleButton";
 
-export {RippleButton, type RippleButtonProps};
+export {RippleButton};

package/src/components/ui/scratcher.module.css

@@ -0,0 +1,9 @@
+.root {
+  position: relative;
+  user-select: none;
+}
+
+.canvas {
+  position: absolute;
+  inset: 0;
+}

package/src/components/ui/scratcher.tsx

@@ -1,21 +1,48 @@
 "use client";
 
-import {cn} from "@/lib/utilities";
 import {motion, useAnimation} from "motion/react";
 import React, {useEffect, useRef, useState} from "react";
 
-interface ScratcherProps {
+import {cn} from "@/lib/utilities";
+import styles from "./scratcher.module.css";
+
+/** Props accepted by {@link Scratcher}. */
+export interface ScratcherProps {
+  /** Content revealed after the overlay is scratched away. @default undefined */
   children: React.ReactNode;
+  /** Width of the scratch card surface in pixels. @default undefined */
   width: number;
+  /** Height of the scratch card surface in pixels. @default undefined */
   height: number;
+  /** Percentage of cleared pixels required before completion fires. @default 50 */
   minScratchPercentage?: number;
+  /** Additional CSS classes merged with the scratch card container. @default undefined */
   className?: string;
+  /** Callback invoked once the scratch completion threshold is reached. @default undefined */
   onComplete?: () => void;
+  /** Three-stop gradient used for the scratchable overlay. @default ["#A97CF8", "#F38CB8", "#FDCC92"] */
   gradientColors?: [string, string, string];
 }
 
 const defaultGradientColors: [string, string, string] = ["#A97CF8", "#F38CB8", "#FDCC92"];
-
+const ignoreAnimationError = (): null => null;
+
+/**
+ * Renders a scratch-card reveal surface with animated completion feedback.
+ *
+ * @remarks
+ * - Animated component using the `motion` library
+ * - Renders a `<div>` element containing a `<canvas>`
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ * - Client-side only (`"use client"` directive)
+ *
+ * @example
+ * ```tsx
+ * <Scratcher width={320} height={180}>Prize unlocked</Scratcher>
+ * ```
+ *
+ * @see {@link ScratcherProps} for available props
+ */
 export const Scratcher: React.FC<ScratcherProps> = ({
   width,
   height,
@@ -24,7 +51,7 @@ export const Scratcher: React.FC<ScratcherProps> = ({
   children,
   className,
   gradientColors = defaultGradientColors,
-}) => {
+}): React.JSX.Element => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [isScratching, setIsScratching] = useState(false);
   const [isComplete, setIsComplete] = useState(false);
@@ -33,120 +60,120 @@ export const Scratcher: React.FC<ScratcherProps> = ({
 
   useEffect(() => {
     const canvas = canvasRef.current;
-    const ctx = canvas?.getContext("2d");
-    if (canvas && ctx) {
-      ctx.fillStyle = "#ccc";
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
-      const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
-      gradient.addColorStop(0, gradientColors[0]);
-      gradient.addColorStop(0.5, gradientColors[1]);
-      gradient.addColorStop(1, gradientColors[2]);
-      ctx.fillStyle = gradient;
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
+    const context = canvas?.getContext("2d");
+    if (!canvas || !context) {
+      return;
     }
-  }, [gradientColors]);
-
-  useEffect(() => {
-    const handleDocumentMouseMove = (event: MouseEvent) => {
-      if (!isScratching) return;
-      scratch(event.clientX, event.clientY);
-    };
 
-    const handleDocumentTouchMove = (event: TouchEvent) => {
-      if (!isScratching) return;
-      const [touch] = event.touches;
-      if (!touch) return;
-      scratch(touch.clientX, touch.clientY);
-    };
-
-    const handleDocumentMouseUp = () => {
-      setIsScratching(false);
-      checkCompletion();
-    };
-
-    const handleDocumentTouchEnd = () => {
-      setIsScratching(false);
-      checkCompletion();
-    };
-
-    document.addEventListener("mousedown", handleDocumentMouseMove);
-    document.addEventListener("mousemove", handleDocumentMouseMove);
-    document.addEventListener("touchstart", handleDocumentTouchMove);
-    document.addEventListener("touchmove", handleDocumentTouchMove);
-    document.addEventListener("mouseup", handleDocumentMouseUp);
-    document.addEventListener("touchend", handleDocumentTouchEnd);
-    document.addEventListener("touchcancel", handleDocumentTouchEnd);
-
-    return () => {
-      document.removeEventListener("mousedown", handleDocumentMouseMove);
-      document.removeEventListener("mousemove", handleDocumentMouseMove);
-      document.removeEventListener("touchstart", handleDocumentTouchMove);
-      document.removeEventListener("touchmove", handleDocumentTouchMove);
-      document.removeEventListener("mouseup", handleDocumentMouseUp);
-      document.removeEventListener("touchend", handleDocumentTouchEnd);
-      document.removeEventListener("touchcancel", handleDocumentTouchEnd);
-    };
-  }, [isScratching]);
-
-  const handleMouseDown = () => setIsScratching(true);
-
-  const handleTouchStart = () => setIsScratching(true);
+    context.fillStyle = "#ccc";
+    context.fillRect(0, 0, canvas.width, canvas.height);
+    const gradient = context.createLinearGradient(0, 0, canvas.width, canvas.height);
+    gradient.addColorStop(0, gradientColors[0]);
+    gradient.addColorStop(0.5, gradientColors[1]);
+    gradient.addColorStop(1, gradientColors[2]);
+    context.fillStyle = gradient;
+    context.fillRect(0, 0, canvas.width, canvas.height);
+  }, [gradientColors]);
 
-  const scratch = (clientX: number, clientY: number) => {
+  const scratch = React.useCallback((clientX: number, clientY: number): void => {
     const canvas = canvasRef.current;
-    const ctx = canvas?.getContext("2d");
-    if (canvas && ctx) {
-      const rect = canvas.getBoundingClientRect();
-      const x = clientX - rect.left + 16;
-      const y = clientY - rect.top + 16;
-      ctx.globalCompositeOperation = "destination-out";
-      ctx.beginPath();
-      ctx.arc(x, y, 30, 0, Math.PI * 2);
-      ctx.fill();
+    const context = canvas?.getContext("2d");
+    if (!canvas || !context) {
+      return;
     }
-  };
 
-  const startAnimation = async () => {
+    const rect = canvas.getBoundingClientRect();
+    const x = clientX - rect.left + 16;
+    const y = clientY - rect.top + 16;
+    context.globalCompositeOperation = "destination-out";
+    context.beginPath();
+    context.arc(x, y, 30, 0, Math.PI * 2);
+    context.fill();
+  }, []);
+
+  const startAnimation = React.useCallback(async (): Promise<void> => {
     await controls.start({
       scale: [1, 1.5, 1],
       rotate: [0, 10, -10, 10, -10, 0],
       transition: {duration: 0.5},
     });
 
-    // Call onComplete after animation finishes
-    if (onComplete) {
-      onComplete();
-    }
-  };
+    onComplete?.();
+  }, [controls, onComplete]);
 
-  const checkCompletion = () => {
-    if (isComplete) return;
+  const checkCompletion = React.useCallback((): void => {
+    if (isComplete) {
+      return;
+    }
 
     const canvas = canvasRef.current;
-    const ctx = canvas?.getContext("2d");
-    if (canvas && ctx) {
-      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-      const pixels = imageData.data;
-      const totalPixels = pixels.length / 4;
-      let clearPixels = 0;
-
-      for (let i = 3; i < pixels.length; i += 4) {
-        if (pixels[i] === 0) clearPixels++;
-      }
+    const context = canvas?.getContext("2d");
+    if (!canvas || !context) {
+      return;
+    }
 
-      const percentage = (clearPixels / totalPixels) * 100;
+    const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+    const pixels = imageData.data;
+    const totalPixels = pixels.length / 4;
+    let clearPixels = 0;
 
-      if (percentage >= minScratchPercentage) {
-        setIsComplete(true);
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        startAnimation();
+    for (let index = 3; index < pixels.length; index += 4) {
+      if (pixels[index] === 0) {
+        clearPixels += 1;
       }
     }
-  };
+
+    const percentage = (clearPixels / totalPixels) * 100;
+    if (percentage >= minScratchPercentage) {
+      setIsComplete(true);
+      context.clearRect(0, 0, canvas.width, canvas.height);
+      startAnimation().catch(ignoreAnimationError);
+    }
+  }, [isComplete, minScratchPercentage, startAnimation]);
+
+  useEffect(() => {
+    const handleDocumentMouseMove = (event: MouseEvent): void => {
+      if (isScratching) {
+        scratch(event.clientX, event.clientY);
+      }
+    };
+
+    const handleDocumentTouchMove = (event: TouchEvent): void => {
+      if (!isScratching) {
+        return;
+      }
+
+      const [touch] = event.touches;
+      if (!touch) {
+        return;
+      }
+
+      scratch(touch.clientX, touch.clientY);
+    };
+
+    const handleDocumentPointerEnd = (): void => {
+      setIsScratching(false);
+      checkCompletion();
+    };
+
+    globalThis.document.addEventListener("mousemove", handleDocumentMouseMove);
+    globalThis.document.addEventListener("touchmove", handleDocumentTouchMove);
+    globalThis.document.addEventListener("mouseup", handleDocumentPointerEnd);
+    globalThis.document.addEventListener("touchend", handleDocumentPointerEnd);
+    globalThis.document.addEventListener("touchcancel", handleDocumentPointerEnd);
+
+    return () => {
+      globalThis.document.removeEventListener("mousemove", handleDocumentMouseMove);
+      globalThis.document.removeEventListener("touchmove", handleDocumentTouchMove);
+      globalThis.document.removeEventListener("mouseup", handleDocumentPointerEnd);
+      globalThis.document.removeEventListener("touchend", handleDocumentPointerEnd);
+      globalThis.document.removeEventListener("touchcancel", handleDocumentPointerEnd);
+    };
+  }, [checkCompletion, isScratching, scratch]);
 
   return (
     <motion.div
-      className={cn("relative select-none", className)}
+      className={cn(styles.root, className)}
       style={{
         width,
         height,
@@ -158,10 +185,13 @@ export const Scratcher: React.FC<ScratcherProps> = ({
         ref={canvasRef}
         width={width}
         height={height}
-        className='absolute top-0 left-0'
-        onMouseDown={handleMouseDown}
-        onTouchStart={handleTouchStart}></canvas>
+        className={styles.canvas}
+        onMouseDown={() => setIsScratching(true)}
+        onTouchStart={() => setIsScratching(true)}
+      />
       {children}
     </motion.div>
   );
 };
+
+Scratcher.displayName = "Scratcher";

package/src/components/ui/scroll-area.module.css

@@ -0,0 +1,47 @@
+.root {
+  position: relative;
+  overflow: hidden;
+}
+
+.viewport {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+}
+
+.content {
+  min-width: 100%;
+}
+
+.scrollbar {
+  display: flex;
+  touch-action: none;
+  user-select: none;
+  transition: background-color var(--ac-transition-fast);
+}
+
+.vertical {
+  width: 0.625rem;
+  height: 100%;
+  padding: 1px;
+  border-left: 1px solid transparent;
+}
+
+.horizontal {
+  flex-direction: column;
+  width: 100%;
+  height: 0.625rem;
+  padding: 1px;
+  border-top: 1px solid transparent;
+}
+
+.thumb {
+  position: relative;
+  flex: 1;
+  border-radius: 999px;
+  background-color: var(--ac-border);
+}
+
+.corner {
+  background-color: transparent;
+}