@byline/ui 1.10.2 → 1.10.3

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

@@ -11,14 +11,14 @@
 
 @layer byline-components {
   .input-wrapper,
-  :global(.infonomic-input-wrapper) {
+  :global(.byline-input-wrapper) {
     display: flex;
     flex-direction: column;
     gap: var(--gap-1);
   }
 
   .input-container,
-  :global(.infonomic-input-container) {
+  :global(.byline-input-container) {
     position: relative;
     width: 100%;
     padding: 0;
@@ -28,7 +28,7 @@
   }
 
   .input,
-  :global(.infonomic-input) {
+  :global(.byline-input) {
     border: none;
     outline: 1px solid transparent;
     outline-offset: 2px;
@@ -43,20 +43,20 @@
 
   .input:focus,
   .input:active,
-  :global(.infonomic-input):focus,
-  :global(.infonomic-input):active {
+  :global(.byline-input):focus,
+  :global(.byline-input):active {
     outline-color: var(--ring-color);
   }
 
   .input:disabled,
   .input[disabled],
-  :global(.infonomic-input):disabled,
-  :global(.infonomic-input)[disabled] {
+  :global(.byline-input):disabled,
+  :global(.byline-input)[disabled] {
     pointer-events: none;
   }
 
   .label,
-  :global(.infonomic-input-label) {
+  :global(.byline-input-label) {
     font-size: 0.875rem;
     font-weight: 500;
     color: var(--label-color);
@@ -64,7 +64,7 @@
 
   /* Sizes */
   .sm,
-  :global(.infonomic-input-sm) {
+  :global(.byline-input-sm) {
     min-height: 32px;
     font-size: 0.875rem;
     line-height: 0;
@@ -72,7 +72,7 @@
   }
 
   .md,
-  :global(.infonomic-input-md) {
+  :global(.byline-input-md) {
     min-height: 36px;
     font-size: 1rem;
     line-height: 0;
@@ -80,7 +80,7 @@
   }
 
   .lg,
-  :global(.infonomic-input-lg) {
+  :global(.byline-input-lg) {
     min-height: 40px;
     font-size: 1.175rem;
     line-height: 0;
@@ -89,50 +89,50 @@
 
   .start-adornment,
   .end-adornment,
-  :global(.infonomic-input-start-adornment),
-  :global(.infonomic-input-end-adornment) {
+  :global(.byline-input-start-adornment),
+  :global(.byline-input-end-adornment) {
     position: absolute;
     display: flex;
     align-items: center;
   }
 
   .start-adornment,
-  :global(.infonomic-input-start-adornment) {
+  :global(.byline-input-start-adornment) {
     left: 5px;
   }
 
   .end-adornment,
-  :global(.infonomic-input-end-adornment) {
+  :global(.byline-input-end-adornment) {
     right: 5px;
   }
 
   .help-text,
-  :global(.infonomic-input-help-text) {
+  :global(.byline-input-help-text) {
     font-size: 0.75rem;
     color: var(--help-text-color);
   }
 
   /* Variants */
   .outlined,
-  :global(.infonomic-input-outlined) {
+  :global(.byline-input-outlined) {
     border: 1px solid var(--input-variant-outlined-border);
     background-color: transparent;
   }
 
   .outlined:hover,
-  :global(.infonomic-input-outlined):hover {
+  :global(.byline-input-outlined):hover {
     border: 1px solid var(--input-variant-outlined-hover-border);
   }
 
   .outlined:focus,
   .outlined:active,
-  :global(.infonomic-input-outlined):focus,
-  :global(.infonomic-input-outlined):active {
+  :global(.byline-input-outlined):focus,
+  :global(.byline-input-outlined):active {
     --ring-color: var(--input-variant-outline-ring-color);
   }
 
   .underlined,
-  :global(.infonomic-input-underlined) {
+  :global(.byline-input-underlined) {
     border-bottom: 1px solid var(--input-variant-underlined-border);
     border-radius: 0;
     gap: var(--gap-1);
@@ -141,86 +141,86 @@
 
   /* Sizes */
   .underlined.sm,
-  :global(.infonomic-input-underlined.input-sm) {
+  :global(.byline-input-underlined.input-sm) {
     padding: 0.25rem 0.1rem;
     min-height: 26px;
   }
 
   .underlined.md,
-  :global(.infonomic-input-underlined.input-md) {
+  :global(.byline-input-underlined.input-md) {
     padding: 0.25rem 0.1rem;
     min-height: 30px;
   }
 
   .underlined.lg,
-  :global(.infonomic-input-underlined.input-lg) {
+  :global(.byline-input-underlined.input-lg) {
     padding: 0 0.1rem;
     min-height: 34px;
   }
 
   .underlined:hover,
-  :global(.infonomic-input-underlined):hover {
+  :global(.byline-input-underlined):hover {
     border-bottom: 1px solid var(--input-variant-underlined-hover-border);
   }
 
   .underlined:focus,
   .underlined:active,
-  :global(.infonomic-input-underlined):focus,
-  :global(.infonomic-input-underlined):active {
+  :global(.byline-input-underlined):focus,
+  :global(.byline-input-underlined):active {
     outline: none;
   }
 
   .filled,
-  :global(.infonomic-input-filled) {
+  :global(.byline-input-filled) {
     background-color: var(--input-variant-filled);
   }
 
   /* Error classes last, so that they override all
     of the above */
   .error,
-  :global(.infonomic-input-error) {
+  :global(.byline-input-error) {
     border: 1px solid var(--field-border-invalid);
   }
 
   .error:hover,
-  :global(.infonomic-input-error):hover {
+  :global(.byline-input-error):hover {
     border: 1px solid var(--field-border-invalid);
   }
 
   .error:focus,
   .error:active,
-  :global(.infonomic-input-error):focus,
-  :global(.infonomic-input-error):active {
+  :global(.byline-input-error):focus,
+  :global(.byline-input-error):active {
     --ring-color: var(--field-ring-invalid);
   }
 
   .underlined.start-adornment-padding,
   .start-adornment-padding,
-  :global(.infonomic-input-underlined.input-start-adornment-padding),
-  :global(.infonomic-input-start-adornment-padding) {
+  :global(.byline-input-underlined.input-start-adornment-padding),
+  :global(.byline-input-start-adornment-padding) {
     padding-left: 2rem;
   }
 
   .underlined.end-adornment-padding,
   .end-adornment-padding,
-  :global(.infonomic-input-underlined.input-end-adornment-padding),
-  :global(.infonomic-input-end-adornment-padding) {
+  :global(.byline-input-underlined.input-end-adornment-padding),
+  :global(.byline-input-end-adornment-padding) {
     padding-right: 2rem;
   }
 
   .underlined.start-adornment,
-  :global(.infonomic-input-underlined.input-start-adornment) {
+  :global(.byline-input-underlined.input-start-adornment) {
     left: 0;
   }
 
   .underlined.end-adornment,
-  :global(.infonomic-input-underlined.input-end-adornment) {
+  :global(.byline-input-underlined.input-end-adornment) {
     right: 0;
   }
 
   /* Intents */
   .primary,
-  :global(.infonomic-input-primary) {
+  :global(.byline-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);
@@ -230,7 +230,7 @@
   }
 
   .secondary,
-  :global(.infonomic-input-secondary) {
+  :global(.byline-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);
@@ -240,7 +240,7 @@
   }
 
   .noeffect,
-  :global(.infonomic-input-noeffect) {
+  :global(.byline-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);
@@ -250,7 +250,7 @@
   }
 
   .success,
-  :global(.infonomic-input-success) {
+  :global(.byline-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);
@@ -260,7 +260,7 @@
   }
 
   .info,
-  :global(.infonomic-input-info) {
+  :global(.byline-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);
@@ -270,7 +270,7 @@
   }
 
   .warning,
-  :global(.infonomic-input-warning) {
+  :global(.byline-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);
@@ -280,7 +280,7 @@
   }
 
   .danger,
-  :global(.infonomic-input-danger) {
+  :global(.byline-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);

package/src/components/inputs/input.tsx

@@ -54,13 +54,13 @@ export const Input = <_C extends React.ElementType = 'input'>({
   ...rest
 }: InputProps) => {
   return (
-    <div className={cx('infonomic-input-wrapper', styles['input-wrapper'], inputWrapperClassName)}>
+    <div className={cx('byline-input-wrapper', styles['input-wrapper'], inputWrapperClassName)}>
       {label != null && <Label id={id} htmlFor={id} required={required} label={label} />}
-      <div className={cx('infonomic-input-container', styles['input-container'])}>
+      <div className={cx('byline-input-container', styles['input-container'])}>
         {startAdornment != null && (
           <div
             className={cx(
-              'infonomic-input-start-adornment',
+              'byline-input-start-adornment',
               styles['start-adornment'],
               styles[variant]
             )}
@@ -82,10 +82,10 @@ export const Input = <_C extends React.ElementType = 'input'>({
           aria-errormessage={errorText}
           aria-describedby={error ? `error-for-${id}` : undefined}
           className={cx(
-            'infonomic-input',
-            `infonomic-input-${variant}`,
-            `infonomic-input-${inputSize}`,
-            `infonomic-input-${intent}`,
+            'byline-input',
+            `byline-input-${variant}`,
+            `byline-input-${inputSize}`,
+            `byline-input-${intent}`,
             styles.input,
             styles[variant],
             styles[inputSize],
@@ -99,11 +99,7 @@ export const Input = <_C extends React.ElementType = 'input'>({
         />
         {endAdornment != null && (
           <div
-            className={cx(
-              'infonomic-input-end-adornment',
-              styles['end-adornment'],
-              styles[variant]
-            )}
+            className={cx('byline-input-end-adornment', styles['end-adornment'], styles[variant])}
           >
             {endAdornment}
           </div>

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

@@ -11,14 +11,14 @@
 
 @layer byline-components {
   .label,
-  :global(.infonomic-label) {
+  :global(.byline-label) {
     display: block;
     font-weight: 500;
     color: var(--text);
   }
 
   .required,
-  :global(.infonomic-label-required) {
+  :global(.byline-label-required) {
     color: var(--text-danger);
   }
 }

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

@@ -12,28 +12,28 @@
 /* 'border-collapse w-full text-sm text-left text-gray-700 dark:text-gray-400 m-0', */
 @layer byline-components {
   .column,
-  :global(.infonomic-radio-group-column) {
+  :global(.byline-radio-group-column) {
     display: flex;
     flex-direction: column;
     gap: var(--gap-2);
   }
 
   .row,
-  :global(.infonomic-radio-group-row) {
+  :global(.byline-radio-group-row) {
     display: flex;
     flex-direction: row;
     gap: var(--gap-2);
   }
 
   .item-container,
-  :global(.infonomic-radio-group-item-container) {
+  :global(.byline-radio-group-item-container) {
     display: flex;
     align-items: center;
     gap: var(--gap-2);
   }
 
   .item,
-  :global(.infonomic-radio-group-item) {
+  :global(.byline-radio-group-item) {
     all: unset;
     width: 18px;
     height: 18px;
@@ -43,13 +43,13 @@
   }
 
   .item[data-disabled],
-  :global(.infonomic-radio-group-item[data-disabled]) {
+  :global(.byline-radio-group-item[data-disabled]) {
     pointer-events: none;
   }
 
   /* Style for the "checked" state */
   .indicator[data-checked],
-  :global(.infonomic-radio-group-indicator[data-checked]) {
+  :global(.byline-radio-group-indicator[data-checked]) {
     animation: radioIn 0.3s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
     opacity: 1;
     transform: scale(1);
@@ -57,14 +57,14 @@
 
   /* Style for the "unchecked" state */
   .indicator[data-unchecked],
-  :global(.infonomic-radio-group-indicator[data-unchecked]) {
+  :global(.byline-radio-group-indicator[data-unchecked]) {
     animation: radioOut 0.2s ease-in;
     opacity: 0;
     transform: scale(0.8);
   }
 
   .indicator,
-  :global(.infonomic-radio-group-indicator) {
+  :global(.byline-radio-group-indicator) {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -83,7 +83,7 @@
   }
 
   .label,
-  :global(.infonomic-radio-group-label) {
+  :global(.byline-radio-group-label) {
     color: var(--foreground);
     font-size: 15px;
     line-height: 1;
@@ -91,50 +91,50 @@
   }
 
   .row .label,
-  :global(.infonomic-radio-group-row) :global(.infonomic-radio-group-label) {
+  :global(.byline-radio-group-row) :global(.byline-radio-group-label) {
     padding-left: 0;
     padding-right: var(--spacing-16);
   }
 
   /* Intents */
   .primary,
-  :global(.infonomic-radio-group-primary) {
+  :global(.byline-radio-group-primary) {
     --radio-border: var(--fill-primary-strong);
     --radio-indicator-color: var(--fill-primary-strong);
   }
 
   .secondary,
-  :global(.infonomic-radio-group-secondary) {
+  :global(.byline-radio-group-secondary) {
     --radio-border: var(--fill-secondary-strong);
     --radio-indicator-color: var(--fill-secondary-strong);
   }
 
   .noeffect,
-  :global(.infonomic-radio-group-noeffect) {
+  :global(.byline-radio-group-noeffect) {
     --radio-border: var(--fill-noeffect-strong);
     --radio-indicator-color: var(--fill-noeffect-strong);
   }
 
   .success,
-  :global(.infonomic-radio-group-success) {
+  :global(.byline-radio-group-success) {
     --radio-border: var(--fill-success-strong);
     --radio-indicator-color: var(--fill-success-strong);
   }
 
   .info,
-  :global(.infonomic-radio-group-info) {
+  :global(.byline-radio-group-info) {
     --radio-border: var(--fill-info-strong);
     --radio-indicator-color: var(--fill-info-strong);
   }
 
   .warning,
-  :global(.infonomic-radio-group-warning) {
+  :global(.byline-radio-group-warning) {
     --radio-border: var(--fill-warning-strong);
     --radio-indicator-color: var(--fill-warning-strong);
   }
 
   .danger,
-  :global(.infonomic-radio-group-danger) {
+  :global(.byline-radio-group-danger) {
     --radio-border: var(--fill-danger-strong);
     --radio-indicator-color: var(--fill-danger-strong);
   }

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

@@ -64,7 +64,7 @@ export const RadioGroup = ({
 }) => (
   <RadioGroupPrimitive
     ref={forwardedRef}
-    className={cx('infonomic-radio-group', styles[direction], className)}
+    className={cx('byline-radio-group', styles[direction], className)}
     {...props}
   >
     {children}

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

@@ -11,12 +11,12 @@
 
 @layer byline-components {
   .positioner,
-  :global(.infonomic-select-positioner) {
+  :global(.byline-select-positioner) {
     z-index: 50;
   }
 
   .popup,
-  :global(.infonomic-select-popup) {
+  :global(.byline-select-popup) {
     z-index: 50;
     margin-top: 2px;
     border: 1px solid var(--surface-panel-border);
@@ -47,12 +47,12 @@
   }
 
   .list,
-  :global(.infonomic-select-list) {
+  :global(.byline-select-list) {
     z-index: 50;
   }
 
   .scroll-arrow,
-  :global(.infonomic-select-scroll-arrow) {
+  :global(.byline-select-scroll-arrow) {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -65,7 +65,7 @@
   }
 
   .select-item,
-  :global(.infonomic-select-item) {
+  :global(.byline-select-item) {
     position: relative;
     user-select: none;
     color: var(--surface-item-text);
@@ -81,20 +81,20 @@
   }
 
   .select-item[data-disabled],
-  :global(.infonomic-select-item[data-disabled]) {
+  :global(.byline-select-item[data-disabled]) {
     color: var(--surface-item-text-disabled);
     pointer-events: none;
   }
 
   .select-item[data-highlighted],
-  :global(.infonomic-select-item[data-highlighted]) {
+  :global(.byline-select-item[data-highlighted]) {
     outline: none;
     background-color: var(--surface-item-hover);
     color: var(--surface-item-text-hover);
   }
 
   .select-item-indicator,
-  :global(.infonomic-select-item-indicator) {
+  :global(.byline-select-item-indicator) {
     position: absolute;
     left: 0;
     width: 24px;

package/src/components/inputs/select.tsx

@@ -56,7 +56,7 @@ export function Select<Value extends string | number = string>({
   ...rest
 }: SelectProps<Value>): React.JSX.Element {
   return (
-    <div className={cx('infonomic-select-container', containerClassName)}>
+    <div className={cx('byline-select-container', containerClassName)}>
       <SelectPrimitive.Root<Value> items={items} {...rest}>
         <SelectPrimitive.Trigger
           aria-label={ariaLabel ?? 'Select'}
@@ -117,12 +117,12 @@ export const SelectItem = ({
 }) => {
   return (
     <SelectPrimitive.Item
-      className={cx('infonomic-select-item', styles['select-item'], className)}
+      className={cx('byline-select-item', styles['select-item'], className)}
       {...props}
       ref={forwardedRef}
     >
       <SelectPrimitive.ItemIndicator
-        className={cx('infonomic-select-item-indicator', styles['select-item-indicator'])}
+        className={cx('byline-select-item-indicator', styles['select-item-indicator'])}
       >
         <CheckIcon />
       </SelectPrimitive.ItemIndicator>

package/src/components/inputs/text-area.module.css

@@ -11,22 +11,22 @@
 
 @layer byline-components {
   .text-area,
-  :global(.infonomic-text-area) {
+  :global(.byline-text-area) {
     font-size: 1rem;
     width: 100%;
     padding: 0.5rem;
   }
 
   .underlined,
-  :global(.infonomic-text-area--underlined) {
+  :global(.byline-text-area--underlined) {
     padding-left: 0;
     padding-right: 0;
   }
 
   .underlined:focus,
   .underlined:active,
-  :global(.infonomic-text-area--underlined):focus,
-  :global(.infonomic-text-area--underlined):active {
+  :global(.byline-text-area--underlined):focus,
+  :global(.byline-text-area--underlined):active {
     outline: none;
   }
 

package/src/components/inputs/text-area.tsx

@@ -60,9 +60,9 @@ export const TextArea = function TextArea({
         aria-errormessage={errorText}
         aria-describedby={error ? `error-for-${id}` : undefined}
         className={cx(
-          'infonomic-text-area',
-          `infonomic-text-area-${variant}`,
-          `infonomic-text-area-${intent}`,
+          'byline-text-area',
+          `byline-text-area-${variant}`,
+          `byline-text-area-${intent}`,
           inputStyles.input,
           inputStyles[variant],
           inputStyles[intent],