@byline/ui 0.9.3 → 0.10.1

package/src/admin/components/admin-permissions/inspector.tsx

@@ -34,10 +34,10 @@ import type {
   ListRegisteredAbilitiesResponse,
   WhoHasAbilityResponse,
 } from '@byline/admin/admin-permissions'
-import { Button, Container, LoaderRing, Section } from '@infonomic/uikit/react'
 import cx from 'classnames'
 
 import { useBylineAdminServices } from '../../../services/admin-services-context.js'
+import { Button, Container, LoaderRing, Section } from '../../../uikit.js'
 import styles from './inspector.module.css'
 
 // --- helpers ---------------------------------------------------------------

package/src/admin/components/admin-roles/create.tsx

@@ -21,11 +21,11 @@ import { useState } from 'react'
 import { revalidateLogic, useForm } from '@tanstack/react-form-start'
 
 import type { AdminRoleResponse } from '@byline/admin/admin-roles'
-import { Alert, Button, Input, LoaderEllipsis, TextArea } from '@infonomic/uikit/react'
 import cx from 'classnames'
 import { z } from 'zod'
 
 import { useBylineAdminServices } from '../../../services/admin-services-context.js'
+import { Alert, Button, Input, LoaderEllipsis, TextArea } from '../../../uikit.js'
 import styles from './create.module.css'
 
 const createAdminRoleFormSchema = z.object({

package/src/admin/components/admin-roles/permissions.tsx

@@ -38,10 +38,10 @@ import type {
   SetRoleAbilitiesResponse,
 } from '@byline/admin/admin-permissions'
 import type { AdminRoleResponse } from '@byline/admin/admin-roles'
-import { Alert, Button, Checkbox, LoaderEllipsis } from '@infonomic/uikit/react'
 import cx from 'classnames'
 
 import { useBylineAdminServices } from '../../../services/admin-services-context.js'
+import { Alert, Button, Checkbox, LoaderEllipsis } from '../../../uikit.js'
 import styles from './permissions.module.css'
 
 type Mode = 'view' | 'edit'

package/src/admin/components/admin-roles/update.tsx

@@ -21,11 +21,11 @@ import { useState } from 'react'
 import { revalidateLogic, useForm } from '@tanstack/react-form-start'
 
 import type { AdminRoleResponse } from '@byline/admin/admin-roles'
-import { Alert, Button, Input, LoaderEllipsis, TextArea } from '@infonomic/uikit/react'
 import cx from 'classnames'
 import { z } from 'zod'
 
 import { useBylineAdminServices } from '../../../services/admin-services-context.js'
+import { Alert, Button, Input, LoaderEllipsis, TextArea } from '../../../uikit.js'
 import styles from './update.module.css'
 import type { UpdateAdminRoleInput } from '../../../services/admin-services-types.js'
 

package/src/admin/components/admin-users/create.tsx

@@ -28,11 +28,11 @@ import { revalidateLogic, useForm } from '@tanstack/react-form-start'
 
 import type { AdminUserResponse } from '@byline/admin/admin-users'
 import { passwordSchema } from '@byline/core/validation'
-import { Alert, Button, Checkbox, Input, LoaderEllipsis } from '@infonomic/uikit/react'
 import cx from 'classnames'
 import { z } from 'zod'
 
 import { useBylineAdminServices } from '../../../services/admin-services-context.js'
+import { Alert, Button, Checkbox, Input, LoaderEllipsis } from '../../../uikit.js'
 import styles from './create.module.css'
 
 const createAdminUserFormSchema = z.object({

package/src/admin/components/admin-users/roles.tsx

@@ -27,10 +27,10 @@ import { useState } from 'react'
 
 import type { AdminRoleResponse, UserRolesResponse } from '@byline/admin/admin-roles'
 import type { AdminUserResponse } from '@byline/admin/admin-users'
-import { Alert, Button, Checkbox, LoaderEllipsis } from '@infonomic/uikit/react'
 import cx from 'classnames'
 
 import { useBylineAdminServices } from '../../../services/admin-services-context.js'
+import { Alert, Button, Checkbox, LoaderEllipsis } from '../../../uikit.js'
 import styles from './roles.module.css'
 
 interface UserRolesProps {

package/src/admin/components/admin-users/set-password.tsx

@@ -26,11 +26,11 @@ import { revalidateLogic, useForm } from '@tanstack/react-form-start'
 
 import type { AdminUserResponse } from '@byline/admin/admin-users'
 import { passwordSchema } from '@byline/core/validation'
-import { Alert, Button, InputPassword, LoaderEllipsis } from '@infonomic/uikit/react'
 import cx from 'classnames'
 import { z } from 'zod'
 
 import { useBylineAdminServices } from '../../../services/admin-services-context.js'
+import { Alert, Button, InputPassword, LoaderEllipsis } from '../../../uikit.js'
 import styles from './set-password.module.css'
 
 const setPasswordFormSchema = z

package/src/admin/components/admin-users/update.tsx

@@ -24,11 +24,11 @@ import { useState } from 'react'
 import { revalidateLogic, useForm } from '@tanstack/react-form-start'
 
 import type { AdminUserResponse } from '@byline/admin/admin-users'
-import { Alert, Button, Checkbox, Input, LoaderEllipsis } from '@infonomic/uikit/react'
 import cx from 'classnames'
 import { z } from 'zod'
 
 import { useBylineAdminServices } from '../../../services/admin-services-context.js'
+import { Alert, Button, Checkbox, Input, LoaderEllipsis } from '../../../uikit.js'
 import styles from './update.module.css'
 
 const updateUserSchema = z.object({

package/src/admin/components/auth/sign-in-form.tsx

@@ -22,10 +22,10 @@
 
 import { type FormEvent, useState } from 'react'
 
-import { Alert, Button, Card, Input, LoaderEllipsis } from '@infonomic/uikit/react'
 import cx from 'classnames'
 
 import { useBylineAdminServices } from '../../../services/admin-services-context.js'
+import { Alert, Button, Card, Input, LoaderEllipsis } from '../../../uikit.js'
 import styles from './sign-in-form.module.css'
 
 interface SignInFormProps {

package/src/admin/components/collections/diff-modal.tsx

@@ -8,11 +8,11 @@
 
 import { useEffect, useState } from 'react'
 
-import { CloseIcon, IconButton, LoaderRing, Modal } from '@infonomic/uikit/react'
 import cx from 'classnames'
 import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer-continued'
 
 import { useBylineAdminServices } from '../../../services/admin-services-context.js'
+import { CloseIcon, IconButton, LoaderRing, Modal } from '../../../uikit.js'
 import styles from './diff-modal.module.css'
 
 // Keys that are per-version metadata rather than content — strip before diffing

package/src/admin/components/collections/status-badge.tsx

@@ -12,9 +12,9 @@ import {
   WORKFLOW_STATUS_DRAFT,
   WORKFLOW_STATUS_PUBLISHED,
 } from '@byline/core'
-import { Badge } from '@infonomic/uikit/react'
 import cx from 'classnames'
 
+import { Badge } from '../../../uikit.js'
 import styles from './status-badge.module.css'
 
 function statusIntent(status: string): 'success' | 'warning' | 'info' | 'noeffect' {

package/src/admin/tabs.tsx

@@ -6,9 +6,9 @@
  * Copyright (c) Infonomic Company Limited
  */
 
-import { Badge } from '@infonomic/uikit/react'
 import cx from 'classnames'
 
+import { Badge } from '../uikit.js'
 import styles from './tabs.module.css'
 
 export interface TabItem {

package/src/admin.ts

@@ -0,0 +1,39 @@
+/**
+ * NOTE: We put a .js ending on imports here to satisfy
+ * TS / dist output
+ */
+
+export * from './admin/components/admin-account/change-password.js'
+export * from './admin/components/admin-account/container.js'
+export * from './admin/components/admin-account/update.js'
+export * from './admin/components/admin-permissions/inspector.js'
+export * from './admin/components/admin-roles/create.js'
+export * from './admin/components/admin-roles/permissions.js'
+export * from './admin/components/admin-roles/update.js'
+export * from './admin/components/admin-users/create.js'
+export * from './admin/components/admin-users/roles.js'
+export * from './admin/components/admin-users/set-password.js'
+export * from './admin/components/admin-users/update.js'
+export * from './admin/components/auth/sign-in-form.js'
+export * from './admin/components/collections/diff-modal.js'
+export * from './admin/components/collections/status-badge.js'
+export * from './admin/group.js'
+export * from './admin/row.js'
+export * from './admin/tabs.js'
+export * from './services/admin-services-context.js'
+export type {
+  AdminServiceCall,
+  BylineAdminServices,
+  ChangeAccountPasswordInput,
+  CreateAdminRoleInput,
+  CreateAdminUserInput,
+  SetAdminUserPasswordInput,
+  SetRoleAbilitiesInput,
+  SetUserRolesInput,
+  SignInInput,
+  SignInResult,
+  UpdateAccountInput,
+  UpdateAdminRoleInput,
+  UpdateAdminUserInput,
+  WhoHasAbilityInput,
+} from './services/admin-services-types.js'

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

@@ -0,0 +1,79 @@
+// typescript types
+
+// Arrays make available an iterator for easy storybook layout
+
+/**
+ * Available size tokens, ordered from smallest to largest.
+ * Most components default to `'md'`.
+ */
+export const size = ['xs', 'sm', 'md', 'lg', 'xl'] as const
+
+/**
+ * Visual size of a component.
+ *
+ * - `xs` — extra-small, compact inline use
+ * - `sm` — small, tight layouts
+ * - `md` — standard size (default for most components)
+ * - `lg` — large, prominent elements
+ * - `xl` — extra-large, hero or display use
+ *
+ * @default 'md'
+ */
+export type Size = (typeof size)[number]
+
+/**
+ * Available semantic color intents.
+ * Controls the visual meaning (color, icon) of a component.
+ */
+export const intent = [
+  'primary',
+  'secondary',
+  'noeffect',
+  'success',
+  'info',
+  'warning',
+  'danger',
+] as const
+
+/**
+ * Semantic color intent applied to a component.
+ *
+ * - `primary`   — brand/main action (blue by default)
+ * - `secondary` — alternate/supporting action
+ * - `noeffect`  — neutral, no color emphasis (gray)
+ * - `success`   — positive outcome or confirmation (green)
+ * - `info`      — informational, non-critical (cyan/blue)
+ * - `warning`   — caution, needs attention (yellow/amber)
+ * - `danger`    — destructive action or error state (red)
+ *
+ * @default 'primary'
+ */
+export type Intent = (typeof intent)[number]
+
+/**
+ * Status icon variants used inside notification components.
+ */
+export const icons = ['success', 'info', 'success', 'warning', 'danger'] as const
+
+/**
+ * Icon variant shown inside a notification (e.g. Toast, Alert).
+ * Maps to the corresponding status icon.
+ */
+export type Icons = (typeof icons)[number]
+
+/**
+ * Screen corner positions for floating elements.
+ */
+export const position = ['top-left', 'top-right', 'bottom-left', 'bottom-right'] as const
+
+/**
+ * Corner position for floating/overlay elements such as toasts and popovers.
+ *
+ * - `top-left`     — top-left corner of the viewport
+ * - `top-right`    — top-right corner of the viewport (default for toasts)
+ * - `bottom-left`  — bottom-left corner of the viewport
+ * - `bottom-right` — bottom-right corner of the viewport
+ *
+ * @default 'top-right'
+ */
+export type Position = (typeof position)[number]

package/src/components/accordion/accordion.module.css

@@ -0,0 +1,56 @@
+@layer byline-base, byline-utilities, byline-theme, byline-components;
+
+@layer byline-components {
+  .item,
+  :global(.infonomic-accordion-item) {
+    overflow: hidden;
+    margin-top: 1px;
+  }
+
+  .header,
+  :global(.infonomic-accordion-header) {
+    margin: 0;
+    display: flex;
+  }
+
+  .trigger,
+  :global(.infonomic-accordion-trigger) {
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    width: 100%;
+  }
+
+  .content,
+  :global(.infonomic-accordion-content) {
+    overflow: hidden;
+
+    &[data-open] {
+      animation: accordionSlideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
+    }
+
+    &[data-ending-style] {
+      animation: accordionSlideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
+    }
+  }
+
+  @keyframes accordionSlideDown {
+    from {
+      height: 0;
+    }
+
+    to {
+      height: var(--accordion-panel-height);
+    }
+  }
+
+  @keyframes accordionSlideUp {
+    from {
+      height: var(--accordion-panel-height);
+    }
+
+    to {
+      height: 0;
+    }
+  }
+}

package/src/components/accordion/accordion.tsx

@@ -0,0 +1,125 @@
+'use client'
+
+/**
+ * NOTE: An accordion can be used in a variety of ways, including
+ * simple FAQs, complex navigation, and more. As such, we minimally
+ * style the accordion here in order to provide a base for customization.
+ */
+
+import type React from 'react'
+
+import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion'
+import cx from 'classnames'
+
+import styles from './accordion.module.css'
+
+export type AccordionRootElement = React.ComponentRef<'div'>
+
+const Root = ({
+  children,
+  className,
+  ref,
+  ...props
+}: {
+  children: React.ReactNode
+  className?: string
+  ref?: React.RefObject<AccordionRootElement>
+} & React.ComponentProps<typeof AccordionPrimitive.Root>) => {
+  return (
+    <AccordionPrimitive.Root
+      ref={ref}
+      className={cx('infonomic-accordion-root', className)}
+      {...props}
+    >
+      {children}
+    </AccordionPrimitive.Root>
+  )
+}
+
+export type AccordionItemElement = React.ComponentRef<'div'>
+const Item = function AccordionItem({
+  ref,
+  children,
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item> & {
+  ref?: React.RefObject<AccordionItemElement>
+}) {
+  return (
+    <AccordionPrimitive.Item
+      className={cx('infonomic-accordion-item', className)}
+      {...props}
+      ref={ref}
+    >
+      {children}
+    </AccordionPrimitive.Item>
+  )
+}
+
+export type AccordionHeaderElement = React.ComponentRef<'h3'>
+const Header = function AccordionHeader({
+  ref,
+  children,
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Header> & {
+  ref?: React.RefObject<AccordionHeaderElement>
+}) {
+  return (
+    <AccordionPrimitive.Header
+      className={cx('infonomic-accordion-header', className)}
+      {...props}
+      ref={ref}
+    >
+      {children}
+    </AccordionPrimitive.Header>
+  )
+}
+
+export type AccordionTriggerElement = React.ComponentRef<'button'>
+const Trigger = function AccordionTrigger({
+  ref,
+  children,
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger> & {
+  ref?: React.RefObject<AccordionTriggerElement>
+}) {
+  return (
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cx('infonomic-accordion-trigger', styles.trigger, className)}
+      {...props}
+    >
+      {children}
+    </AccordionPrimitive.Trigger>
+  )
+}
+
+export type AccordionPanelElement = React.ComponentRef<'div'>
+const Panel = function AccordionPanel({
+  ref,
+  children,
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Panel> & {
+  ref?: React.RefObject<AccordionPanelElement>
+}) {
+  return (
+    <AccordionPrimitive.Panel
+      className={cx('infonomic-accordion-content', styles.content, className)}
+      {...props}
+      ref={ref}
+    >
+      {children}
+    </AccordionPrimitive.Panel>
+  )
+}
+
+export const Accordion = {
+  Root,
+  Item,
+  Header,
+  Trigger,
+  Panel,
+}

package/src/components/animation/fade-in-lift.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import type React from 'react'
+import type { ComponentPropsWithoutRef, ElementType } from 'react'
+
+import { motion } from 'motion/react'
+
+// Define a generic component type
+interface FadeInLiftProps<T extends ElementType> {
+  as?: T
+  children: React.ReactNode
+  duration?: number
+  delay?: number
+  className?: string
+}
+
+// Use a generic type to infer correct props
+export const FadeInLift = <T extends ElementType = 'div'>({
+  as,
+  children,
+  className,
+  duration = 0.5,
+  delay = 0,
+  ...rest
+}: FadeInLiftProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof FadeInLiftProps<T>>) => {
+  const Component = as ? motion.create(as) : motion.div
+
+  return (
+    <Component
+      className={className}
+      initial={{ opacity: 0, y: 30 }}
+      whileInView={{
+        opacity: 1,
+        y: 0,
+        transition: { duration, delay },
+      }}
+      viewport={{ once: true }}
+      {...rest}
+    >
+      {children}
+    </Component>
+  )
+}

package/src/components/avatar/avatar.module.css

@@ -0,0 +1,45 @@
+@layer byline-base,
+  byline-functional,
+  byline-utilities,
+  byline-theme,
+  byline-typography,
+  byline-components;
+
+@layer byline-components {
+  /* relative inline-flex h-10 w-10 rounded-full */
+  .avatar-root,
+  :global(.infonomic-avatar-root) {
+    position: relative;
+    display: inline-flex;
+    height: 100%;
+    width: 100%;
+    border-radius: 50%;
+  }
+
+  .avatar-image,
+  :global(.infonomic-avatar-image) {
+    height: 100%;
+    width: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+
+  .avatar-fallback,
+  :global(.infonomic-avatar-fallback) {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: var(--surface-panel-elevated);
+  }
+
+  .avatar-text,
+  :global(.infonomic-avatar-text) {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    text-transform: uppercase;
+    color: var(--text-subtle);
+  }
+}

package/src/components/avatar/avatar.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import type React from 'react'
+
+import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar'
+import cx from 'classnames'
+
+import styles from './avatar.module.css'
+
+const url = 'https://picsum.photos/150'
+
+export const Avatar = ({ initials }: { initials: string }): React.JSX.Element => {
+  return (
+    <AvatarPrimitive.Root className={cx('infonomic-avatar-root', styles['avatar-root'])}>
+      <AvatarPrimitive.Image
+        src={url}
+        alt="Avatar"
+        className={cx('infonomic-avatar-image', styles['avatar-image'])}
+      />
+      <AvatarPrimitive.Fallback
+        className={cx('infonomic-avatar-fallback', styles['avatar-fallback'])}
+        delay={600}
+      >
+        <span className={cx('infonomic-avatar-text', styles['avatar-text'])}>{initials}</span>
+      </AvatarPrimitive.Fallback>
+    </AvatarPrimitive.Root>
+  )
+}

package/src/components/badge/badge.module.css

@@ -0,0 +1,66 @@
+@layer byline-base,
+  byline-functional,
+  byline-utilities,
+  byline-theme,
+  byline-typography,
+  byline-components;
+
+@layer byline-components {
+  .badge,
+  :global(.infonomic-badge) {
+    display: inline-block;
+    padding: 0.25em 0.4em;
+    font-size: var(--font-size-sm);
+    font-weight: 400;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: var(--border-radius-sm);
+  }
+
+  .primary,
+  :global(.infonomic-badge-primary) {
+    color: var(--text-on-primary-strong);
+    background-color: var(--fill-primary-strong);
+  }
+
+  .secondary,
+  :global(.infonomic-badge-secondary) {
+    color: var(--text-on-secondary-strong);
+    background-color: var(--fill-secondary-strong);
+  }
+
+  .noeffect,
+  :global(.infonomic-badge-noeffect) {
+    color: var(--text-on-noeffect-strong);
+    background-color: var(--fill-noeffect-strong);
+  }
+
+  .success,
+  :global(.infonomic-badge-success) {
+    color: var(--text-on-success-strong);
+    background-color: var(--fill-success-strong);
+  }
+
+  .info,
+  :global(.infonomic-badge-info) {
+    color: var(--text-on-info-strong);
+    background-color: var(--fill-info-strong);
+  }
+
+  .warning,
+  :global(.infonomic-badge-warning) {
+    color: var(--text-on-warning-strong);
+    background-color: var(--fill-warning-strong);
+  }
+
+  .danger,
+  :global(.infonomic-badge-danger) {
+    color: var(--text-on-danger-strong);
+    background-color: var(--fill-danger-strong);
+  }
+
+  /* Dark mode - All intents now handled by semantic tokens in theme layer */
+  /* No overrides needed! Tokens automatically switch in .dark and respect .not-dark */
+}