@byline/ui 1.10.2 → 1.11.0

package/src/components/button/combo-button.module.css

@@ -10,7 +10,7 @@
   byline-utilities;
 @layer byline-components {
   .combo-button-wrapper,
-  :global(.infonomic-combo-button-wrapper) {
+  :global(.byline-combo-button-wrapper) {
     display: flex;
     align-items: center;
     gap: 0.075rem;
@@ -22,13 +22,13 @@
 
   .combo-button-wrapper:focus-within,
   .combo-button-wrapper:has([data-popup-open]),
-  :global(.infonomic-combo-button-wrapper):focus-within,
-  :global(.infonomic-combo-button-wrapper):has([data-popup-open]) {
+  :global(.byline-combo-button-wrapper):focus-within,
+  :global(.byline-combo-button-wrapper):has([data-popup-open]) {
     outline-color: var(--ring-color);
   }
 
   .combo-button-button,
-  :global(.infonomic-combo-button-button) {
+  :global(.byline-combo-button-button) {
     border-bottom-right-radius: 0;
     border-top-right-radius: 0;
   }
@@ -39,7 +39,7 @@
   }
 
   .combo-button-trigger,
-  :global(.infonomic-combo-button-trigger) {
+  :global(.byline-combo-button-trigger) {
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
   }
@@ -50,11 +50,11 @@
   }
 
   .combo-button-options,
-  :global(.infonomic-combo-button-options) {
+  :global(.byline-combo-button-options) {
     min-width: 120px;
   }
 
   .combo-button-options-item,
-  :global(.infonomic-combo-button-options-item) {
+  :global(.byline-combo-button-options-item) {
   }
 }

package/src/components/button/control-buttons.module.css

@@ -12,9 +12,9 @@
   .stop-button,
   .play-button,
   .directional-button,
-  :global(.infonomic-stop-button),
-  :global(.infonomic-play-button),
-  :global(.infonomic-directional-button) {
+  :global(.byline-stop-button),
+  :global(.byline-play-button),
+  :global(.byline-directional-button) {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -136,7 +136,7 @@
     transform: translateX(5px);
   }
 
-  /* No dark theme overrides needed! 
-   * Tokens automatically switch in .dark and respect .not-dark 
+  /* No dark theme overrides needed!
+   * Tokens automatically switch in .dark and respect .not-dark
   */
 }

package/src/components/button/control-buttons.tsx

@@ -42,7 +42,7 @@ export const DirectionalButton = ({
       type="button"
       aria-label={direction}
       className={cx(
-        'infonomic-control-button',
+        'byline-control-button',
         direction,
         size,
         styles['directional-button'],

package/src/components/button/copy-button.module.css

@@ -11,12 +11,12 @@
 
 @layer byline-components {
   .copy-button-container,
-  :global(.infonomic-copy-button-container) {
+  :global(.byline-copy-button-container) {
     display: inline-block;
   }
 
   .copy-button svg,
-  :global(.infonomic-copy-button) svg {
+  :global(.byline-copy-button) svg {
     width: 90%;
     height: 90%;
     display: block;
@@ -24,7 +24,7 @@
 
   /* Sizes */
   .xs,
-  :global(.infonomic-copy-button-xs) {
+  :global(.byline-copy-button-xs) {
     width: 26px;
     height: 26px;
     min-height: 26px;
@@ -32,7 +32,7 @@
   }
 
   .sm,
-  :global(.infonomic-copy-button-sm) {
+  :global(.byline-copy-button-sm) {
     width: 32px;
     height: 32px;
     min-height: 32px;
@@ -40,7 +40,7 @@
   }
 
   .md,
-  :global(.infonomic-copy-button-md) {
+  :global(.byline-copy-button-md) {
     width: 38px;
     height: 38px;
     min-height: 38px;
@@ -48,7 +48,7 @@
   }
 
   .lg,
-  :global(.infonomic-copy-button-lg) {
+  :global(.byline-copy-button-lg) {
     width: 46px;
     height: 46px;
     min-height: 46px;
@@ -56,7 +56,7 @@
   }
 
   .xl,
-  :global(.infonomic-copy-button-xl) {
+  :global(.byline-copy-button-xl) {
     width: 54px;
     height: 54px;
     min-height: 54px;

package/src/components/button/copy-button.tsx

@@ -67,7 +67,7 @@ export function CopyButton({
   return (
     <div
       className={cx(
-        'infonomic-copy-button-container',
+        'byline-copy-button-container',
         styles['copy-button-container'],
         containerClassName
       )}
@@ -91,10 +91,10 @@ export function CopyButton({
           fullWidth={fullWidth}
           ripple={ripple}
           className={cx(
-            'infonomic-copy-button',
-            `infonomic-copy-button-${variant}`,
-            `infonomic-copy-button-${size}`,
-            `infonomic-copy-button-${intent}`,
+            'byline-copy-button',
+            `byline-copy-button-${variant}`,
+            `byline-copy-button-${size}`,
+            `byline-copy-button-${intent}`,
             styles[size],
             className
           )}

package/src/components/card/card.module.css

@@ -11,7 +11,7 @@
 
 @layer byline-components {
   .card,
-  :global(.infonomic-card) {
+  :global(.byline-card) {
     display: flex;
     flex-direction: column;
     text-decoration: none;
@@ -27,25 +27,25 @@
   }
 
   .card-hover,
-  :global(.infonomic-card-hover) {
+  :global(.byline-card-hover) {
     transition: background 0.2s ease-in-out;
   }
 
   .card-hover:hover,
-  :global(.infonomic-card-hover):hover {
+  :global(.byline-card-hover):hover {
     background: oklch(from var(--theme-50) 1 0.03 h);
   }
 
   :global(.dark),
   :global([data-theme="dark"]) {
     .card-hover:hover,
-    :global(.infonomic-card-hover):hover {
+    :global(.byline-card-hover):hover {
       background: oklch(from var(--canvas-800) 0.2 c h);
     }
   }
 
   .card-header,
-  :global(.infonomic-card-header) {
+  :global(.byline-card-header) {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
@@ -53,7 +53,7 @@
   }
 
   .card-title,
-  :global(.infonomic-card-title) {
+  :global(.byline-card-title) {
     color: var(--headings);
     font-size: 1.8rem;
     font-weight: bold;
@@ -62,20 +62,20 @@
   }
 
   .card-description,
-  :global(.infonomic-card-description) {
+  :global(.byline-card-description) {
     font-size: 0.875rem;
     color: var(--muted);
   }
 
   .card-content,
-  :global(.infonomic-card-content) {
+  :global(.byline-card-content) {
     flex: 1;
     padding: 1rem;
     padding-top: 0;
   }
 
   .card-footer,
-  :global(.infonomic-card-footer) {
+  :global(.byline-card-footer) {
     display: flex;
     align-items: center;
     padding: 1rem;

package/src/components/card/card.tsx

@@ -14,7 +14,7 @@ export type CardProps = useRender.ComponentProps<'div'> & {
 
 const Card = ({ className, hover, children, render, ref, ...rest }: CardProps) => {
   const hoverClasses = hover != null && hover === true ? styles['card-hover'] : undefined
-  const classes = cx('infonomic-card', styles.card, hoverClasses, className)
+  const classes = cx('byline-card', styles.card, hoverClasses, className)
 
   const element = useRender({
     defaultTagName: 'div',
@@ -39,7 +39,7 @@ interface OtherProps extends React.HTMLAttributes<HTMLDivElement> {
 const Header = ({ className, ref, ...props }: OtherProps) => (
   <div
     ref={ref}
-    className={cx('infonomic-card-header', styles['card-header'], className)}
+    className={cx('byline-card-header', styles['card-header'], className)}
     {...props}
   />
 )
@@ -49,7 +49,7 @@ Header.displayName = 'CardHeader'
 const Title = ({ className, ref, ...props }: OtherProps) => (
   <div
     ref={ref as React.Ref<HTMLDivElement>}
-    className={cx('infonomic-card-title', styles['card-title'], className)}
+    className={cx('byline-card-title', styles['card-title'], className)}
     {...props}
   />
 )
@@ -58,7 +58,7 @@ Title.displayName = 'CardTitle'
 const Description = ({ className, ref, ...props }: OtherProps) => (
   <div
     ref={ref}
-    className={cx('infonomic-card-description', styles['card-description'], className)}
+    className={cx('byline-card-description', styles['card-description'], className)}
     {...props}
   />
 )
@@ -67,7 +67,7 @@ Description.displayName = 'CardDescription'
 const Content = ({ className, ref, ...props }: OtherProps) => (
   <div
     ref={ref}
-    className={cx('infonomic-card-content', styles['card-content'], className)}
+    className={cx('byline-card-content', styles['card-content'], className)}
     {...props}
   />
 )
@@ -76,7 +76,7 @@ Content.displayName = 'CardContent'
 const Footer = ({ className, ref, ...props }: OtherProps) => (
   <div
     ref={ref}
-    className={cx('infonomic-card-footer', styles['card-footer'], className)}
+    className={cx('byline-card-footer', styles['card-footer'], className)}
     {...props}
   />
 )

package/src/components/chips/chip.module.css

@@ -11,7 +11,7 @@
 
 @layer byline-components {
   .chip,
-  :global(.infonomic-chip) {
+  :global(.byline-chip) {
     --chip-font-size: 0.9rem;
     --chip-height: 34px;
     --chip-padding-y: 0.35rem;
@@ -39,33 +39,33 @@
 
   .chip:disabled,
   .chip[disabled],
-  :global(.infonomic-chip):disabled,
-  :global(.infonomic-chip)[disabled] {
+  :global(.byline-chip):disabled,
+  :global(.byline-chip)[disabled] {
     pointer-events: none;
   }
 
   .chip:focus,
   .chip:active,
-  :global(.infonomic-chip):focus,
-  :global(.infonomic-chip):active {
+  :global(.byline-chip):focus,
+  :global(.byline-chip):active {
     outline-color: var(--ring-color);
   }
 
   .label,
-  :global(.infonomic-chip-label) {
+  :global(.byline-chip-label) {
     display: inline-flex;
     align-items: center;
     white-space: nowrap;
   }
 
   .icon,
-  :global(.infonomic-chip-icon) {
+  :global(.byline-chip-icon) {
     width: var(--chip-icon-size);
     height: var(--chip-icon-size);
   }
 
   .iconWrapper,
-  :global(.infonomic-chip-icon-wrapper) {
+  :global(.byline-chip-icon-wrapper) {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -73,14 +73,14 @@
   }
 
   .close-icon,
-  :global(.infonomic-chip-close-icon) {
+  :global(.byline-chip-close-icon) {
     width: calc(var(--chip-icon-size) * 0.9);
     height: calc(var(--chip-icon-size) * 0.9);
   }
 
   /* Sizes ----------------------------------------------------------- */
   .xs,
-  :global(.infonomic-chip-xs) {
+  :global(.byline-chip-xs) {
     --chip-height: 24px;
     --chip-padding-y: 0.15rem;
     --chip-padding-x: 0.3rem;
@@ -90,7 +90,7 @@
   }
 
   .sm,
-  :global(.infonomic-chip-sm) {
+  :global(.byline-chip-sm) {
     --chip-height: 28px;
     --chip-padding-y: 0.2rem;
     --chip-padding-x: 0.3rem;
@@ -99,7 +99,7 @@
   }
 
   .md,
-  :global(.infonomic-chip-md) {
+  :global(.byline-chip-md) {
     --chip-height: 32px;
     --chip-padding-y: 0.25rem;
     --chip-padding-x: 0.3rem;
@@ -108,7 +108,7 @@
   }
 
   .lg,
-  :global(.infonomic-chip-lg) {
+  :global(.byline-chip-lg) {
     --chip-gap: var(--gap-2);
     --chip-height: 36px;
     --chip-padding-y: 0.3rem;
@@ -118,7 +118,7 @@
   }
 
   .xl,
-  :global(.infonomic-chip-xl) {
+  :global(.byline-chip-xl) {
     --chip-gap: var(--gap-2);
     --chip-height: 40px;
     --chip-padding-y: 0.3rem;
@@ -130,27 +130,27 @@
   /* Variants -------------------------------------------------------- */
   /* Variants - Consuming Variables */
   .filled,
-  :global(.infonomic-chip-filled) {
+  :global(.byline-chip-filled) {
     color: var(--chip-variant-filled-foreground);
     background-color: var(--chip-variant-filled);
   }
 
   .filled:hover,
-  :global(.infonomic-chip-filled):hover {
+  :global(.byline-chip-filled):hover {
     background-color: var(--chip-variant-filled-hover);
   }
 
   .filled:focus,
   .filled:active,
-  :global(.infonomic-chip-filled):focus,
-  :global(.infonomic-chip-filled):active {
+  :global(.byline-chip-filled):focus,
+  :global(.byline-chip-filled):active {
     --ring-color: var(--chip-ring-color);
   }
 
   .filled:disabled,
   .filled[disabled],
-  :global(.infonomic-chip-filled):disabled,
-  :global(.infonomic-chip-filled)[disabled] {
+  :global(.byline-chip-filled):disabled,
+  :global(.byline-chip-filled)[disabled] {
     background-color: var(
       --chip-variant-filled-disabled,
       oklch(from var(--chip-variant-filled) calc(l * 1.1) calc(c * 0.85) h)
@@ -165,27 +165,27 @@
   /* Weak variant for close button on selected chip */
 
   .filled-weak,
-  :global(.infonomic-chip-filled-weak) {
+  :global(.byline-chip-filled-weak) {
     color: var(--chip-variant-filled-weak-foreground);
     background-color: var(--chip-variant-filled-weak);
   }
 
   .filled-weak:hover,
-  :global(.infonomic-chip-filled-weak):hover {
+  :global(.byline-chip-filled-weak):hover {
     background-color: var(--chip-variant-filled-weak-hover);
   }
 
   .filled-weak:focus,
   .filled-weak:active,
-  :global(.infonomic-chip-filled-weak):focus,
-  :global(.infonomic-chip-filled-weak):active {
+  :global(.byline-chip-filled-weak):focus,
+  :global(.byline-chip-filled-weak):active {
     --ring-color: var(--chip-ring-color);
   }
 
   .filled-weak:disabled,
   .filled-weak[disabled],
-  :global(.infonomic-chip-filled-weak):disabled,
-  :global(.infonomic-chip-filled-weak)[disabled] {
+  :global(.byline-chip-filled-weak):disabled,
+  :global(.byline-chip-filled-weak)[disabled] {
     background-color: var(
       --chip-variant-filled-weak-disabled,
       oklch(from var(--chip-variant-filled-weak) calc(l * 1.1) calc(c * 0.85) h)
@@ -200,7 +200,7 @@
   /* Outlined variant */
 
   .outlined,
-  :global(.infonomic-chip-outlined) {
+  :global(.byline-chip-outlined) {
     border: 1px solid var(--chip-variant-outlined-border);
     color: var(--chip-variant-outlined-foreground);
     background-color: var(--chip-variant-outlined);
@@ -208,8 +208,8 @@
 
   .outlined:disabled,
   .outlined[disabled],
-  :global(.infonomic-chip-outlined):disabled,
-  :global(.infonomic-chip-outlined)[disabled] {
+  :global(.byline-chip-outlined):disabled,
+  :global(.byline-chip-outlined)[disabled] {
     border-color: var(
       --chip-variant-outlined-border-disabled,
       oklch(from var(--chip-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h)
@@ -221,45 +221,45 @@
   }
 
   .outlined:hover,
-  :global(.infonomic-chip-outlined):hover {
+  :global(.byline-chip-outlined):hover {
     background-color: var(--chip-variant-outlined-hover);
   }
 
   .outlined:focus,
   .outlined:active,
-  :global(.infonomic-chip-outlined):focus,
-  :global(.infonomic-chip-outlined):active {
+  :global(.byline-chip-outlined):focus,
+  :global(.byline-chip-outlined):active {
     --ring-color: var(--chip-ring-color);
   }
 
   .text,
-  :global(.infonomic-chip-text) {
+  :global(.byline-chip-text) {
     background-color: var(--chip-variant-text);
     color: var(--chip-variant-text-foreground);
   }
 
   .text:disabled,
   .text[disabled],
-  :global(.infonomic-chip-text):disabled,
-  :global(.infonomic-chip-text)[disabled] {
+  :global(.byline-chip-text):disabled,
+  :global(.byline-chip-text)[disabled] {
     color: oklch(from var(--chip-variant-text-foreground) calc(l * 1.5) calc(c * 0.5) h);
   }
 
   .text:hover,
-  :global(.infonomic-chip-text):hover {
+  :global(.byline-chip-text):hover {
     background-color: var(--chip-variant-text-hover);
   }
 
   .text:focus,
   .text:active,
-  :global(.infonomic-chip-text):focus,
-  :global(.infonomic-chip-text):active {
+  :global(.byline-chip-text):focus,
+  :global(.byline-chip-text):active {
     --ring-color: var(--chip-ring-color);
   }
 
   /* Intents - Defining Variables */
   .primary,
-  :global(.infonomic-chip-primary) {
+  :global(.byline-chip-primary) {
     --chip-ring-color: var(--ring-primary);
 
     /* Filled */
@@ -286,7 +286,7 @@
   }
 
   .secondary,
-  :global(.infonomic-chip-secondary) {
+  :global(.byline-chip-secondary) {
     --chip-ring-color: var(--ring-secondary);
 
     /* Filled */
@@ -313,7 +313,7 @@
   }
 
   .noeffect,
-  :global(.infonomic-chip-noeffect) {
+  :global(.byline-chip-noeffect) {
     --chip-ring-color: var(--ring-noeffect);
 
     /* Filled */
@@ -340,7 +340,7 @@
   }
 
   .success,
-  :global(.infonomic-chip-success) {
+  :global(.byline-chip-success) {
     --chip-ring-color: var(--ring-success);
 
     /* Filled */
@@ -367,7 +367,7 @@
   }
 
   .info,
-  :global(.infonomic-chip-info) {
+  :global(.byline-chip-info) {
     --chip-ring-color: var(--ring-info);
 
     /* Filled */
@@ -394,7 +394,7 @@
   }
 
   .warning,
-  :global(.infonomic-chip-warning) {
+  :global(.byline-chip-warning) {
     --chip-ring-color: var(--ring-warning);
 
     /* Filled */
@@ -421,7 +421,7 @@
   }
 
   .danger,
-  :global(.infonomic-chip-danger) {
+  :global(.byline-chip-danger) {
     --chip-ring-color: var(--ring-danger);
 
     /* Filled */

package/src/components/chips/chip.tsx

@@ -138,7 +138,7 @@ export const Chip = ({
       onClick={handleRemoveClick}
       onKeyDown={handleRemoveKeyDown}
     >
-      <CloseIcon className={cx('infonomic-chip-close-icon', styles.icon, styles['close-icon'])} />
+      <CloseIcon className={cx('byline-chip-close-icon', styles.icon, styles['close-icon'])} />
     </button>
   ) : (
     endIcon
@@ -154,10 +154,10 @@ export const Chip = ({
     'aria-pressed': isSelectable ? isSelected : undefined,
     'aria-selected': isSelectable ? isSelected : undefined,
     className: cx(
-      'infonomic-chip',
-      `infonomic-chip-${variant}`,
-      `infonomic-chip-${intent}`,
-      `infonomic-chip-${size}`,
+      'byline-chip',
+      `byline-chip-${variant}`,
+      `byline-chip-${intent}`,
+      `byline-chip-${size}`,
       { selected: isSelected, disabled, removable: isRemovable },
       styles.chip,
       styles[appliedVariant],
@@ -171,15 +171,11 @@ export const Chip = ({
     children: (
       <>
         {leadingIcon != null && (
-          <span className={cx('infonomic-chip-icon-wrapper', styles.iconWrapper)}>
-            {leadingIcon}
-          </span>
+          <span className={cx('byline-chip-icon-wrapper', styles.iconWrapper)}>{leadingIcon}</span>
         )}
-        <span className={cx('infonomic-chip-label', styles.label)}>{children}</span>
+        <span className={cx('byline-chip-label', styles.label)}>{children}</span>
         {trailingIcon != null && (
-          <span className={cx('infonomic-chip-icon-wrapper', styles.iconWrapper)}>
-            {trailingIcon}
-          </span>
+          <span className={cx('byline-chip-icon-wrapper', styles.iconWrapper)}>{trailingIcon}</span>
         )}
       </>
     ),

package/src/components/container/container.module.css

@@ -11,7 +11,7 @@
 
 @layer byline-components {
   .container,
-  :global(.infonomic-container) {
+  :global(.byline-container) {
     width: 100%;
     padding: 0 1rem;
     margin: 0 auto;
@@ -22,7 +22,7 @@
   /* Large */
   @media (min-width: 66rem) {
     .container,
-    :global(.infonomic-container) {
+    :global(.byline-container) {
       max-width: 64rem;
     }
   }
@@ -30,7 +30,7 @@
   /* X-Large */
   @media (min-width: 77rem) {
     .container,
-    :global(.infonomic-container) {
+    :global(.byline-container) {
       max-width: 74.375rem;
     }
   }
@@ -38,7 +38,7 @@
   /* 2X-Large */
   @media (min-width: 94rem) {
     .container,
-    :global(.infonomic-container) {
+    :global(.byline-container) {
       max-width: 87.5rem;
     }
   }

package/src/components/container/container.tsx

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