@react-fabric/data 1.0.0-beta.6 → 1.0.0-beta.61

package/src/virtual/Gallery.tsx

@@ -50,7 +50,7 @@ export interface VirtualGalleryRef {
 
 export interface VirtualGalleryProps<T> extends TestProps {
   children: (props: {
-    data: T;
+    item: T;
     index: number;
     isLast: boolean;
   }) => ReactElement;
@@ -67,6 +67,12 @@ export interface VirtualGalleryProps<T> extends TestProps {
    * default item width
    */
   defaultWidth?: number;
+  /**
+   * full width list
+   */
+  fullWidth?: boolean;
+  maxWidth?: string | number;
+  minWidth?: string | number;
   /**
    * padding
    */
@@ -75,6 +81,7 @@ export interface VirtualGalleryProps<T> extends TestProps {
    * data list
    */
   items: T[];
+  total?: number;
   /**
    * loading state
    */
@@ -87,7 +94,7 @@ export interface VirtualGalleryProps<T> extends TestProps {
   /**
    * load more callback
    */
-  onLoadMore?: () => void;
+  onLoadMore?: (lastIndex?: number) => void;
   /**
    * scroll handler
    */
@@ -96,10 +103,14 @@ export interface VirtualGalleryProps<T> extends TestProps {
 
 const createItemList = memoize((items) => items);
 
-const _VirtualGallery = <T extends KeyValue>({
+const _VirtualGallery = <T extends AnyObject>({
   items,
   children,
   columns,
+  fullWidth,
+  maxWidth,
+  minWidth,
+  total = 0,
   padding = "md",
   defaultHeight: height = 48,
   defaultWidth: width = 48,
@@ -112,18 +123,18 @@ const _VirtualGallery = <T extends KeyValue>({
   ...aria
 }: VirtualGalleryProps<T>) => {
   const count = useDeferredValue(items.length);
-  const extraSize = useMemo(() => (onLoadMore ? 64 : 0), [onLoadMore]);
+  const extraSize = useMemo(() => (onLoadMore ? 8 : 0), [onLoadMore]);
   const itemList: Array<{
     index: number;
-    data: T;
+    item: T;
     isLast: boolean;
     isSticky: boolean;
   }> = createItemList(
-    items.map((item: AnyObject, idx) => {
+    items.map((item: AnyObject, index) => {
       return {
-        index: idx,
-        data: item,
-        isLast: idx + 1 === items.length,
+        index,
+        item,
+        isLast: index + 1 === items.length,
       };
     }),
   );
@@ -139,9 +150,19 @@ const _VirtualGallery = <T extends KeyValue>({
       if (scrollerRef.current) {
         const el = scrollerRef.current;
         const handler = () => {
+          const pad = parseInt(
+            getComputedStyle(el.firstElementChild?.firstElementChild as any)
+              .padding ?? 8,
+          );
           setColumnCount(
             columns ??
-              Math.max(1, Math.floor(((el?.offsetWidth ?? 800) - 32) / width)),
+              Math.max(
+                1,
+                Math.floor(
+                  ((el?.offsetWidth ?? 800) - 32 - (isNaN(pad) ? 8 : pad) * 2) /
+                    width,
+                ),
+              ),
           );
         };
         const ob = new ResizeObserver(handler);
@@ -161,13 +182,14 @@ const _VirtualGallery = <T extends KeyValue>({
     count: Math.ceil(count / columnCount),
     getScrollElement: () => scrollerRef.current,
     estimateSize: () => height,
+    overscan: 0,
   });
 
   const virtualItems = virtualizer.getVirtualItems();
 
   const currentIndex = useRef(0);
   useEffect(() => {
-    currentIndex.current = virtualItems[1]?.index ?? 0;
+    currentIndex.current = virtualItems[0]?.index ?? 0;
     if (
       scrollerRef.current &&
       virtualItems[0] &&
@@ -205,47 +227,44 @@ const _VirtualGallery = <T extends KeyValue>({
   }, [count, calculateActiveScroll]);
 
   useEffect(() => {
-    const db = debounce(() => {
-      const lastItem = virtualItems?.slice(-1).pop();
-      if (
-        lastItem &&
-        !loading &&
-        lastItem.index * columnCount + columnCount >= count - 1
-      )
-        onLoadMore?.();
-    });
-    db();
-    return () => db.cancel();
-  }, [onLoadMore, loading, itemList, virtualItems, count, columnCount]);
-
-  useEffect(() => {
-    const firstItem = virtualItems[0]?.index;
-    if (
-      onLoadMore &&
-      firstItem !== undefined &&
-      items[firstItem * columnCount] === null
-    ) {
+    if (onLoadMore) {
+      const firstItem = virtualItems[0]?.index;
+      const lastItem = virtualItems?.slice(-1).pop()?.index;
+      const firstIndex = firstItem * columnCount;
+      const lastIndex = (lastItem ?? 0) * columnCount + columnCount;
+      const canLoadPrevPage =
+        firstItem !== undefined && items[firstIndex] === null;
+      const canLoadNextPage =
+        lastItem !== undefined && lastIndex >= count - 1 && count < total;
       const db = debounce(onLoadMore);
-      db(firstItem * columnCount);
+      if (canLoadPrevPage) {
+        db(firstIndex);
+      } else if (!loading && canLoadNextPage) {
+        db(lastIndex + 1);
+      }
       return () => db.cancel();
     }
-  }, [onLoadMore, items, columnCount, virtualItems, count]);
+  }, [onLoadMore, virtualItems]);
 
+  const isRenderedRef = useRef(false);
   useLayoutEffect(() => {
-    setTimeout(() => {
+    if (!isRenderedRef.current && itemList.length > 0) {
+      isRenderedRef.current = true;
       initialScroll &&
-        virtualizer.scrollToIndex(Math.floor(initialScroll / columnCount), {
-          align: "start",
-        });
-    }, 100);
-  }, [columnCount]);
+        setTimeout(() => {
+          virtualizer.scrollToIndex(Math.floor(initialScroll / columnCount), {
+            align: "start",
+          });
+        }, 200);
+    }
+  }, [columnCount, initialScroll, itemList]);
 
   useImperativeHandle(
     galleryRef,
     () => ({
       scrollToItem(index) {
         virtualizer.scrollToIndex(Math.floor(index / columnCount), {
-          align: "start",
+          align: "auto",
         });
       },
       hilight(index) {
@@ -253,7 +272,7 @@ const _VirtualGallery = <T extends KeyValue>({
           ?.querySelector(".hilight")
           ?.classList.remove("hilight", "ring-1");
         virtualizer.scrollToIndex(Math.floor(index / columnCount), {
-          align: "start",
+          align: "auto",
         });
         setTimeout(() => {
           scrollerRef.current
@@ -274,53 +293,65 @@ const _VirtualGallery = <T extends KeyValue>({
     <div
       ref={scrollerRef}
       onScroll={handleScroll}
-      className={classNames(
-        "area-content bg-base overflow-auto contain-strict",
-      )}
+      className={classNames("area-content bg-base overflow-auto")}
       {...aria}
     >
       <div
         className={classNames(
-          "inline-flex flex-nowrap gap-2 justify-center min-h-full min-w-full",
+          "flex flex-nowrap justify-center gap-2 min-h-full",
         )}
       >
         <div
           className={classNames(
             "box-content",
+            fullWidth && "flex-1",
             padding === "sm" && "p-1",
             padding === "md" && "p-2",
             padding === "lg" && "p-4",
           )}
+          style={{
+            minWidth,
+            maxWidth,
+          }}
         >
           <div
             style={{
-              height: virtualizer.getTotalSize(),
+              height: virtualizer.getTotalSize() + extraSize,
             }}
           >
             <div style={{ height: virtualItems[0]?.start }} />
-            {virtualItems.map(({ key, index, measureElement }) => (
+            {virtualItems.map(({ key, index }) => (
               <div
                 className="flex"
                 key={key}
                 data-index={index}
-                ref={measureElement}
+                ref={virtualizer.measureElement}
               >
                 {columnMap.map((col) => (
                   <div
                     key={`${key}:${col}`}
                     data-index={index * columnCount + col}
                     className={classNames("grid rounded-capped")}
+                    style={{
+                      minWidth: width,
+                      minHeight: height,
+                    }}
                   >
-                    {itemList[index * columnCount + col] &&
-                      children(
-                        itemList[index * columnCount + col] as AnyObject,
-                      )}
+                    {itemList[index * columnCount + col]?.item
+                      ? children(
+                          itemList[index * columnCount + col] as AnyObject,
+                        )
+                      : itemList[index * columnCount + col]?.item === null && (
+                          <Skeleton className="p-2" />
+                        )}
                   </div>
                 ))}
               </div>
             ))}
-            {onLoadMore && (
-              <div className="h-16">{loading && <Skeleton />}</div>
+            {loading && (
+              <div>
+                <Skeleton />
+              </div>
             )}
           </div>
         </div>
@@ -349,4 +380,37 @@ const _VirtualGallery = <T extends KeyValue>({
 _VirtualGallery.displayName = "VirtualGallery";
 
 const GenericMemo: <T>(c: T) => T = memo;
+
+/**
+ * VirtualGallery component provides a virtualized gallery view for displaying a large list of items efficiently.
+ * It supports features like fixed columns, loading states, and customizable item rendering.
+ * The component uses virtualization to render only the visible items, improving performance for large datasets.
+ * It also provides a scroller for easy navigation through the items.
+ *
+ * @param {VirtualGalleryProps<T>} props - The properties for the VirtualGallery component.
+ * @returns {JSX.Element} The rendered VirtualGallery component.
+ *
+ * @example
+ * ```jsx
+ * <VirtualGallery
+ *   items={items}
+ *   columns={3}
+ *   defaultHeight={100}
+ *   defaultWidth={100}
+ *   fullWidth={true}
+ *   onLoadMore={(lastIndex) => console.log("Load more items from index:", lastIndex)}
+ *   onScroll={(top) => console.log("Scrolled to top:", top)}
+ * >
+ *   {({ item, index, isLast }) => (
+ *     <div className="gallery-item" key={item.id}>
+ *       <img src={item.image} alt={item.label} />
+ *       <p>{item.label}</p>
+ *     </div>
+ *   )}
+ * </VirtualGallery>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/data-virtualgallery--docs}
+ * @see {@link https://tanstack.com/docs/react-virtual/latest/overview}
+ */
 export const VirtualGallery = GenericMemo(_VirtualGallery);

package/src/virtual/List.tsx

@@ -57,7 +57,7 @@ export interface VirtualListRef {
 
 export interface VirtualListProps<T> extends TestProps {
   children: (props: {
-    data: T;
+    item: T;
     index: number;
     isLast: boolean;
   }) => ReactElement;
@@ -74,6 +74,8 @@ export interface VirtualListProps<T> extends TestProps {
    * full width list
    */
   fullWidth?: boolean;
+  maxWidth?: string | number;
+  minWidth?: string | number;
   /**
    * padding
    */
@@ -86,6 +88,7 @@ export interface VirtualListProps<T> extends TestProps {
    * data list
    */
   items: T[];
+  total?: number;
   initialScroll?: number;
   /**
    * loading state
@@ -98,7 +101,7 @@ export interface VirtualListProps<T> extends TestProps {
   /**
    * load more callback
    */
-  onLoadMore?: (page?: number) => void;
+  onLoadMore?: (lastIndex?: number) => void;
   /**
    * scroll handler
    */
@@ -107,10 +110,13 @@ export interface VirtualListProps<T> extends TestProps {
 
 const createItemList = memoizeOne((items) => items);
 
-const _VirtualList = <T extends KeyValue>({
+const _VirtualList = <T extends AnyObject>({
   items,
+  total = 0,
   children,
   fullWidth,
+  maxWidth,
+  minWidth,
   padding = "md",
   orientation = "vertical",
   defaultHeight: height = 48,
@@ -124,18 +130,18 @@ const _VirtualList = <T extends KeyValue>({
   ...aria
 }: VirtualListProps<T>) => {
   const count = useDeferredValue(items.length);
-  const extraSize = useMemo(() => (onLoadMore ? 64 : 0), [onLoadMore]);
+  const extraSize = useMemo(() => (onLoadMore ? 8 : 0), [onLoadMore]);
   const itemList: Array<{
     index: number;
-    data: T;
+    item: T;
     isLast: boolean;
     isSticky: boolean;
   }> = createItemList(
-    items.map((item: AnyObject, idx) => {
+    items.map((item: AnyObject, index) => {
       return {
-        index: idx,
-        data: item,
-        isLast: idx + 1 === items.length,
+        index,
+        item,
+        isLast: index + 1 === items.length,
       };
     }),
   );
@@ -143,6 +149,7 @@ const _VirtualList = <T extends KeyValue>({
   const scrollerRef = useRef<HTMLDivElement>(null);
   const virtualizer = useVirtualizer({
     count,
+    overscan: 0,
     horizontal: orientation === "horizontal",
     getScrollElement: () => scrollerRef.current,
     estimateSize: () => (orientation === "horizontal" ? width : height),
@@ -152,7 +159,7 @@ const _VirtualList = <T extends KeyValue>({
 
   const currentIndex = useRef(0);
   useEffect(() => {
-    currentIndex.current = virtualItems[1]?.index ?? 0;
+    currentIndex.current = virtualItems[0]?.index ?? 0;
     if (
       scrollerRef.current &&
       virtualItems[0] &&
@@ -201,42 +208,48 @@ const _VirtualList = <T extends KeyValue>({
   }, [itemList, calculateActiveScroll]);
 
   useEffect(() => {
-    const db = debounce(() => {
-      const lastItem = virtualItems?.slice(-1).pop();
-      if (lastItem && !loading && lastItem.index === count - 1) onLoadMore?.();
-    });
-    db();
-    return () => db.cancel();
-  }, [onLoadMore, loading, itemList, virtualItems, count]);
-
-  useEffect(() => {
-    const firstItem = virtualItems[0]?.index;
-    if (onLoadMore && firstItem !== undefined && items[firstItem] === null) {
+    if (onLoadMore) {
+      const firstItem = virtualItems[0]?.index;
+      const lastItem = virtualItems?.slice(-1).pop()?.index;
+      const canLoadPrevPage =
+        firstItem !== undefined && items[firstItem] === null;
+      const canLoadNextPage =
+        lastItem !== undefined && lastItem === count - 1 && count < total;
       const db = debounce(onLoadMore);
-      db(firstItem);
+      if (canLoadPrevPage) {
+        db(firstItem);
+      } else if (!loading && canLoadNextPage) {
+        db(lastItem + 1);
+      }
       return () => db.cancel();
     }
-  }, [onLoadMore, items, virtualItems, count]);
+  }, [onLoadMore, virtualItems]);
 
+  const isRenderedRef = useRef(false);
   useLayoutEffect(() => {
-    setTimeout(() => {
+    if (!isRenderedRef.current && itemList.length > 0) {
+      isRenderedRef.current = true;
       initialScroll &&
-        virtualizer.scrollToIndex(initialScroll, { align: "start" });
-    }, 100);
-  }, []);
+        setTimeout(() => {
+          virtualizer.scrollToIndex(Math.floor(initialScroll), {
+            align: "start",
+          });
+        }, 200);
+    }
+  }, [itemList, initialScroll]);
 
   useImperativeHandle(
     listRef,
     () => ({
       scrollToItem(index) {
-        virtualizer.scrollToIndex(index, { align: "start" });
+        virtualizer.scrollToIndex(index, { align: "auto" });
       },
       hilight(index) {
         scrollerRef.current
           ?.querySelector(".hilight")
           ?.classList.remove("hilight", "ring-1");
         virtualizer.scrollToIndex(Math.floor(index), {
-          align: "start",
+          align: "auto",
         });
         setTimeout(() => {
           scrollerRef.current
@@ -257,14 +270,12 @@ const _VirtualList = <T extends KeyValue>({
     <div
       ref={scrollerRef}
       onScroll={handleScroll}
-      className={classNames(
-        "area-content bg-base overflow-auto contain-strict",
-      )}
+      className={classNames("area-content bg-base overflow-auto")}
       {...aria}
     >
       <div
         className={classNames(
-          "inline-flex flex-nowrap gap-2 justify-center min-h-full min-w-full",
+          "flex flex-nowrap gap-2 justify-center min-h-full min-w-full",
           orientation === "horizontal" && "flex-col",
         )}
       >
@@ -278,12 +289,16 @@ const _VirtualList = <T extends KeyValue>({
             padding === "md" && "p-2",
             padding === "lg" && "p-4",
           )}
+          style={{
+            minWidth,
+            maxWidth,
+          }}
         >
           <div
             style={
               orientation === "vertical"
-                ? { height: virtualizer.getTotalSize() }
-                : { width: virtualizer.getTotalSize() }
+                ? { height: virtualizer.getTotalSize() + extraSize }
+                : { width: virtualizer.getTotalSize() + extraSize }
             }
           >
             <div
@@ -302,14 +317,22 @@ const _VirtualList = <T extends KeyValue>({
                   "rounded-capped",
                   orientation === "horizontal" ? "inline-grid" : "grid",
                 )}
+                style={{
+                  minWidth: width,
+                  minHeight: height,
+                }}
               >
-                {children(itemList[index] as AnyObject)}
+                {itemList[index]?.item
+                  ? children(itemList[index] as AnyObject)
+                  : itemList[index]?.item === null && (
+                      <Skeleton className="p-2" />
+                    )}
               </div>
             ))}
           </div>
-          {onLoadMore && (
-            <div className={orientation === "horizontal" ? "min-w-16" : "h-16"}>
-              {loading && <Skeleton />}
+          {loading && (
+            <div className={orientation === "horizontal" ? "min-w-16" : ""}>
+              <Skeleton />
             </div>
           )}
         </div>
@@ -351,4 +374,41 @@ const _VirtualList = <T extends KeyValue>({
 _VirtualList.displayName = "VirtualList";
 
 const GenericMemo: <T>(c: T) => T = memo;
+
+/**
+ * VirtualList component for rendering large lists efficiently using virtualization.
+ * It supports horizontal and vertical orientations, custom item heights and widths,
+ * and provides a scroller for navigating through the list.
+ * It also supports loading more items on scroll and provides a way to hilight items.
+ * It can be used with a ref to control scrolling and hilighting of items.
+ *
+ * @param {VirtualListProps<T>} props - The properties for the VirtualList component.
+ * @returns {JSX.Element} The rendered VirtualList component.
+ * @template T - The type of items in the list, extending AnyObject.
+ *
+ * @example
+ * ```jsx
+ * <VirtualList
+ *   items={items}
+ *   children={({ item, index, isLast }) => (
+ *     <div key={index} className="item">
+ *       {item.label}
+ *     </div>
+ *   )}
+ *   fullWidth={true}
+ *   orientation="vertical"
+ *   defaultHeight={50}
+ *   onLoadMore={(lastIndex) => console.log("Load more items from index:", lastIndex)}
+ *   onScroll={(top) => console.log("Scrolled to top:", top)}
+ *   listRef={virtualListRef}
+ * >
+ *   {({ item, index, isLast }) => (
+ *     <div className="gallery-item" key={item.id}>
+ *       <img src={item.image} alt={item.label} />
+ *       <p>{item.label}</p>
+ *     </div>
+ *   )}
+ * </VirtualList>
+ * ```
+ */
 export const VirtualList = GenericMemo(_VirtualList);

package/src/virtual/Scroller.tsx

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Button, ButtonGroup, CoreIcons } from "@react-fabric/core";
+import { Button, ButtonGroup } from "@react-fabric/core";
 
 export const Scroller = ({
   vertical = true,
@@ -41,38 +41,54 @@ export const Scroller = ({
   return (
     <ButtonGroup vertical={vertical} variant="link" className="outline">
       <Button
-        rtlFlip
         size="sm"
         variant="link"
         aria-label="scroll to top"
-        icon={vertical ? CoreIcons.chevronsUp : CoreIcons.chevronsLeft}
+        icon={{
+          icon: vertical
+            ? "icon-[mdi--chevron-double-up]"
+            : "icon-[mdi--chevron-double-left]",
+          rtlFlip: true,
+        }}
         disabled={(scrollActive & 2) === 0}
         onClick={onStart}
       />
       <Button
-        rtlFlip
         size="sm"
         variant="link"
         aria-label="scroll up"
-        icon={vertical ? CoreIcons.chevronUp : CoreIcons.chevronLeft}
+        icon={{
+          icon: vertical
+            ? "icon-[mdi--chevron-up]"
+            : "icon-[mdi--chevron-left]",
+          rtlFlip: true,
+        }}
         disabled={(scrollActive & 2) === 0}
         onClick={onPrevious}
       />
       <Button
-        rtlFlip
         size="sm"
         variant="link"
         aria-label="scroll down"
-        icon={vertical ? CoreIcons.chevronDown : CoreIcons.chevronRight}
+        icon={{
+          icon: vertical
+            ? "icon-[mdi--chevron-down]"
+            : "icon-[mdi--chevron-right]",
+          rtlFlip: true,
+        }}
         disabled={scrollActive % 2 === 0}
         onClick={onNext}
       />
       <Button
-        rtlFlip
         size="sm"
         variant="link"
         aria-label="scroll to bottom"
-        icon={vertical ? CoreIcons.chevronsDown : CoreIcons.chevronsRight}
+        icon={{
+          icon: vertical
+            ? "icon-[mdi--chevron-double-down]"
+            : "icon-[mdi--chevron-double-right]",
+          rtlFlip: true,
+        }}
         disabled={scrollActive % 2 === 0}
         onClick={onEnd}
       />

package/dist/cjs/histogram/Histogram.module.css

@@ -1 +0,0 @@
-@layer comp{.histogram{.histoLabel{--tw-gradient-from:var(--color) var(--tw-gradient-from-position);--tw-gradient-to:color-mix(in lab,var(--color) 20%,var(--fabric-bg)) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);background-color:color(from var(--color) srgb r g b/5%);&:hover{background-color:color(from var(--color) srgb r g b/15%)}&[data-disabled=true]{--color:theme(colors.tint.300);color:theme(colors.tint.600)}}.histoBar{box-shadow:-2px 0 0 var(--color) inset;:global([dir=rtl]) &{box-shadow:2px 0 0 var(--color) inset}}.histoBadge{background-color:color(from var(--color) srgb r g b/15%)}}}

package/dist/cjs/tree/types.js

@@ -1,30 +0,0 @@
-'use strict';
-
-/*
- * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-var iconExpandAll = "M12.984 9v6h3l-3.984 3.984-3.984-3.984h3v-6h-3l3.984-3.984 3.984 3.984h-3zM3.984 2.016h16.031v1.969h-16.031v-1.969zM3.984 20.016h16.031v1.969h-16.031v-1.969z";
-var iconCollapseAll = "M3.984 11.016h16.031v1.969h-16.031v-1.969zM15.984 5.016l-3.984 3.984-3.984-3.984h3v-4.031h1.969v4.031h3zM8.016 18.984l3.984-3.984 3.984 3.984h-3v4.031h-1.969v-4.031h-3z";
-
-exports.iconCollapseAll = iconCollapseAll;
-exports.iconExpandAll = iconExpandAll;

package/dist/esm/histogram/Histogram.module.css

@@ -1 +0,0 @@
-@layer comp{.histogram{.histoLabel{--tw-gradient-from:var(--color) var(--tw-gradient-from-position);--tw-gradient-to:color-mix(in lab,var(--color) 20%,var(--fabric-bg)) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);background-color:color(from var(--color) srgb r g b/5%);&:hover{background-color:color(from var(--color) srgb r g b/15%)}&[data-disabled=true]{--color:theme(colors.tint.300);color:theme(colors.tint.600)}}.histoBar{box-shadow:-2px 0 0 var(--color) inset;:global([dir=rtl]) &{box-shadow:2px 0 0 var(--color) inset}}.histoBadge{background-color:color(from var(--color) srgb r g b/15%)}}}