@byline/ui 1.10.2 → 1.11.0

package/src/components/dropdown/dropdown.module.css

@@ -12,8 +12,8 @@
 @layer byline-components {
   .dropdown-content,
   .dropdown-subcontent,
-  :global(.infonomic-dropdown-content),
-  :global(.infonomic-dropdown-subcontent) {
+  :global(.byline-dropdown-content),
+  :global(.byline-dropdown-subcontent) {
     z-index: 20;
     background-color: var(--surface-panel-elevated);
     padding: 4px;
@@ -44,7 +44,7 @@
   }
 
   .dropdown-item,
-  :global(.infonomic-dropdown-item) {
+  :global(.byline-dropdown-item) {
     display: flex;
     align-items: center;
     gap: var(--gap-1);
@@ -63,15 +63,15 @@
   .dropdown-item:hover,
   .dropdown-item:focus,
   .dropdown-item[data-highlighted],
-  :global(.infonomic-dropdown-item):hover,
-  :global(.infonomic-dropdown-item):focus,
-  :global(.infonomic-dropdown-item)[data-highlighted] {
+  :global(.byline-dropdown-item):hover,
+  :global(.byline-dropdown-item):focus,
+  :global(.byline-dropdown-item)[data-highlighted] {
     background-color: var(--surface-item-hover);
     color: var(--surface-item-text-hover);
   }
 
   .dropdown-separator,
-  :global(.infonomic-dropdown-separator) {
+  :global(.byline-dropdown-separator) {
     width: 90%;
     background-color: var(--surface-panel-border);
     margin: var(--spacing-4) 0;

package/src/components/dropdown/dropdown.tsx

@@ -20,7 +20,7 @@ const Trigger = ({
   ref?: React.RefObject<React.ComponentRef<'button'>>
 }): React.JSX.Element => {
   return (
-    <Menu.Trigger className={cx('infonomic-dropdown-trigger', className)} ref={ref} {...rest}>
+    <Menu.Trigger className={cx('byline-dropdown-trigger', className)} ref={ref} {...rest}>
       {children}
     </Menu.Trigger>
   )
@@ -64,7 +64,7 @@ const Content = ({
     >
       <Menu.Popup
         ref={ref}
-        className={cx('infonomic-dropdown-content', styles['dropdown-content'], className)}
+        className={cx('byline-dropdown-content', styles['dropdown-content'], className)}
         {...rest}
       >
         {children}
@@ -83,7 +83,7 @@ const Group = ({
   ref?: React.RefObject<React.ComponentRef<'div'>>
 }): React.JSX.Element => {
   return (
-    <Menu.Group ref={ref} className={cx('infonomic-dropdown-group', className)} {...rest}>
+    <Menu.Group ref={ref} className={cx('byline-dropdown-group', className)} {...rest}>
       {children}
     </Menu.Group>
   )
@@ -101,7 +101,7 @@ const Item = ({
   return (
     <Menu.Item
       ref={ref}
-      className={cx('infonomic-dropdown-item', styles['dropdown-item'], className)}
+      className={cx('byline-dropdown-item', styles['dropdown-item'], className)}
       {...rest}
     >
       {children}
@@ -119,7 +119,7 @@ const Label = ({
   ref?: React.RefObject<React.ComponentRef<'div'>>
 }): React.JSX.Element => {
   return (
-    <Menu.GroupLabel ref={ref} className={cx('infonomic-dropdown-label', className)} {...rest}>
+    <Menu.GroupLabel ref={ref} className={cx('byline-dropdown-label', className)} {...rest}>
       {children}
     </Menu.GroupLabel>
   )
@@ -136,7 +136,7 @@ const Separator = ({
   return (
     <Menu.Separator
       ref={ref}
-      className={cx('infonomic-dropdown-separator', styles['dropdown-separator'], className)}
+      className={cx('byline-dropdown-separator', styles['dropdown-separator'], className)}
       {...props}
     />
   )
@@ -180,7 +180,7 @@ const SubContent = ({
     >
       <Menu.Popup
         ref={ref}
-        className={cx('infonomic-dropdown-subcontent', styles['dropdown-subcontent'], className)}
+        className={cx('byline-dropdown-subcontent', styles['dropdown-subcontent'], className)}
         {...rest}
       >
         {children}
@@ -201,7 +201,7 @@ const SubTrigger = ({
   return (
     <Menu.SubmenuTrigger
       ref={ref}
-      className={cx('infonomic-dropdown-subtrigger', className)}
+      className={cx('byline-dropdown-subtrigger', className)}
       {...rest}
     >
       {children}

package/src/components/hamburger/hamburger.module.css

@@ -11,7 +11,7 @@
 
 @layer byline-components {
   .hamburger,
-  :global(.infonomic-hamburger) {
+  :global(.byline-hamburger) {
     --hamburger-color: currentColor;
     --hamburger-focus-ring-color: currentColor;
 
@@ -38,14 +38,14 @@
   }
 
   .hamburger:focus-visible,
-  :global(.infonomic-hamburger):focus-visible {
+  :global(.byline-hamburger):focus-visible {
     outline: 2px solid var(--hamburger-focus-ring-color);
     outline-offset: 2px;
   }
 
   /* Box container for the bars */
   .box,
-  :global(.infonomic-hamburger-box) {
+  :global(.byline-hamburger-box) {
     width: 24px;
     height: 24px;
     display: block;
@@ -55,7 +55,7 @@
 
   /* Inner bar + ::before/::after pseudo-elements form the 3 lines */
   .inner,
-  :global(.infonomic-hamburger-inner) {
+  :global(.byline-hamburger-inner) {
     display: block;
     top: 50%;
     margin-top: -1px;
@@ -66,9 +66,9 @@
   .inner,
   .inner::before,
   .inner::after,
-  :global(.infonomic-hamburger-inner),
-  :global(.infonomic-hamburger-inner)::before,
-  :global(.infonomic-hamburger-inner)::after {
+  :global(.byline-hamburger-inner),
+  :global(.byline-hamburger-inner)::before,
+  :global(.byline-hamburger-inner)::after {
     position: absolute;
     width: 24px;
     height: 2px;
@@ -81,14 +81,14 @@
 
   .inner::before,
   .inner::after,
-  :global(.infonomic-hamburger-inner)::before,
-  :global(.infonomic-hamburger-inner)::after {
+  :global(.byline-hamburger-inner)::before,
+  :global(.byline-hamburger-inner)::after {
     content: "";
     display: block;
   }
 
   .inner::before,
-  :global(.infonomic-hamburger-inner)::before {
+  :global(.byline-hamburger-inner)::before {
     top: -8px;
     transition:
       top 0.075s 0.12s ease,
@@ -96,7 +96,7 @@
   }
 
   .inner::after,
-  :global(.infonomic-hamburger-inner)::after {
+  :global(.byline-hamburger-inner)::after {
     bottom: -8px;
     transition:
       bottom 0.075s 0.12s ease,
@@ -105,14 +105,14 @@
 
   /* Open state */
   .open .inner,
-  :global(.infonomic-hamburger-open) :global(.infonomic-hamburger-inner) {
+  :global(.byline-hamburger-open) :global(.byline-hamburger-inner) {
     transform: rotate(45deg);
     transition-delay: 0.12s;
     transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
   }
 
   .open .inner::before,
-  :global(.infonomic-hamburger-open) :global(.infonomic-hamburger-inner)::before {
+  :global(.byline-hamburger-open) :global(.byline-hamburger-inner)::before {
     top: 0;
     opacity: 0;
     transition:
@@ -121,7 +121,7 @@
   }
 
   .open .inner::after,
-  :global(.infonomic-hamburger-open) :global(.infonomic-hamburger-inner)::after {
+  :global(.byline-hamburger-open) :global(.byline-hamburger-inner)::after {
     bottom: 0;
     transform: rotate(-90deg);
     transition:
@@ -131,14 +131,14 @@
 
   /* Color scheme: onDark (white bars for dark backgrounds) */
   .onDark,
-  :global(.infonomic-hamburger-on-dark) {
+  :global(.byline-hamburger-on-dark) {
     --hamburger-color: white;
     --hamburger-focus-ring-color: rgba(255, 255, 255, 0.7);
   }
 
   /* Color scheme: onLight (dark bars for light backgrounds) */
   .onLight,
-  :global(.infonomic-hamburger-on-light) {
+  :global(.byline-hamburger-on-light) {
     --hamburger-color: var(--foreground, #1a1a1a);
     --hamburger-focus-ring-color: var(--foreground, #1a1a1a);
   }

package/src/components/hamburger/hamburger.tsx

@@ -53,7 +53,7 @@ export function Hamburger({
       type="button"
       onClick={handleClick}
       className={cx(
-        'infonomic-hamburger',
+        'byline-hamburger',
         styles.hamburger,
         {
           [styles.open]: open,
@@ -67,8 +67,8 @@ export function Hamburger({
       aria-expanded={open}
       {...other}
     >
-      <span className={cx('infonomic-hamburger-box', styles.box)} aria-hidden="true">
-        <span className={cx('infonomic-hamburger-inner', styles.inner)} />
+      <span className={cx('byline-hamburger-box', styles.box)} aria-hidden="true">
+        <span className={cx('byline-hamburger-inner', styles.inner)} />
       </span>
     </button>
   )

package/src/components/inputs/autocomplete.module.css

@@ -13,7 +13,7 @@
   /* ── Wrapper ── */
 
   .autocomplete-wrapper,
-  :global(.infonomic-autocomplete-wrapper) {
+  :global(.byline-autocomplete-wrapper) {
     display: flex;
     flex-direction: column;
     gap: var(--gap-1);
@@ -22,7 +22,7 @@
   /* ── Input ── */
 
   .input,
-  :global(.infonomic-autocomplete-input) {
+  :global(.byline-autocomplete-input) {
     border: none;
     outline: 1px solid transparent;
     outline-offset: 2px;
@@ -37,22 +37,22 @@
 
   .input:focus,
   .input:active,
-  :global(.infonomic-autocomplete-input):focus,
-  :global(.infonomic-autocomplete-input):active {
+  :global(.byline-autocomplete-input):focus,
+  :global(.byline-autocomplete-input):active {
     outline-color: var(--ring-color);
   }
 
   .input:disabled,
   .input[disabled],
-  :global(.infonomic-autocomplete-input):disabled,
-  :global(.infonomic-autocomplete-input)[disabled] {
+  :global(.byline-autocomplete-input):disabled,
+  :global(.byline-autocomplete-input)[disabled] {
     pointer-events: none;
   }
 
   /* ── Sizes ── */
 
   .sm,
-  :global(.infonomic-autocomplete-input-sm) {
+  :global(.byline-autocomplete-input-sm) {
     min-height: 32px;
     font-size: 0.875rem;
     line-height: 0;
@@ -60,7 +60,7 @@
   }
 
   .md,
-  :global(.infonomic-autocomplete-input-md) {
+  :global(.byline-autocomplete-input-md) {
     min-height: 36px;
     font-size: 1rem;
     line-height: 0;
@@ -68,7 +68,7 @@
   }
 
   .lg,
-  :global(.infonomic-autocomplete-input-lg) {
+  :global(.byline-autocomplete-input-lg) {
     min-height: 40px;
     font-size: 1.175rem;
     line-height: 0;
@@ -78,25 +78,25 @@
   /* ── Variants ── */
 
   .outlined,
-  :global(.infonomic-autocomplete-input-outlined) {
+  :global(.byline-autocomplete-input-outlined) {
     border: 1px solid var(--input-variant-outlined-border);
     background-color: transparent;
   }
 
   .outlined:hover,
-  :global(.infonomic-autocomplete-input-outlined):hover {
+  :global(.byline-autocomplete-input-outlined):hover {
     border: 1px solid var(--input-variant-outlined-hover-border);
   }
 
   .outlined:focus,
   .outlined:active,
-  :global(.infonomic-autocomplete-input-outlined):focus,
-  :global(.infonomic-autocomplete-input-outlined):active {
+  :global(.byline-autocomplete-input-outlined):focus,
+  :global(.byline-autocomplete-input-outlined):active {
     --ring-color: var(--input-variant-outline-ring-color);
   }
 
   .underlined,
-  :global(.infonomic-autocomplete-input-underlined) {
+  :global(.byline-autocomplete-input-underlined) {
     border-bottom: 1px solid var(--input-variant-underlined-border);
     border-radius: 0;
     gap: var(--gap-1);
@@ -104,63 +104,63 @@
   }
 
   .underlined.sm,
-  :global(.infonomic-autocomplete-input-underlined.infonomic-autocomplete-input-sm) {
+  :global(.byline-autocomplete-input-underlined.byline-autocomplete-input-sm) {
     padding: 0.25rem 0.1rem;
     min-height: 26px;
   }
 
   .underlined.md,
-  :global(.infonomic-autocomplete-input-underlined.infonomic-autocomplete-input-md) {
+  :global(.byline-autocomplete-input-underlined.byline-autocomplete-input-md) {
     padding: 0.25rem 0.1rem;
     min-height: 30px;
   }
 
   .underlined.lg,
-  :global(.infonomic-autocomplete-input-underlined.infonomic-autocomplete-input-lg) {
+  :global(.byline-autocomplete-input-underlined.byline-autocomplete-input-lg) {
     padding: 0 0.1rem;
     min-height: 34px;
   }
 
   .underlined:hover,
-  :global(.infonomic-autocomplete-input-underlined):hover {
+  :global(.byline-autocomplete-input-underlined):hover {
     border-bottom: 1px solid var(--input-variant-underlined-hover-border);
   }
 
   .underlined:focus,
   .underlined:active,
-  :global(.infonomic-autocomplete-input-underlined):focus,
-  :global(.infonomic-autocomplete-input-underlined):active {
+  :global(.byline-autocomplete-input-underlined):focus,
+  :global(.byline-autocomplete-input-underlined):active {
     outline: none;
   }
 
   .filled,
-  :global(.infonomic-autocomplete-input-filled) {
+  :global(.byline-autocomplete-input-filled) {
     background-color: var(--input-variant-filled);
   }
 
   /* ── Error ── */
 
   .error,
-  :global(.infonomic-autocomplete-input-error) {
+  :global(.byline-autocomplete-input-error) {
     border: 1px solid var(--field-border-invalid);
   }
 
   .error:hover,
-  :global(.infonomic-autocomplete-input-error):hover {
+  :global(.byline-autocomplete-input-error):hover {
     border: 1px solid var(--field-border-invalid);
   }
 
   .error:focus,
   .error:active,
-  :global(.infonomic-autocomplete-input-error):focus,
-  :global(.infonomic-autocomplete-input-error):active {
+  :global(.byline-autocomplete-input-error):focus,
+  :global(.byline-autocomplete-input-error):active {
     --ring-color: var(--field-ring-invalid);
   }
 
   /* ── Intents ── */
 
   .primary,
-  :global(.infonomic-autocomplete-input-primary) {
+  :global(.byline-autocomplete-input-primary) {
     --input-variant-outlined-border: var(--stroke-primary);
     --input-variant-outlined-hover-border: var(--stroke-primary-hover);
     --input-variant-outline-ring-color: var(--ring-primary);
@@ -170,7 +170,7 @@
   }
 
   .secondary,
-  :global(.infonomic-autocomplete-input-secondary) {
+  :global(.byline-autocomplete-input-secondary) {
     --input-variant-outlined-border: var(--stroke-secondary);
     --input-variant-outlined-hover-border: var(--stroke-secondary-hover);
     --input-variant-outline-ring-color: var(--ring-secondary);
@@ -180,7 +180,7 @@
   }
 
   .noeffect,
-  :global(.infonomic-autocomplete-input-noeffect) {
+  :global(.byline-autocomplete-input-noeffect) {
     --input-variant-outlined-border: var(--stroke-noeffect);
     --input-variant-outlined-hover-border: var(--stroke-noeffect-hover);
     --input-variant-outline-ring-color: var(--ring-noeffect);
@@ -190,7 +190,7 @@
   }
 
   .success,
-  :global(.infonomic-autocomplete-input-success) {
+  :global(.byline-autocomplete-input-success) {
     --input-variant-outlined-border: var(--stroke-success);
     --input-variant-outlined-hover-border: var(--stroke-success-hover);
     --input-variant-outline-ring-color: var(--ring-success);
@@ -200,7 +200,7 @@
   }
 
   .info,
-  :global(.infonomic-autocomplete-input-info) {
+  :global(.byline-autocomplete-input-info) {
     --input-variant-outlined-border: var(--stroke-info);
     --input-variant-outlined-hover-border: var(--stroke-info-hover);
     --input-variant-outline-ring-color: var(--ring-info);
@@ -210,7 +210,7 @@
   }
 
   .warning,
-  :global(.infonomic-autocomplete-input-warning) {
+  :global(.byline-autocomplete-input-warning) {
     --input-variant-outlined-border: var(--stroke-warning);
     --input-variant-outlined-hover-border: var(--stroke-warning-hover);
     --input-variant-outline-ring-color: var(--ring-warning);
@@ -220,7 +220,7 @@
   }
 
   .danger,
-  :global(.infonomic-autocomplete-input-danger) {
+  :global(.byline-autocomplete-input-danger) {
     --input-variant-outlined-border: var(--stroke-danger);
     --input-variant-outlined-hover-border: var(--stroke-danger-hover);
     --input-variant-outline-ring-color: var(--ring-danger);
@@ -232,7 +232,7 @@
   /* ── Positioner ── */
 
   .positioner,
-  :global(.infonomic-autocomplete-positioner) {
+  :global(.byline-autocomplete-positioner) {
     z-index: 50;
     outline: 0;
   }
@@ -240,7 +240,7 @@
   /* ── Popup ── */
 
   .popup,
-  :global(.infonomic-autocomplete-popup) {
+  :global(.byline-autocomplete-popup) {
     z-index: 50;
     margin-top: 2px;
     border: 1px solid var(--surface-panel-border);
@@ -268,7 +268,7 @@
   /* ── List ── */
 
   .list,
-  :global(.infonomic-autocomplete-list) {
+  :global(.byline-autocomplete-list) {
     box-sizing: border-box;
     overflow-y: auto;
     overscroll-behavior: contain;
@@ -279,14 +279,14 @@
   }
 
   .list[data-empty],
-  :global(.infonomic-autocomplete-list)[data-empty] {
+  :global(.byline-autocomplete-list)[data-empty] {
     padding: 0;
   }
 
   /* ── Item ── */
 
   .autocomplete-item,
-  :global(.infonomic-autocomplete-item) {
+  :global(.byline-autocomplete-item) {
     position: relative;
     user-select: none;
     cursor: default;
@@ -304,13 +304,13 @@
   }
 
   .autocomplete-item[data-disabled],
-  :global(.infonomic-autocomplete-item[data-disabled]) {
+  :global(.byline-autocomplete-item[data-disabled]) {
     color: var(--surface-item-text-disabled);
     pointer-events: none;
   }
 
   .autocomplete-item[data-highlighted],
-  :global(.infonomic-autocomplete-item[data-highlighted]) {
+  :global(.byline-autocomplete-item[data-highlighted]) {
     outline: none;
     background-color: var(--surface-item-hover);
     color: var(--surface-item-text-hover);
@@ -341,7 +341,7 @@
   /* ── Group label ── */
 
   .group-label,
-  :global(.infonomic-autocomplete-group-label) {
+  :global(.byline-autocomplete-group-label) {
     padding: 0.375rem 0.75rem;
     font-size: 0.75rem;
     font-weight: 600;
@@ -353,7 +353,7 @@
   /* ── Separator ── */
 
   .separator,
-  :global(.infonomic-autocomplete-separator) {
+  :global(.byline-autocomplete-separator) {
     margin: 0.375rem 0.75rem;
     height: 1px;
     background-color: var(--surface-panel-border);
@@ -362,7 +362,7 @@
   /* ── Empty ── */
 
   .empty:not(:empty),
-  :global(.infonomic-autocomplete-empty):not(:empty) {
+  :global(.byline-autocomplete-empty):not(:empty) {
     box-sizing: border-box;
     padding: 1rem;
     font-size: 0.925rem;

package/src/components/inputs/autocomplete.tsx

@@ -59,7 +59,7 @@ export function Autocomplete<Item = string>({
   return (
     <div
       className={cx(
-        'infonomic-autocomplete-wrapper',
+        'byline-autocomplete-wrapper',
         styles['autocomplete-wrapper'],
         wrapperClassName
       )}
@@ -76,10 +76,10 @@ export function Autocomplete<Item = string>({
           aria-errormessage={error ? errorText : undefined}
           aria-describedby={error ? `error-for-${id}` : undefined}
           className={cx(
-            'infonomic-autocomplete-input',
-            `infonomic-autocomplete-input-${variant}`,
-            `infonomic-autocomplete-input-${inputSize}`,
-            `infonomic-autocomplete-input-${intent}`,
+            'byline-autocomplete-input',
+            `byline-autocomplete-input-${variant}`,
+            `byline-autocomplete-input-${inputSize}`,
+            `byline-autocomplete-input-${intent}`,
             styles.input,
             styles[variant],
             styles[inputSize],
@@ -92,24 +92,22 @@ export function Autocomplete<Item = string>({
 
         <AutocompletePrimitive.Portal>
           <AutocompletePrimitive.Positioner
-            className={cx('infonomic-autocomplete-positioner', styles.positioner)}
+            className={cx('byline-autocomplete-positioner', styles.positioner)}
             sideOffset={sideOffset}
           >
             <AutocompletePrimitive.Popup
               className={cx(
-                'infonomic-autocomplete-popup',
+                'byline-autocomplete-popup',
                 styles.popup,
                 inputSize != null && styles[`popup-${inputSize}`]
               )}
             >
               <AutocompletePrimitive.Empty
-                className={cx('infonomic-autocomplete-empty', styles.empty)}
+                className={cx('byline-autocomplete-empty', styles.empty)}
               >
                 {emptyText}
               </AutocompletePrimitive.Empty>
-              <AutocompletePrimitive.List
-                className={cx('infonomic-autocomplete-list', styles.list)}
-              >
+              <AutocompletePrimitive.List className={cx('byline-autocomplete-list', styles.list)}>
                 {children}
               </AutocompletePrimitive.List>
             </AutocompletePrimitive.Popup>
@@ -135,7 +133,7 @@ export const AutocompleteItem = ({
 }) => {
   return (
     <AutocompletePrimitive.Item
-      className={cx('infonomic-autocomplete-item', styles['autocomplete-item'], className)}
+      className={cx('byline-autocomplete-item', styles['autocomplete-item'], className)}
       {...props}
       ref={forwardedRef}
     >
@@ -154,7 +152,7 @@ export const AutocompleteGroupLabel = ({
 }: React.ComponentProps<typeof AutocompletePrimitive.GroupLabel>) => {
   return (
     <AutocompletePrimitive.GroupLabel
-      className={cx('infonomic-autocomplete-group-label', styles['group-label'], className)}
+      className={cx('byline-autocomplete-group-label', styles['group-label'], className)}
       {...props}
     >
       {children}
@@ -170,7 +168,7 @@ export const AutocompleteSeparator = ({
 }: React.ComponentProps<typeof AutocompletePrimitive.Separator>) => {
   return (
     <AutocompletePrimitive.Separator
-      className={cx('infonomic-autocomplete-separator', styles.separator, className)}
+      className={cx('byline-autocomplete-separator', styles.separator, className)}
       {...props}
     />
   )

package/src/components/inputs/checkbox-group.module.css

@@ -10,7 +10,7 @@
   byline-utilities;
 
 @layer byline-components {
-  :global(.infonomic-checkbox-group),
+  :global(.byline-checkbox-group),
   .checkbox-group {
     display: flex;
     flex-direction: column;

package/src/components/inputs/checkbox-group.tsx

@@ -68,7 +68,7 @@ export const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
   }
 
   return (
-    <div className={cx('infonomic-checkbox-group', styles['checkbox-group'], className)}>
+    <div className={cx('byline-checkbox-group', styles['checkbox-group'], className)}>
       {checkBoxes.map((cb) => (
         <Checkbox
           key={cb.id}