@me1a/ui 2.2.7 → 2.2.8

package/dist/index.mjs

@@ -13,6 +13,7 @@ export * from "./stack/index.mjs"
 export * from "./skeleton/index.mjs"
 export * from "./sheet/index.mjs"
 export * from "./separator/index.mjs"
+export * from "./scroll-area/index.mjs"
 export * from "./resizable/index.mjs"
 export * from "./radio-group/index.mjs"
 export * from "./popover/index.mjs"

package/dist/scroll-area/index.d.mts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+
+/**
+ * ScrollArea component that provides a custom scrollable area with a styled scrollbar.
+ * Built on top of Radix UI's ScrollArea primitive.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-scroll-area--docs
+ *
+ * @example
+ * ```tsx
+ * <ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
+ *   <div className="space-y-4">
+ *     <h4 className="text-sm font-medium leading-none">Scroll Area</h4>
+ *     <p className="text-sm text-muted-foreground">
+ *       Scrollable content goes here...
+ *     </p>
+ *   </div>
+ * </ScrollArea>
+ * ```
+ */
+declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    orientation?: "vertical" | "horizontal";
+} & React.RefAttributes<HTMLDivElement>>;
+
+type ScrollAreaProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>;
+type ScrollBarProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar> & {
+    orientation?: "vertical" | "horizontal";
+};
+
+export { ScrollArea, type ScrollAreaProps, ScrollBar, type ScrollBarProps };

package/dist/scroll-area/index.mjs

@@ -0,0 +1,2 @@
+import*as c from"react";import*as r from"@radix-ui/react-scroll-area";import{clsx as s}from"clsx";import{twMerge as S}from"tailwind-merge";function a(...l){return S(s(l))}import{jsx as o,jsxs as f}from"react/jsx-runtime";var p=c.forwardRef(({className:l,children:e,...i},t)=>f(r.Root,{ref:t,className:a("relative overflow-hidden",l),...i,children:[o(r.Viewport,{className:"h-full w-full rounded-[inherit]",children:e}),o(m,{}),o(r.Corner,{})]}));p.displayName=r.Root.displayName;var m=c.forwardRef(({className:l,orientation:e="vertical",...i},t)=>o(r.ScrollAreaScrollbar,{ref:t,orientation:e,className:a("flex touch-none select-none transition-colors",e==="vertical"&&"h-full w-2.5 border-l border-l-transparent p-[1px]",e==="horizontal"&&"h-2.5 flex-col border-t border-t-transparent p-[1px]",l),...i,children:o(r.ScrollAreaThumb,{className:"relative flex-1 rounded-full bg-border"})}));m.displayName=r.ScrollAreaScrollbar.displayName;export{p as ScrollArea,m as ScrollBar};
+//# sourceMappingURL=index.mjs.map

package/dist/scroll-area/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/atoms/scroll-area/scroll-area.tsx","../../src/utils/cn.ts"],"sourcesContent":["/* eslint-disable no-use-before-define */\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport { cn } from \"@/utils/index\"\nimport { ScrollAreaProps, ScrollBarProps } from \"./scroll-area.types\"\n\n/**\n * ScrollArea component that provides a custom scrollable area with a styled scrollbar.\n * Built on top of Radix UI's ScrollArea primitive.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-scroll-area--docs\n *\n * @example\n * ```tsx\n * <ScrollArea className=\"h-[200px] w-[350px] rounded-md border p-4\">\n *   <div className=\"space-y-4\">\n *     <h4 className=\"text-sm font-medium leading-none\">Scroll Area</h4>\n *     <p className=\"text-sm text-muted-foreground\">\n *       Scrollable content goes here...\n *     </p>\n *   </div>\n * </ScrollArea>\n * ```\n */\nconst ScrollArea = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n  ScrollAreaProps\n>(({ className, children, ...props }, ref) => (\n  <ScrollAreaPrimitive.Root\n    ref={ref}\n    className={cn(\"relative overflow-hidden\", className)}\n    {...props}\n  >\n    <ScrollAreaPrimitive.Viewport className=\"h-full w-full rounded-[inherit]\">\n      {children}\n    </ScrollAreaPrimitive.Viewport>\n    <ScrollBar />\n    <ScrollAreaPrimitive.Corner />\n  </ScrollAreaPrimitive.Root>\n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n  ScrollBarProps\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n  <ScrollAreaPrimitive.ScrollAreaScrollbar\n    ref={ref}\n    orientation={orientation}\n    className={cn(\n      \"flex touch-none select-none transition-colors\",\n      orientation === \"vertical\" && \"h-full w-2.5 border-l border-l-transparent p-[1px]\",\n      orientation === \"horizontal\" && \"h-2.5 flex-col border-t border-t-transparent p-[1px]\",\n      className\n    )}\n    {...props}\n  >\n    <ScrollAreaPrimitive.ScrollAreaThumb className=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaPrimitive.ScrollAreaScrollbar>\n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":"AACA,UAAYA,MAAW,QACvB,UAAYC,MAAyB,8BCFrC,OAA0B,QAAAC,MAAY,OACtC,OAAS,WAAAC,MAAe,iBAEjB,SAASC,KAAMC,EAAsB,CAC1C,OAAOF,EAAQD,EAAKG,CAAM,CAAC,CAC7B,CDwBE,OAKE,OAAAC,EALF,QAAAC,MAAA,oBAJF,IAAMC,EAAmB,aAGvB,CAAC,CAAE,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IACpCL,EAAqB,OAApB,CACC,IAAKK,EACL,UAAWC,EAAG,2BAA4BJ,CAAS,EAClD,GAAGE,EAEJ,UAAAL,EAAqB,WAApB,CAA6B,UAAU,kCACrC,SAAAI,EACH,EACAJ,EAACQ,EAAA,EAAU,EACXR,EAAqB,SAApB,EAA2B,GAC9B,CACD,EACDE,EAAW,YAAkC,OAAK,YAElD,IAAMM,EAAkB,aAGtB,CAAC,CAAE,UAAAL,EAAW,YAAAM,EAAc,WAAY,GAAGJ,CAAM,EAAGC,IACpDN,EAAqB,sBAApB,CACC,IAAKM,EACL,YAAaG,EACb,UAAWF,EACT,gDACAE,IAAgB,YAAc,qDAC9BA,IAAgB,cAAgB,uDAChCN,CACF,EACC,GAAGE,EAEJ,SAAAL,EAAqB,kBAApB,CAAoC,UAAU,yCAAyC,EAC1F,CACD,EACDQ,EAAU,YAAkC,sBAAoB","names":["React","ScrollAreaPrimitive","clsx","twMerge","cn","inputs","jsx","jsxs","ScrollArea","className","children","props","ref","cn","ScrollBar","orientation"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@me1a/ui",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "private": false,
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
@@ -77,6 +77,10 @@
       "types": "./dist/separator/index.d.mts",
       "import": "./dist/separator/index.mjs"
     },
+    "./scroll-area": {
+      "types": "./dist/scroll-area/index.d.mts",
+      "import": "./dist/scroll-area/index.mjs"
+    },
     "./resizable": {
       "types": "./dist/resizable/index.d.mts",
       "import": "./dist/resizable/index.mjs"
@@ -302,6 +306,7 @@
     "@radix-ui/react-navigation-menu": "^1.2.12",
     "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-radio-group": "^1.3.7",
+    "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-separator": "^1.1.6",
     "@radix-ui/react-slot": "^1.2.3",