@byline/ui 0.9.3 → 0.10.1

package/src/components/badge/badge.tsx

@@ -0,0 +1,42 @@
+import { useRender } from '@base-ui/react/use-render'
+import cx from 'classnames'
+
+import styles from './badge.module.css'
+import type { Intent } from '../@types/shared'
+
+export type BadgeProps = useRender.ComponentProps<'div'> & {
+  children: React.ReactNode
+  intent?: Intent
+  className?: string
+  ref?: React.Ref<HTMLDivElement>
+}
+
+export const Badge = ({
+  className,
+  intent = 'primary',
+  children,
+  render,
+  ref,
+  ...rest
+}: BadgeProps): React.JSX.Element => {
+  const element = useRender({
+    defaultTagName: 'div',
+    render,
+    ref,
+    props: {
+      ...rest,
+      className: cx(
+        'infonomic-badge',
+        `infonomic-badge-${intent}`,
+        styles.badge,
+        styles[intent],
+        className
+      ),
+      children,
+    },
+  })
+
+  return element
+}
+
+Badge.displayName = 'Badge'

package/src/components/button/@types/button.ts

@@ -0,0 +1,50 @@
+// generic types
+import type { Size as s, Intent as t } from '../../@types/shared.js'
+
+/**
+ * This file contains the types and prop-types for the Button and IconButton components.
+ */
+
+// typescript types
+
+/**
+ * Available visual style variants for Button and IconButton.
+ */
+export const variant = ['filled', 'filled-weak', 'outlined', 'gradient', 'text'] as const
+
+/**
+ * Visual style variant of the button.
+ *
+ * - `filled`      — solid background fill using the intent color (default)
+ * - `filled-weak` — lightly tinted background, lower visual weight than `filled`
+ * - `outlined`    — transparent background with an intent-colored border
+ * - `gradient`    — gradient background from intent start to end color
+ * - `text`        — no background or border, label only (like a hyperlink)
+ *
+ * @default 'filled'
+ */
+export type Variant = (typeof variant)[number]
+
+/**
+ * Size of the button. Inherits from the shared `Size` type.
+ * @default 'md'
+ */
+export type Size = 'md' | s
+
+/**
+ * Semantic color intent of the button. Inherits from the shared `Intent` type.
+ * @default 'primary'
+ */
+export type Intent = 'primary' | t
+
+/**
+ * When `true`, the button expands to fill 100% of its container width.
+ * @default false
+ */
+export type FullWidth = boolean
+
+/**
+ * When `true`, enables a Material-style ripple animation on click/tap.
+ * @default false
+ */
+export type EnableRipple = boolean

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

@@ -0,0 +1,19 @@
+@layer byline-base, byline-utilities, byline-theme, byline-components;
+
+@layer byline-components {
+  .button-group,
+  :global(.infonomic-button-group) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-items: center;
+    gap: var(--gap-2);
+  }
+
+  @media screen and (min-width: 40rem) {
+    .button-group,
+    :global(.infonomic-button-group) {
+      flex-direction: row;
+    }
+  }
+}

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

@@ -0,0 +1,142 @@
+'use client'
+
+import React, { type Ref } from 'react'
+
+import { Toggle } from '@base-ui/react/toggle'
+import { ToggleGroup } from '@base-ui/react/toggle-group'
+import cx from 'classnames'
+
+import { Button } from './button'
+import styles from './button-group.module.css'
+import type { EnableRipple, Intent, Size, Variant } from './@types/button'
+
+interface ButtonGroupContextType {
+  variant?: Variant
+  size?: Size
+  ripple?: EnableRipple
+  expandToFit?: boolean
+  active?: Intent
+  inactive?: Intent
+  value?: string | string[]
+}
+
+const ButtonGroupContext = React.createContext<ButtonGroupContextType>({
+  size: 'md',
+  variant: 'filled',
+  ripple: true,
+  expandToFit: false,
+  active: 'primary',
+  inactive: 'noeffect',
+})
+
+type ToggleGroupProps = React.ComponentProps<typeof ToggleGroup>
+
+// Create separate props for single and multiple modes
+type SingleToggleGroupProps = Omit<ToggleGroupProps, 'multiple' | 'value' | 'onValueChange'> & {
+  type: 'single'
+  value?: string
+  onValueChange?: (value: string) => void
+}
+
+type MultipleToggleGroupProps = Omit<ToggleGroupProps, 'multiple' | 'value' | 'onValueChange'> & {
+  type: 'multiple'
+  value?: string[]
+  onValueChange?: (value: string[]) => void
+}
+
+export type ButtonGroupProps = (SingleToggleGroupProps | MultipleToggleGroupProps) & {
+  onValueChange?: (value: string | string[]) => void
+  ref?: Ref<HTMLDivElement>
+} & ButtonGroupContextType
+
+// Updated to use ref as a prop and not React.forwardRef
+const ButtonGroup = ({
+  className,
+  variant = 'filled',
+  size = 'md',
+  ripple = true,
+  expandToFit = false,
+  active = 'primary',
+  inactive = 'noeffect',
+  type,
+  onValueChange,
+  value,
+  defaultValue,
+  children,
+  ref,
+  ...props
+}: ButtonGroupProps) => {
+  const isMultiple = type === 'multiple'
+
+  const handleValueChange: React.ComponentProps<typeof ToggleGroup>['onValueChange'] = (
+    newValue,
+    _event
+  ) => {
+    if (!onValueChange) return
+    if (isMultiple) {
+      onValueChange(newValue)
+    } else {
+      // For single mode, pass the first value or empty string
+      onValueChange(newValue[0] ?? '')
+    }
+  }
+
+  // Normalize value to string[] for Base UI
+  const normalizedValue = value == null ? undefined : Array.isArray(value) ? value : [value]
+  const normalizedDefault =
+    defaultValue == null ? undefined : Array.isArray(defaultValue) ? defaultValue : [defaultValue]
+
+  return (
+    <ToggleGroup
+      multiple={isMultiple}
+      defaultValue={normalizedDefault}
+      value={normalizedValue}
+      ref={ref}
+      onValueChange={handleValueChange}
+      className={cx(styles['button-group'], className)}
+      {...props}
+    >
+      <ButtonGroupContext value={{ variant, size, ripple, expandToFit, active, inactive, value }}>
+        {children}
+      </ButtonGroupContext>
+    </ToggleGroup>
+  )
+}
+
+ButtonGroupContext.displayName = 'ButtonGroup'
+
+type ButtonGroupItemProps = Omit<React.ComponentProps<typeof Toggle>, 'className'> & {
+  className?: string
+  ref?: Ref<HTMLButtonElement>
+} & ButtonGroupContextType
+
+const ButtonGroupItem = ({ className, children, value, ref, ...props }: ButtonGroupItemProps) => {
+  const context = React.useContext(ButtonGroupContext)
+  const active = Array.isArray(context.value)
+    ? context.value.includes(value!)
+    : context.value === value
+
+  return (
+    <Toggle
+      value={value}
+      ref={ref}
+      render={
+        <Button
+          className={className}
+          fullWidth={context.expandToFit}
+          variant={context.variant}
+          intent={active ? context.active : context.inactive}
+          size={context.size}
+          ripple={context.ripple}
+        />
+      }
+      {...props}
+    >
+      {children}
+    </Toggle>
+  )
+}
+
+ButtonGroupItem.displayName = 'ButtonGroupItem'
+
+export { ButtonGroup, ButtonGroupItem }