@byline/ui 1.10.2 → 1.11.0

package/src/components/notifications/toast.module.css

@@ -16,7 +16,7 @@
      ============================================ */
 
   .viewport,
-  :global(.infonomic-toast-viewport) {
+  :global(.byline-toast-viewport) {
     --viewport-padding: 16px;
     position: fixed;
     display: flex;
@@ -29,28 +29,28 @@
   /* Mobile: full-width at all positions */
 
   .top-left,
-  :global(.infonomic-toast-top-left) {
+  :global(.byline-toast-top-left) {
     top: 88px;
     right: var(--viewport-padding);
     left: var(--viewport-padding);
   }
 
   .top-right,
-  :global(.infonomic-toast-top-right) {
+  :global(.byline-toast-top-right) {
     top: 88px;
     right: var(--viewport-padding);
     left: var(--viewport-padding);
   }
 
   .bottom-left,
-  :global(.infonomic-toast-bottom-left) {
+  :global(.byline-toast-bottom-left) {
     bottom: var(--viewport-padding);
     right: var(--viewport-padding);
     left: var(--viewport-padding);
   }
 
   .bottom-right,
-  :global(.infonomic-toast-bottom-right) {
+  :global(.byline-toast-bottom-right) {
     bottom: var(--viewport-padding);
     right: var(--viewport-padding);
     left: var(--viewport-padding);
@@ -58,7 +58,7 @@
 
   @media (min-width: 48rem) {
     .bottom-right,
-    :global(.infonomic-toast-bottom-right) {
+    :global(.byline-toast-bottom-right) {
       bottom: var(--viewport-padding);
       right: var(--viewport-padding);
       left: auto;
@@ -67,7 +67,7 @@
     }
 
     .bottom-left,
-    :global(.infonomic-toast-bottom-left) {
+    :global(.byline-toast-bottom-left) {
       bottom: var(--viewport-padding);
       left: var(--viewport-padding);
       right: auto;
@@ -76,7 +76,7 @@
     }
 
     .top-left,
-    :global(.infonomic-toast-top-left) {
+    :global(.byline-toast-top-left) {
       top: 88px;
       left: var(--viewport-padding);
       right: auto;
@@ -86,7 +86,7 @@
     }
 
     .top-right,
-    :global(.infonomic-toast-top-right) {
+    :global(.byline-toast-top-right) {
       top: 88px;
       right: var(--viewport-padding);
       bottom: auto;
@@ -101,7 +101,7 @@
      ============================================ */
 
   .root,
-  :global(.infonomic-toast-root) {
+  :global(.byline-toast-root) {
     display: flex;
     flex-direction: column;
     gap: var(--gap-1);
@@ -122,7 +122,7 @@
 
   /* Entry animation */
   .root[data-starting-style],
-  :global(.infonomic-toast-root[data-starting-style]) {
+  :global(.byline-toast-root[data-starting-style]) {
     opacity: 0;
     transform: translateY(calc(100% + var(--viewport-padding)));
   }
@@ -130,16 +130,16 @@
   @media (min-width: 48rem) {
     .viewport.top-right .root[data-starting-style],
     .viewport.bottom-right .root[data-starting-style],
-    :global(.infonomic-toast-viewport.top-right .infonomic-toast-root[data-starting-style]),
-    :global(.infonomic-toast-viewport.bottom-right .infonomic-toast-root[data-starting-style]) {
+    :global(.byline-toast-viewport.top-right .byline-toast-root[data-starting-style]),
+    :global(.byline-toast-viewport.bottom-right .byline-toast-root[data-starting-style]) {
       opacity: 0;
       transform: translateX(calc(100% + var(--viewport-padding)));
     }
 
     .viewport.top-left .root[data-starting-style],
     .viewport.bottom-left .root[data-starting-style],
-    :global(.infonomic-toast-viewport.top-left .infonomic-toast-root[data-starting-style]),
-    :global(.infonomic-toast-viewport.bottom-left .infonomic-toast-root[data-starting-style]) {
+    :global(.byline-toast-viewport.top-left .byline-toast-root[data-starting-style]),
+    :global(.byline-toast-viewport.bottom-left .byline-toast-root[data-starting-style]) {
       opacity: 0;
       transform: translateX(calc(-100% - var(--viewport-padding)));
     }
@@ -147,22 +147,22 @@
 
   /* Exit animation */
   .root[data-ending-style],
-  :global(.infonomic-toast-root[data-ending-style]) {
+  :global(.byline-toast-root[data-ending-style]) {
     opacity: 0;
   }
 
   .root[data-ending-style][data-swipe-direction="right"],
-  :global(.infonomic-toast-root[data-ending-style][data-swipe-direction="right"]) {
+  :global(.byline-toast-root[data-ending-style][data-swipe-direction="right"]) {
     transform: translateX(calc(var(--toast-swipe-movement-x, 0) + 100% + var(--viewport-padding)));
   }
 
   .root[data-ending-style][data-swipe-direction="left"],
-  :global(.infonomic-toast-root[data-ending-style][data-swipe-direction="left"]) {
+  :global(.byline-toast-root[data-ending-style][data-swipe-direction="left"]) {
     transform: translateX(calc(var(--toast-swipe-movement-x, 0) - 100% - var(--viewport-padding)));
   }
 
   .root[data-ending-style][data-swipe-direction="down"],
-  :global(.infonomic-toast-root[data-ending-style][data-swipe-direction="down"]) {
+  :global(.byline-toast-root[data-ending-style][data-swipe-direction="down"]) {
     transform: translateY(calc(var(--toast-swipe-movement-y, 0) + 150%));
   }
 
@@ -171,7 +171,7 @@
      ============================================ */
 
   .content,
-  :global(.infonomic-toast-content) {
+  :global(.byline-toast-content) {
     display: flex;
     flex-direction: column;
     gap: var(--gap-1);
@@ -182,7 +182,7 @@
      ============================================ */
 
   .header,
-  :global(.infonomic-toast-header) {
+  :global(.byline-toast-header) {
     display: flex;
     padding: 0 16px 0 12px;
     align-items: start;
@@ -191,7 +191,7 @@
   }
 
   .close,
-  :global(.infonomic-toast-close) {
+  :global(.byline-toast-close) {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -206,12 +206,12 @@
   }
 
   .close svg,
-  :global(.infonomic-toast-close svg) {
+  :global(.byline-toast-close svg) {
     fill: white;
   }
 
   .title,
-  :global(.infonomic-toast-title) {
+  :global(.byline-toast-title) {
     display: flex;
     padding: 0 12px 0 8px;
     align-items: start;
@@ -222,7 +222,7 @@
   }
 
   .description,
-  :global(.infonomic-toast-description) {
+  :global(.byline-toast-description) {
     margin: 0;
     padding: 0 8px 0 12px;
     font-size: var(--font-size-sm);
@@ -230,7 +230,7 @@
   }
 
   .action,
-  :global(.infonomic-toast-action) {
+  :global(.byline-toast-action) {
     display: flex;
     justify-content: end;
     padding: 0 12px 0 12px;

package/src/components/notifications/toast.tsx

@@ -55,7 +55,7 @@ export function ToastViewport({ position = 'bottom-right', className }: ToastVie
   return (
     <ToastPrimitive.Portal>
       <ToastPrimitive.Viewport
-        className={cx('infonomic-toast-viewport', styles.viewport, styles[position], className)}
+        className={cx('byline-toast-viewport', styles.viewport, styles[position], className)}
       >
         {toasts.map((toast) => (
           <ToastItem key={toast.id} toast={toast} />
@@ -78,10 +78,10 @@ function ToastItem({ toast }: { toast: ToastPrimitive.Root.ToastObject<ToastData
     <ToastPrimitive.Root
       toast={toast}
       swipeDirection={swipeDirection}
-      className={cx('infonomic-toast', styles.root)}
+      className={cx('byline-toast', styles.root)}
     >
-      <ToastPrimitive.Content className={cx('infonomic-toast-content', styles.content)}>
-        <div className={cx('infonomic-toast-header', styles.header)}>
+      <ToastPrimitive.Content className={cx('byline-toast-content', styles.content)}>
+        <div className={cx('byline-toast-header', styles.header)}>
           <time dateTime={eventDateRef.current.toISOString()} className="text-sm">
             {new Intl.DateTimeFormat('default', {
               hour12: true,
@@ -97,7 +97,7 @@ function ToastItem({ toast }: { toast: ToastPrimitive.Root.ToastObject<ToastData
                   tabIndex={0}
                   variant="filled"
                   aria-label="Close"
-                  className={cx('infonomic-toast-close', styles.close)}
+                  className={cx('byline-toast-close', styles.close)}
                   type="button"
                 />
               }
@@ -106,13 +106,11 @@ function ToastItem({ toast }: { toast: ToastPrimitive.Root.ToastObject<ToastData
             </ToastPrimitive.Close>
           )}
         </div>
-        <ToastPrimitive.Title className={cx('infonomic-toast-title', styles.title)}>
+        <ToastPrimitive.Title className={cx('byline-toast-title', styles.title)}>
           {icon && Icon && <Icon />}
           {toast.title}
         </ToastPrimitive.Title>
-        <ToastPrimitive.Description
-          className={cx('infonomic-toast-description', styles.description)}
-        >
+        <ToastPrimitive.Description className={cx('byline-toast-description', styles.description)}>
           {toast.description}
         </ToastPrimitive.Description>
       </ToastPrimitive.Content>

package/src/components/pager/pagination.module.css

@@ -11,14 +11,14 @@
 
 @layer byline-components {
   .pagination-root,
-  :global(.infonomic-pagination-root) {
+  :global(.byline-pagination-root) {
     display: flex;
     padding: 0;
     align-items: center;
   }
 
   .pagination-items,
-  :global(.infonomic-pagination-items) {
+  :global(.byline-pagination-items) {
     display: flex;
     align-items: center;
     list-style: none;
@@ -26,18 +26,18 @@
 
   .pagination-items.dashboard li,
   .pagination-items.default li,
-  :global(.infonomic-pagination-items.dashboard) li,
-  :global(.infonomic-pagination-items.default) li {
+  :global(.byline-pagination-items.dashboard) li,
+  :global(.byline-pagination-items.default) li {
     margin-right: -1px;
   }
 
   .pagination-items.classic li,
-  :global(.infonomic-pagination-items.classic) li {
+  :global(.byline-pagination-items.classic) li {
     margin-right: 0;
   }
 
   .pagination-items.classic,
-  :global(.infonomic-pagination-items.classic) {
+  :global(.byline-pagination-items.classic) {
     gap: 6px;
   }
 

package/src/components/pager/pagination.tsx

@@ -231,7 +231,7 @@ const Root = ({
       data-testid={dataTestId}
       ref={ref}
       className={cx(
-        'infonomic-pagination-root',
+        'byline-pagination-root',
         styles['pagination-root'],
         'pagination-root',
         className
@@ -241,7 +241,7 @@ const Root = ({
     >
       <ul
         className={cx(
-          'infonomic-pagination-items',
+          'byline-pagination-items',
           styles['pagination-items'],
           styles[variant],
           itemsClassName

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

@@ -11,7 +11,7 @@
 
 @layer byline-components {
   .root,
-  :global(.infonomic-scroll-area) {
+  :global(.byline-scroll-area) {
     border-radius: 4px;
     overflow: hidden;
     background-color: inherit;
@@ -19,14 +19,14 @@
   }
 
   .viewport,
-  :global(.infonomic-scroll-area-viewport) {
+  :global(.byline-scroll-area-viewport) {
     width: 100%;
     height: 100%;
     border-radius: inherit;
   }
 
   .scrollbar,
-  :global(.infonomic-scroll-area-scrollbar) {
+  :global(.byline-scroll-area-scrollbar) {
     display: flex;
     /* ensures no selection */
     user-select: none;
@@ -51,7 +51,7 @@
   }
 
   .thumb,
-  :global(.infonomic-scroll-area-thumb) {
+  :global(.byline-scroll-area-thumb) {
     flex: 1;
     background: var(--surface-panel-scrollbar-thumb);
     border-radius: var(--border-radius-sm);
@@ -72,7 +72,7 @@
   }
 
   .corner,
-  :global(.infonomic-scroll-area-corner) {
+  :global(.byline-scroll-area-corner) {
     background: var(--surface-panel-scrollbar);
   }
 }

package/src/components/scroll-area/scroll-area.tsx

@@ -10,23 +10,23 @@ interface ScrollAreaProps extends React.ComponentProps<typeof ScrollAreaPrimitiv
 export const ScrollArea = ({ children, style, className }: ScrollAreaProps) => (
   <ScrollAreaPrimitive.Root
     style={style}
-    className={cx('infonomic-scroll-area', styles.root, className)}
+    className={cx('byline-scroll-area', styles.root, className)}
   >
-    <ScrollAreaPrimitive.Viewport className={cx('infonomic-scroll-area-viewport', styles.viewport)}>
+    <ScrollAreaPrimitive.Viewport className={cx('byline-scroll-area-viewport', styles.viewport)}>
       <ScrollAreaPrimitive.Content>{children}</ScrollAreaPrimitive.Content>
     </ScrollAreaPrimitive.Viewport>
     <ScrollAreaPrimitive.Scrollbar
-      className={cx('infonomic-scroll-area-scrollbar', styles.scrollbar)}
+      className={cx('byline-scroll-area-scrollbar', styles.scrollbar)}
       orientation="vertical"
     >
-      <ScrollAreaPrimitive.Thumb className={cx('infonomic-scroll-area-thumb', styles.thumb)} />
+      <ScrollAreaPrimitive.Thumb className={cx('byline-scroll-area-thumb', styles.thumb)} />
     </ScrollAreaPrimitive.Scrollbar>
     <ScrollAreaPrimitive.Scrollbar
-      className={cx('infonomic-scroll-area-scrollbar', styles.scrollbar)}
+      className={cx('byline-scroll-area-scrollbar', styles.scrollbar)}
       orientation="horizontal"
     >
-      <ScrollAreaPrimitive.Thumb className={cx('infonomic-scroll-area-thumb', styles.thumb)} />
+      <ScrollAreaPrimitive.Thumb className={cx('byline-scroll-area-thumb', styles.thumb)} />
     </ScrollAreaPrimitive.Scrollbar>
-    <ScrollAreaPrimitive.Corner className={cx('infonomic-scroll-area-corner', styles.corner)} />
+    <ScrollAreaPrimitive.Corner className={cx('byline-scroll-area-corner', styles.corner)} />
   </ScrollAreaPrimitive.Root>
 )

package/src/components/scroll-to-top/scroll-to-top.module.css

@@ -10,7 +10,7 @@
   byline-utilities;
 @layer byline-components {
   .scroll-to-top,
-  :global(.infonomic-scroll-to-top) {
+  :global(.byline-scroll-to-top) {
     display: flex;
     position: fixed;
     width: 0;
@@ -37,28 +37,28 @@
   }
 
   .scroll-to-top span,
-  :global(.infonomic-scroll-to-top span) {
+  :global(.byline-scroll-to-top span) {
     width: 18px;
     padding-bottom: 3px;
   }
 
   .scroll-to-top span svg path,
-  :global(.infonomic-scroll-to-top span svg path) {
+  :global(.byline-scroll-to-top span svg path) {
     stroke: none;
     fill: var(--text-on-primary-strong);
   }
 
   .scroll-to-top:hover,
   .scroll-to-top:focus,
-  :global(.infonomic-scroll-to-top:hover),
-  :global(.infonomic-scroll-to-top:focus) {
+  :global(.byline-scroll-to-top:hover),
+  :global(.byline-scroll-to-top:focus) {
     color: var(--text-on-primary-strong);
     background-color: var(--fill-primary-strong-hover);
     transform: translateY(-5px);
   }
 
   .scroll-to-top-shown,
-  :global(.infonomic-scroll-to-top-shown) {
+  :global(.byline-scroll-to-top-shown) {
     min-width: 0;
     opacity: 1;
     visibility: visible;
@@ -72,18 +72,18 @@
 
   @media screen and (min-width: 587px) {
     .scroll-to-top,
-    :global(.infonomic-scroll-to-top) {
+    :global(.byline-scroll-to-top) {
       bottom: 45px;
       right: 45px;
     }
 
     .scroll-to-top span,
-    :global(.infonomic-scroll-to-top span) {
+    :global(.byline-scroll-to-top span) {
       width: 18px;
     }
 
     .scroll-to-top-shown,
-    :global(.infonomic-scroll-to-top-shown) {
+    :global(.byline-scroll-to-top-shown) {
       width: 42px;
       height: 42px;
       border-radius: 21px;

package/src/components/scroll-to-top/scroll-to-top.tsx

@@ -61,10 +61,10 @@ export function ScrollToTop({
       aria-label={ariaLabel}
       onClick={handleOnClick}
       className={cx(
-        'infonomic-scroll-to-top',
+        'byline-scroll-to-top',
         styles['scroll-to-top'],
         {
-          'infonomic-scroll-to-top-shown': show,
+          'byline-scroll-to-top-shown': show,
           [styles['scroll-to-top-shown']]: show,
         },
         className

package/src/components/section/section.module.css

@@ -11,7 +11,7 @@
 
 @layer byline-components {
   .section,
-  :global(.infonomic-section) {
+  :global(.byline-section) {
     width: 100%;
     position: relative;
   }

package/src/components/section/section.tsx

@@ -16,7 +16,7 @@ export const Section = function Section({
   ref?: React.RefObject<HTMLElement>
 }): React.JSX.Element {
   return (
-    <section className={cx('infonomic-section', styles.section, className)} ref={ref} {...rest}>
+    <section className={cx('byline-section', styles.section, className)} ref={ref} {...rest}>
       {children}
     </section>
   )

package/src/components/shimmer/shimmer.module.css

@@ -12,7 +12,7 @@
 /* 'border-collapse w-full text-sm text-left text-gray-700 dark:text-gray-400 m-0', */
 @layer byline-components {
   .shimmer,
-  :global(.infonomic-shimmer) {
+  :global(.byline-shimmer) {
     position: relative;
     overflow: hidden;
     background-color: #f0f0f0;
@@ -24,31 +24,31 @@
   :global(.dark),
   :global([data-theme="dark"]) {
     .shimmer,
-    :global(.infonomic-shimmer) {
+    :global(.byline-shimmer) {
       background-color: #141414;
       background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.01), transparent);
     }
   }
 
   .shimmerContainer,
-  :global(.infonomic-shimmer-container) {
+  :global(.byline-shimmer-container) {
     display: flex;
     flex-direction: column;
   }
 
   .rectangular,
-  :global(.infonomic-shimmer-rectangular) {
+  :global(.byline-shimmer-rectangular) {
     border-radius: 0.25rem;
   }
 
   .text,
-  :global(.infonomic-shimmer-text) {
+  :global(.byline-shimmer-text) {
     border-radius: 0.125rem;
     height: 1rem;
   }
 
   .circular,
-  :global(.infonomic-shimmer-circular) {
+  :global(.byline-shimmer-circular) {
     border-radius: 50%;
     aspect-ratio: 1;
   }

package/src/components/table/table.module.css

@@ -13,7 +13,7 @@
 @layer byline-components {
   /* 'table--container break-normal overflow-hidden relative shadow-md rounded-md my-[16px] dark:border dark:border-canvas-700', */
   .table-container,
-  :global(.infonomic-table-container) {
+  :global(.byline-table-container) {
     display: block;
     overflow: hidden;
     word-break: normal;
@@ -24,13 +24,13 @@
   }
 
   .table-scroller,
-  :global(.infonomic-table-scroller) {
+  :global(.byline-table-scroller) {
     overflow-x: auto;
     max-width: calc(100vw - 32px);
   }
 
   .table,
-  :global(.infonomic-table) {
+  :global(.byline-table) {
     width: 100%;
     border-collapse: collapse;
     margin: 0;
@@ -40,7 +40,7 @@
 
   /* 'text-xs text-gray-700 uppercase bg-canvas-100 dark:bg-canvas-700 dark:text-gray-400', */
   .table-header,
-  :global(.infonomic-table-header) {
+  :global(.byline-table-header) {
     font-size: var(--font-size-sm);
     /* text-transform: uppercase; */
     background-color: var(--canvas-50);
@@ -48,19 +48,19 @@
 
   /* 'border-b border-solid border-canvas-200 bg-white hover:bg-canvas-100/50 dark:border-canvas-700/60 dark:bg-canvas-800/50 dark:hover:bg-canvas-700/50', */
   .table-row,
-  :global(.infonomic-table-row) {
+  :global(.byline-table-row) {
     border-bottom: 1px solid var(--canvas-50);
     background-color: white;
   }
 
   .table-row:hover,
-  :global(.infonomic-table-row:hover) {
+  :global(.byline-table-row:hover) {
     background-color: var(--canvas-50);
   }
 
   /* 'whitespace-nowrap px-2 py-4 text-sm text-gray-700 uppercase bg-canvas-100/50 dark:bg-canvas-800/50 dark:text-gray-200', */
   .table-heading-cell,
-  :global(.infonomic-table-heading-cell) {
+  :global(.byline-table-heading-cell) {
     white-space: nowrap;
     padding: var(--spacing-8) var(--spacing-8);
     font-size: 0.975rem;
@@ -71,7 +71,7 @@
 
   /* not-prose px-2 py-2 text-sm [&_a]:underline */
   .table-cell,
-  :global(.infonomic-table-cell) {
+  :global(.byline-table-cell) {
     padding: var(--spacing-8);
     font-size: var(--font-size-sm);
 
@@ -82,13 +82,13 @@
 
   /* 'text-xs text-gray-700 uppercase bg-canvas-100 dark:bg-canvas-700 dark:text-gray-400', */
   .table-footer,
-  :global(.infonomic-table-footer) {
+  :global(.byline-table-footer) {
     font-size: var(--font-size-sm);
     /* text-transform: uppercase; */
     background-color: var(--canvas-100);
   }
 
-  /* 🌙 Dark via `.dark` class. We rely on the 
+  /* 🌙 Dark via `.dark` class. We rely on the
   * consuming application to detect a user's preferred
   * color scheme - either by header or cookie, and set
   * a root html class accordingly
@@ -96,28 +96,28 @@
   :global(.dark),
   :global([data-theme="dark"]) {
     .table-header,
-    :global(.infonomic-table-header) {
+    :global(.byline-table-header) {
       background-color: var(--canvas-700);
     }
 
     .table-row,
-    :global(.infonomic-table-row) {
+    :global(.byline-table-row) {
       border-bottom: 1px solid var(--canvas-700);
       background-color: var(--canvas-800);
     }
 
     .table-row:hover,
-    :global(.infonomic-table-row:hover) {
+    :global(.byline-table-row:hover) {
       background-color: oklch(from var(--canvas-800) calc(l * 1.1) c h);
     }
 
     .table-heading-cell,
-    :global(.infonomic-table-heading-cell) {
+    :global(.byline-table-heading-cell) {
       background-color: oklch(from var(--canvas-800) calc(l * 1.1) c h);
     }
 
     .table-footer,
-    :global(.infonomic-table-footer) {
+    :global(.byline-table-footer) {
       background-color: var(--canvas-800);
     }
   }