@byline/ui 1.10.1 → 1.10.3

package/src/loaders/spinner.tsx

@@ -18,13 +18,10 @@ export function LoaderSpinner({
       // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
       <div
         key={index}
-        className={cx('infonomic-loader-spinner-blade', styles['loader-spinner-blade'])}
+        className={cx('byline-loader-spinner-blade', styles['loader-spinner-blade'])}
       >
         <div
-          className={cx(
-            'infonomic-loader-spinner-blade-inner',
-            styles['loader-spinner-blade-inner']
-          )}
+          className={cx('byline-loader-spinner-blade-inner', styles['loader-spinner-blade-inner'])}
         />
       </div>
     )
@@ -42,7 +39,7 @@ export function LoaderSpinner({
 
   return (
     <div
-      className={cx('infonomic-loader-spinner', styles['loader-spinner'], className)}
+      className={cx('byline-loader-spinner', styles['loader-spinner'], className)}
       style={spinnerStyle}
       {...rest}
     >

package/src/styles/styles.css

@@ -17,3 +17,15 @@
 .byline-ui {
   isolation: isolate;
 }
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}

package/src/widgets/datepicker/datepicker.module.css

@@ -10,19 +10,19 @@
   byline-utilities;
 @layer byline-components {
   .container,
-  :global(.infonomic-datepicker-container) {
+  :global(.byline-datepicker-container) {
     position: relative;
   }
 
   .input,
   .input-wrapper,
-  :global(.infonomic-datepicker-input),
-  :global(.infonomic-datepicker-input-wrapper) {
+  :global(.byline-datepicker-input),
+  :global(.byline-datepicker-input-wrapper) {
     width: 100%;
   }
 
   .content,
-  :global(.infonomic-datepicker-content) {
+  :global(.byline-datepicker-content) {
     width: 100%;
     z-index: 50;
     border-radius: 4px;
@@ -66,14 +66,14 @@
   }
 
   .content-components,
-  :global(.infonomic-datepicker-content-components) {
+  :global(.byline-datepicker-content-components) {
     display: flex;
     width: 100%;
     gap: var(--spacing-8);
   }
 
   .status-and-actions,
-  :global(.infonomic-datepicker-status-and-actions) {
+  :global(.byline-datepicker-status-and-actions) {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -82,7 +82,7 @@
   }
 
   .content-status,
-  :global(.infonomic-datepicker-content-status) {
+  :global(.byline-datepicker-content-status) {
     display: flex;
     align-items: center;
     padding-left: var(--spacing-16);
@@ -93,7 +93,7 @@
   }
 
   .content-actions,
-  :global(.infonomic-datepicker-content-actions) {
+  :global(.byline-datepicker-content-actions) {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -105,18 +105,18 @@
   }
 
   .content-actions-button,
-  :global(.infonomic-datepicker-content-actions-button) {
+  :global(.byline-datepicker-content-actions-button) {
     /* min-width: 100px; */
     --ring-color: var(--violet-7);
   }
 
   .arrow,
-  :global(.infonomic-datepicker-arrow) {
+  :global(.byline-datepicker-arrow) {
     fill: var(--gray-50);
   }
 
   .close,
-  :global(.infonomic-datepicker-close) {
+  :global(.byline-datepicker-close) {
     all: unset;
     font-family: inherit;
     border-radius: 100%;
@@ -140,19 +140,19 @@
   }
 
   .time-picker-container,
-  :global(.infonomic-datepicker-time-picker-container) {
+  :global(.byline-datepicker-time-picker-container) {
     width: 80px;
     margin: 0.6rem 0.5rem 1rem 0;
   }
 
   .time-picker-scroll-area,
-  :global(.infonomic-datepicker-time-picker-scroll-area) {
+  :global(.byline-datepicker-time-picker-scroll-area) {
     height: 280px;
     padding-right: var(--spacing-16);
   }
 
   .time-picker,
-  :global(.infonomic-datepicker-time-picker) {
+  :global(.byline-datepicker-time-picker) {
     display: flex;
     padding-left: var(--spacing-4);
     padding-right: var(--spacing-4);
@@ -161,7 +161,7 @@
   }
 
   .time-picker-button,
-  :global(.infonomic-datepicker-time-picker-button) {
+  :global(.byline-datepicker-time-picker-button) {
     width: 100%;
   }
 

package/src/widgets/datepicker/datepicker.tsx

@@ -136,7 +136,7 @@ export function DatePicker({
   })
 
   return (
-    <div className={cx('infonomic-datepicker-container', styles.container, containerClassName)}>
+    <div className={cx('byline-datepicker-container', styles.container, containerClassName)}>
       <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-8)' }}>
         <Input
           id={id}
@@ -148,9 +148,9 @@ export function DatePicker({
           intent={intent}
           inputSize={inputSize}
           ref={inputRef}
-          className={cx('infonomic-datepicker-input', styles.input, inputClassName)}
+          className={cx('byline-datepicker-input', styles.input, inputClassName)}
           inputWrapperClassName={cx(
-            'infonomic-datepicker-input-wrapper',
+            'byline-datepicker-input-wrapper',
             styles['input-wrapper'],
             inputWrapperClassName
           )}
@@ -207,13 +207,10 @@ export function DatePicker({
         <Popover.Portal>
           <Popover.Positioner sideOffset={5}>
             <Popover.Popup
-              className={cx('infonomic-datepicker-content', styles.content, contentClassName)}
+              className={cx('byline-datepicker-content', styles.content, contentClassName)}
             >
               <div
-                className={cx(
-                  'infonomic-datepicker-content-components',
-                  styles['content-components']
-                )}
+                className={cx('byline-datepicker-content-components', styles['content-components'])}
               >
                 <div ref={calendarRef}>
                   <Calendar
@@ -284,25 +281,18 @@ export function DatePicker({
                 )}
               </div>
               <div
-                className={cx(
-                  'infonomic-datepicker-status-and-actions',
-                  styles['status-and-actions']
-                )}
+                className={cx('byline-datepicker-status-and-actions', styles['status-and-actions'])}
               >
-                <div
-                  className={cx('infonomic-datepicker-content-status', styles['content-status'])}
-                >
+                <div className={cx('byline-datepicker-content-status', styles['content-status'])}>
                   {date ? format(date, mode === 'datetime' ? 'PPPp' : 'PPP') : 'No date selected'}
                 </div>
-                <div
-                  className={cx('infonomic-datepicker-content-actions', styles['content-actions'])}
-                >
+                <div className={cx('byline-datepicker-content-actions', styles['content-actions'])}>
                   <div>
                     <Button
                       variant="outlined"
                       size="sm"
                       className={cx(
-                        'infonomic-datepicker-content-actions-button',
+                        'byline-datepicker-content-actions-button',
                         styles['content-actions-button']
                       )}
                       onClick={() => {
@@ -320,7 +310,7 @@ export function DatePicker({
                       size="sm"
                       intent="noeffect"
                       className={cx(
-                        'infonomic-datepicker-content-actions-button',
+                        'byline-datepicker-content-actions-button',
                         styles['content-actions-button']
                       )}
                       onClick={() => {
@@ -333,7 +323,7 @@ export function DatePicker({
                       variant="outlined"
                       size="sm"
                       className={cx(
-                        'infonomic-datepicker-content-actions-button',
+                        'byline-datepicker-content-actions-button',
                         styles['content-actions-button']
                       )}
                       onClick={() => {

package/src/widgets/drawer/drawer-container.tsx

@@ -22,7 +22,7 @@ export function DrawerContainer({
   return (
     <div
       ref={ref}
-      className={cx('infonomic-drawer-container', styles['drawer-container'], className)}
+      className={cx('byline-drawer-container', styles['drawer-container'], className)}
       {...rest}
     >
       {children}

package/src/widgets/drawer/drawer-content.tsx

@@ -23,7 +23,7 @@ export function DrawerContent({
     <div
       ref={ref}
       {...rest}
-      className={cx('infonomic-drawer-content', styles['drawer-content'], className)}
+      className={cx('byline-drawer-content', styles['drawer-content'], className)}
     >
       {children}
     </div>

package/src/widgets/drawer/drawer-header.tsx

@@ -19,7 +19,7 @@ export const DrawerHeader = function DrawerHeader({
 }: DrawerHeaderProps & {
   ref?: React.RefObject<HTMLDivElement>
 }) {
-  const classes = cx('infonomic-drawer-header', styles['drawer-header'], className)
+  const classes = cx('byline-drawer-header', styles['drawer-header'], className)
   return (
     <div style={{ overflowWrap: 'anywhere' }} ref={ref} {...rest} className={classes}>
       {children}

package/src/widgets/drawer/drawer-top-actions.tsx

@@ -19,7 +19,7 @@ export const DrawerTopActions = function DrawerHeader({
 }: DrawerTopActionProps & {
   ref?: React.RefObject<HTMLDivElement>
 }) {
-  const classes = cx('infonomic-drawer-top-actions', styles['drawer-top-actions'], className)
+  const classes = cx('byline-drawer-top-actions', styles['drawer-top-actions'], className)
   return (
     <div style={{ whiteSpace: 'nowrap' }} ref={ref} {...rest} className={classes}>
       {children}

package/src/widgets/drawer/drawer.module.css

@@ -12,7 +12,7 @@
   /* Backdrop overlay (replaces previous Overlay component) */
 
   .backdrop,
-  :global(.infonomic-drawer-backdrop) {
+  :global(.byline-drawer-backdrop) {
     position: fixed;
     top: 0;
     left: 0;
@@ -29,15 +29,15 @@
 
   :global(.dark) .backdrop,
   :global([data-theme="dark"]) .backdrop,
-  :global(.dark .infonomic-drawer-backdrop),
-  :global([data-theme="dark"] .infonomic-drawer-backdrop) {
+  :global(.dark .byline-drawer-backdrop),
+  :global([data-theme="dark"] .byline-drawer-backdrop) {
     background-color: rgba(0, 0, 0, 0.5);
   }
 
   /* Drawer wrapper / popup — the sliding panel itself */
 
   .drawer-wrapper,
-  :global(.infonomic-drawer-wrapper) {
+  :global(.byline-drawer-wrapper) {
     position: fixed;
     display: flex;
     flex-direction: column;
@@ -66,14 +66,14 @@
   /* Container (inner wrapper, no longer needs positioning) */
 
   .drawer-container,
-  :global(.infonomic-drawer-container) {
+  :global(.byline-drawer-container) {
     height: 100%;
   }
 
   /* Width variant: narrow */
 
   .drawer-narrow,
-  :global(.infonomic-drawer-narrow) {
+  :global(.byline-drawer-narrow) {
     width: calc(100% - 32px);
     max-width: 400px;
   }
@@ -112,7 +112,7 @@
   /* Sub-component styles */
 
   .drawer-top-actions,
-  :global(.infonomic-drawer-top-actions) {
+  :global(.byline-drawer-top-actions) {
     display: flex;
     align-items: center;
     justify-content: flex-end;
@@ -124,7 +124,7 @@
   }
 
   .drawer-header,
-  :global(.infonomic-drawer-header) {
+  :global(.byline-drawer-header) {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -137,13 +137,13 @@
 
   .drawer-header h2,
   .drawer-header h3,
-  :global(.infonomic-drawer-header h2),
-  :global(.infonomic-drawer-header h3) {
+  :global(.byline-drawer-header h2),
+  :global(.byline-drawer-header h3) {
     margin: 0;
   }
 
   .drawer-content,
-  :global(.infonomic-drawer-content) {
+  :global(.byline-drawer-content) {
     padding: var(--spacing-12);
   }
 }

package/src/widgets/drawer/drawer.tsx

@@ -68,12 +68,12 @@ const Drawer = ({
     >
       <BaseDrawer.Portal>
         <BaseDrawer.Backdrop
-          className={cx('infonomic-drawer-backdrop', styles.backdrop)}
+          className={cx('byline-drawer-backdrop', styles.backdrop)}
           style={hasTopOffset ? { top: topOffset } : undefined}
         />
         <BaseDrawer.Popup
           className={cx(
-            'infonomic-drawer-wrapper',
+            'byline-drawer-wrapper',
             styles['drawer-wrapper'],
             typedStyles[`drawer-${width}`],
             typedStyles[`drawer-depth-${depth.toString()}`],

package/src/widgets/modal/modal-actions.tsx

@@ -23,7 +23,7 @@ export const ModalActions = function ModalActions({
     <div
       ref={ref}
       {...rest}
-      className={cx('infonomic-modal-actions', styles['modal-actions'], className)}
+      className={cx('byline-modal-actions', styles['modal-actions'], className)}
     >
       {children}
     </div>

package/src/widgets/modal/modal-container.tsx

@@ -22,7 +22,7 @@ export const ModalContainer = function ModalContainer({
   return (
     <div
       ref={ref}
-      className={cx('infonomic-modal-container', styles['modal-container'], className)}
+      className={cx('byline-modal-container', styles['modal-container'], className)}
       {...rest}
     >
       {children}

package/src/widgets/modal/modal-content.tsx

@@ -23,7 +23,7 @@ export const ModalContent = function ModalContent({
     <div
       ref={ref}
       {...rest}
-      className={cx('infonomic-modal-content', styles['modal-content'], className)}
+      className={cx('byline-modal-content', styles['modal-content'], className)}
     >
       {children}
     </div>

package/src/widgets/modal/modal-header.tsx

@@ -19,7 +19,7 @@ export const ModalHeader = function ModalHeader({
 }: ModalHeaderProps & {
   ref?: React.RefObject<HTMLDivElement>
 }) {
-  const classes = cx('infonomic-modal-header', styles['modal-header'], 'prose', className)
+  const classes = cx('byline-modal-header', styles['modal-header'], 'prose', className)
   return (
     <div style={{ overflowWrap: 'anywhere' }} ref={ref} {...rest} className={classes}>
       {children}

package/src/widgets/modal/modal.module.css

@@ -12,7 +12,7 @@
   /* Backdrop overlay */
 
   .backdrop,
-  :global(.infonomic-modal-backdrop) {
+  :global(.byline-modal-backdrop) {
     position: fixed;
     top: 0;
     left: 0;
@@ -29,15 +29,15 @@
 
   :global(.dark) .backdrop,
   :global([data-theme="dark"]) .backdrop,
-  :global(.dark .infonomic-modal-backdrop),
-  :global([data-theme="dark"] .infonomic-modal-backdrop) {
+  :global(.dark .byline-modal-backdrop),
+  :global([data-theme="dark"] .byline-modal-backdrop) {
     background-color: rgba(0, 0, 0, 0.5);
   }
 
   /* Modal wrapper / popup — the dialog surface */
 
   .modal-wrapper,
-  :global(.infonomic-modal-wrapper) {
+  :global(.byline-modal-wrapper) {
     position: fixed;
     display: flex;
     flex-direction: column;
@@ -57,7 +57,7 @@
 
   @media screen and (min-width: 40rem) {
     .modal-wrapper,
-    :global(.infonomic-modal-wrapper) {
+    :global(.byline-modal-wrapper) {
       justify-content: center;
     }
   }
@@ -65,7 +65,7 @@
   /* Container — the visible dialog box */
 
   .modal-container,
-  :global(.infonomic-modal-container) {
+  :global(.byline-modal-container) {
     display: flex;
     flex-direction: column;
     box-shadow: var(--shadow-md);
@@ -81,7 +81,7 @@
 
   @media screen and (min-width: 40rem) {
     .modal-container,
-    :global(.infonomic-modal-container) {
+    :global(.byline-modal-container) {
       max-height: calc(100vh - 24px);
       min-height: auto;
       width: auto;
@@ -91,7 +91,7 @@
   /* Sub-component styles */
 
   .modal-header,
-  :global(.infonomic-modal-header) {
+  :global(.byline-modal-header) {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -104,13 +104,13 @@
 
   .modal-header h2,
   .modal-header h3,
-  :global(.infonomic-modal-header h2),
-  :global(.infonomic-modal-header h3) {
+  :global(.byline-modal-header h2),
+  :global(.byline-modal-header h3) {
     margin: 0;
   }
 
   .modal-content,
-  :global(.infonomic-modal-content) {
+  :global(.byline-modal-content) {
     display: flex;
     flex: 1;
     flex-direction: column;
@@ -122,7 +122,7 @@
   }
 
   .modal-actions,
-  :global(.infonomic-modal-actions) {
+  :global(.byline-modal-actions) {
     display: flex;
     align-items: center;
     justify-content: flex-end;

package/src/widgets/modal/modal.tsx

@@ -68,8 +68,8 @@ function Modal({
         disablePointerDismissal={closeOnOverlayClick !== true}
       >
         <Dialog.Portal>
-          <Dialog.Backdrop className={cx('infonomic-modal-backdrop', styles.backdrop)} />
-          <Dialog.Popup className={cx('infonomic-modal-wrapper', styles['modal-wrapper'])}>
+          <Dialog.Backdrop className={cx('byline-modal-backdrop', styles.backdrop)} />
+          <Dialog.Popup className={cx('byline-modal-wrapper', styles['modal-wrapper'])}>
             {children}
           </Dialog.Popup>
         </Dialog.Portal>

package/src/widgets/search/search.tsx

@@ -153,6 +153,7 @@ export function Search({
               role="button"
               intent="noeffect"
               variant="text"
+              style={{ outline: 'none' }}
               ripple={false}
               arial-label={ariaLabelForSearch}
               size="xs"
@@ -169,6 +170,7 @@ export function Search({
             <IconButton
               role="button"
               intent="noeffect"
+              style={{ outline: 'none' }}
               variant="text"
               arial-label={ariaLabelForClear}
               size="xs"

package/src/widgets/timeline/timeline.module.css

@@ -11,12 +11,12 @@
 
 @layer byline-components {
   .timeline,
-  :global(.infonomic-timeline) {
+  :global(.byline-timeline) {
     margin-left: var(--spacing-8);
   }
 
   .timeline-root,
-  :global(.infonomic-timeline-root) {
+  :global(.byline-timeline-root) {
     position: relative;
     list-style: none;
     margin-left: var(--spacing-8);
@@ -27,13 +27,13 @@
   }
 
   .timeline-item,
-  :global(.infonomic-timeline-item) {
+  :global(.byline-timeline-item) {
     margin: 0 0 var(--spacing-16) var(--spacing-20);
   }
 
   /* 'absolute block flex items-center justify-center w-[36px] h-[36px] rounded-full -mt-[3px] sm:mt-0 -left-[18px] border-[6px] bg-secondary-600 dark:bg-secondary-900 border-gray-50 dark:border-canvas-600', */
   .timeline-icon,
-  :global(.infonomic-timeline-icon) {
+  :global(.byline-timeline-icon) {
     position: absolute;
     display: flex;
     align-items: center;
@@ -50,7 +50,7 @@
   }
 
   .timeline-icon svg,
-  :global(.infonomic-timeline-icon svg) {
+  :global(.byline-timeline-icon svg) {
     display: block;
     width: 60%;
     color: white;
@@ -58,7 +58,7 @@
 
   /* 'text-[1.5rem] sm:text-[1.57rem] leading-[1.2] !m-0 font-semibold' */
   .timeline-heading,
-  :global(.infonomic-timeline-heading) {
+  :global(.byline-timeline-heading) {
     font-size: 1.5rem;
     line-height: 1.2;
     margin: 0;
@@ -67,7 +67,7 @@
 
   /* 'block mt-2 mb-2 text-[0.9em] font-medium leading-none text-gray-900 dark:text-gray-100' */
   .timeline-date,
-  :global(.infonomic-timeline-date) {
+  :global(.byline-timeline-date) {
     display: block;
     margin-top: var(--spacing-8);
     margin-bottom: var(--spacing-8);
@@ -79,7 +79,7 @@
 
   /* '[&_p]:m-0 [&_p]:mb-4 [&_p]:sm:m-0 [&_p]:sm:mb-4 text-lg font-normal text-gray-900 dark:text-gray-300' */
   .timeline-content,
-  :global(.infonomic-timeline-content) {
+  :global(.byline-timeline-content) {
     margin: 0;
     margin-bottom: var(--spacing-16);
     font-size: 1.125rem;
@@ -91,14 +91,14 @@
     }
   }
 
-  /* 🌙 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
   */
   :global(.dark),
   :global([data-theme="dark"]) {
-    :global(.infonomic-timeline-icon),
+    :global(.byline-timeline-icon),
     .timeline-icon {
       border-color: var(--canvas-600);
     }