@remix-run/ui 0.3.0 → 0.4.0

package/src/components/accordion/demos/multiple.demo.tsx

@@ -1,57 +0,0 @@
-import { css } from '@remix-run/ui'
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '@remix-run/ui/accordion'
-import { theme } from '@remix-run/ui/theme'
-
-/**
- * @order 2
- * @name Accordion Multiple Open
- * @description Multiple mode allows several sections to stay open simultaneously, useful for operational checklists and dashboards.
- * @layout center
- */
-export default function Example() {
-  return () => (
-    <Accordion defaultValue={['api', 'alerts']} type="multiple">
-      <AccordionItem value="api">
-        <AccordionTrigger>API status checks</AccordionTrigger>
-        <AccordionContent>
-          <p mix={bodyTextCss}>
-            Multiple mode works well for operational checklists and dashboards where several
-            sections often need to stay open together.
-          </p>
-        </AccordionContent>
-      </AccordionItem>
-
-      <AccordionItem disabled value="access">
-        <AccordionTrigger>Access control sync</AccordionTrigger>
-        <AccordionContent>
-          <p mix={bodyTextCss}>
-            This section is intentionally disabled to show how one unavailable item should read
-            inside an otherwise active list.
-          </p>
-        </AccordionContent>
-      </AccordionItem>
-
-      <AccordionItem value="alerts">
-        <AccordionTrigger>Alert routing</AccordionTrigger>
-        <AccordionContent>
-          <p mix={bodyTextCss}>
-            Disabled items should feel clearly unavailable without changing the overall visual model
-            of the disclosure list.
-          </p>
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  )
-}
-
-const bodyTextCss = css({
-  margin: 0,
-  fontSize: theme.fontSize.sm,
-  lineHeight: theme.lineHeight.relaxed,
-  color: theme.colors.text.secondary,
-})

package/src/components/accordion/demos/overview.demo.tsx

@@ -1,57 +0,0 @@
-import { css } from '@remix-run/ui'
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '@remix-run/ui/accordion'
-import { theme } from '@remix-run/ui/theme'
-
-/**
- * @name Accordion Overview
- * @description A single-open disclosure list that keeps settings, billing, or notification rules in one calm section.
- * @layout center
- * @order 1
- */
-export default function Example() {
-  return () => (
-    <Accordion defaultValue="account">
-      <AccordionItem value="account">
-        <AccordionTrigger>Account defaults</AccordionTrigger>
-        <AccordionContent>
-          <p mix={bodyTextCss}>
-            Keep billing contacts, email summaries, and workspace naming rules in one calm
-            disclosure list without adding another card layer.
-          </p>
-        </AccordionContent>
-      </AccordionItem>
-
-      <AccordionItem value="billing">
-        <AccordionTrigger>Billing schedule</AccordionTrigger>
-        <AccordionContent>
-          <p mix={bodyTextCss}>
-            Review invoice timing, payment methods, and renewal reminders with the same spacing and
-            typography used elsewhere in the system.
-          </p>
-        </AccordionContent>
-      </AccordionItem>
-
-      <AccordionItem value="notifications">
-        <AccordionTrigger>Notification rules</AccordionTrigger>
-        <AccordionContent>
-          <p mix={bodyTextCss}>
-            Use single mode when only one details panel should stay open at a time in a compact
-            settings or details view.
-          </p>
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  )
-}
-
-const bodyTextCss = css({
-  margin: 0,
-  fontSize: theme.fontSize.sm,
-  lineHeight: theme.lineHeight.relaxed,
-  color: theme.colors.text.secondary,
-})

package/src/components/breadcrumbs/basic.demo.tsx

@@ -1,18 +0,0 @@
-import { Breadcrumbs } from '@remix-run/ui/breadcrumbs'
-
-/**
- * @name Breadcrumbs Basic
- * @description A basic breadcrumb trail linking back through the page hierarchy.
- * @layout center
- */
-export default function Example() {
-  return () => (
-    <Breadcrumbs
-      items={[
-        { href: '/', label: 'Home' },
-        { href: '/components', label: 'Components' },
-        { label: 'Breadcrumbs' },
-      ]}
-    />
-  )
-}

package/src/components/breadcrumbs/separator.demo.tsx

@@ -1,19 +0,0 @@
-import { Breadcrumbs } from '@remix-run/ui/breadcrumbs'
-
-/**
- * @name Breadcrumbs with Separator
- * @description Pass a custom separator string to override the default chevron icon.
- * @layout center
- */
-export default function Example() {
-  return () => (
-    <Breadcrumbs
-      items={[
-        { href: '/', label: 'Workspace' },
-        { href: '/projects', label: 'Projects' },
-        { label: 'RMX_01' },
-      ]}
-      separator="/"
-    />
-  )
-}

package/src/components/button/README.md

@@ -1,44 +0,0 @@
-# button
-
-`button` is the shared button styling contract for `remix/ui`. Use `Button` for ordinary action buttons, or compose flat `button.*Style` exports directly when a higher-level control needs button structure without a wrapper.
-
-## Usage
-
-```tsx
-import { Button } from 'remix/ui/button'
-import * as button from 'remix/ui/button'
-import { Glyph } from 'remix/ui/glyph'
-
-function Actions() {
-  return (
-    <div>
-      <Button startIcon={<Glyph name="add" />} tone="primary">
-        Create project
-      </Button>
-
-      <a href="/projects" mix={[button.baseStyle, button.secondaryStyle]}>
-        <span mix={button.labelStyle}>View projects</span>
-        <Glyph mix={button.iconStyle} name="chevronRight" />
-      </a>
-    </div>
-  )
-}
-```
-
-## `button.*`
-
-- `Button`: thin button wrapper for the common `base + tone + label/icon slots` case. Pass `tone`, `startIcon`, and `endIcon` when the default authored structure is enough.
-- `button.baseStyle`: base host styling plus the default `type="button"` behavior for button elements.
-- `button.primaryStyle`, `button.secondaryStyle`, `button.ghostStyle`, and `button.dangerStyle`: visual button treatments.
-- `button.labelStyle`: inline label slot with the standard button spacing.
-- `button.iconStyle`: icon slot sizing and `aria-hidden` defaults for decorative icons.
-
-## Behavior Notes
-
-- `button.baseStyle` only adds `type="button"` when the host element is a `<button>` and no explicit `type` was provided.
-- `Button` renders `children` inside `button.labelStyle` and renders `startIcon` and `endIcon` inside `button.iconStyle`.
-- Use an explicit accessible name when you render an icon-only button.
-
-## When To Use Something Else
-
-Use `button.*Style` exports directly when a control needs button structure plus extra behavior or layout, like `select`, `menu`, or `tabs`. Those controls own their own interaction mixins and should not hide that behavior behind `Button`.

package/src/components/button/button.tsx

@@ -1,286 +0,0 @@
-import { attrs, createElement, createMixin, css } from '@remix-run/ui'
-import type {
-  CSSMixinDescriptor,
-  ElementProps,
-  Handle,
-  MixinDescriptor,
-  MixinFactory,
-  Props,
-  RemixNode,
-} from '@remix-run/ui'
-
-import { theme } from '../../theme/theme.ts'
-
-const ghostButtonToneCss: CSSMixinDescriptor = css({
-  backgroundColor: 'transparent',
-  backgroundImage: 'none',
-  color: theme.colors.text.secondary,
-  border: '0.5px solid transparent',
-  boxShadow: 'none',
-  '&:hover': {
-    backgroundColor: theme.surface.lvl3,
-    color: theme.colors.text.primary,
-  },
-  '&:active': {
-    backgroundColor: `color-mix(in oklab, ${theme.surface.lvl3} 94%, black)`,
-    color: `color-mix(in oklab, ${theme.colors.text.primary} 94%, black)`,
-  },
-  '&:focus-visible': {
-    outline: `2px solid ${theme.colors.focus.ring}`,
-    outlineOffset: '2px',
-    backgroundColor: theme.surface.lvl3,
-    color: theme.colors.text.primary,
-  },
-  '&:disabled': {
-    opacity: 0.6,
-  },
-})
-
-const buttonBaseStyleCss: CSSMixinDescriptor = css({
-  '--rmx-button-label-padding-inline': theme.space.xs,
-  all: 'unset',
-  boxSizing: 'border-box',
-  cursor: 'revert',
-  position: 'relative',
-  isolation: 'isolate',
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  overflow: 'hidden',
-  borderRadius: theme.radius.full,
-  fontFamily: theme.fontFamily.sans,
-  minHeight: theme.control.height.sm,
-  paddingInline: theme.space.md,
-  fontSize: theme.fontSize.xs,
-  lineHeight: '1',
-  fontWeight: theme.fontWeight.medium,
-  whiteSpace: 'nowrap',
-  textDecoration: 'none',
-  userSelect: 'none',
-  WebkitUserSelect: 'none',
-  verticalAlign: 'top',
-})
-
-const buttonLabelCss: CSSMixinDescriptor = css({
-  display: 'inline-flex',
-  alignItems: 'center',
-  minWidth: 0,
-  paddingInline: 'var(--rmx-button-label-padding-inline)',
-})
-
-const buttonIconCss: CSSMixinDescriptor = css({
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  width: '1em',
-  height: '1em',
-  flexShrink: 0,
-  '& > svg': {
-    display: 'block',
-    width: '100%',
-    height: '100%',
-  },
-})
-
-const buttonIconAttrsCss: MixinDescriptor<Element, [Partial<ElementProps>], ElementProps> = attrs({
-  'aria-hidden': true,
-})
-
-const buttonDefaultsMixin: MixinFactory<Element, [], ElementProps> = createMixin<
-  Element,
-  [],
-  ElementProps
->((handle, hostType) => (props) => {
-  if (hostType !== 'button' || props.type !== undefined) {
-    return handle.element
-  }
-
-  return createElement(handle.element as unknown as string, {
-    ...props,
-    type: 'button',
-  })
-})
-
-const buttonDefaultsCss: MixinDescriptor<Element, [], ElementProps> = buttonDefaultsMixin()
-
-/**
- * Base button styling with the default `type="button"` behavior for `<button>`
- * hosts. Compose with a tone style (e.g. {@link primaryStyle}) when applying
- * button styling without using the {@link Button} component.
- *
- * @category mixin
- */
-export const baseStyle = [buttonDefaultsCss, buttonBaseStyleCss] as const
-
-/**
- * Icon slot sizing and `aria-hidden` defaults for decorative icons rendered
- * inside a button.
- *
- * @category mixin
- */
-export const iconStyle = [buttonIconAttrsCss, buttonIconCss] as const
-
-/**
- * Inline label slot with the standard button label spacing.
- *
- * @category mixin
- */
-export const labelStyle = buttonLabelCss
-
-/**
- * Primary visual treatment for buttons. Combine with {@link baseStyle} when
- * styling a non-`Button` host element.
- *
- * @category mixin
- */
-export const primaryStyle: CSSMixinDescriptor = createButtonCss(theme.colors.action.primary)
-
-/**
- * Secondary visual treatment for buttons. Combine with {@link baseStyle} when
- * styling a non-`Button` host element.
- *
- * @category mixin
- */
-export const secondaryStyle: CSSMixinDescriptor = createButtonCss(theme.colors.action.secondary)
-
-/**
- * Ghost visual treatment for buttons — transparent background with a hover
- * surface. Combine with {@link baseStyle} when styling a non-`Button` host
- * element.
- *
- * @category mixin
- */
-export const ghostStyle = ghostButtonToneCss
-
-/**
- * Danger visual treatment for destructive actions. Combine with
- * {@link baseStyle} when styling a non-`Button` host element.
- *
- * @category mixin
- */
-export const dangerStyle: CSSMixinDescriptor = createButtonCss(theme.colors.action.danger)
-
-const toneStyleByTone = {
-  primary: primaryStyle,
-  secondary: secondaryStyle,
-  ghost: ghostStyle,
-  danger: dangerStyle,
-} as const
-
-/**
- * Visual treatment supported by {@link Button} — `'primary'`, `'secondary'`,
- * `'ghost'`, or `'danger'`.
- */
-export type ButtonTone = keyof typeof toneStyleByTone
-
-/**
- * Props accepted by the {@link Button} component.
- *
- * Extends the native `<button>` element props with optional icon slots and a
- * tone variant
- */
-export type ButtonProps = Omit<Props<'button'>, 'children'> & {
-  /**
-   * Content rendered inside the button's label slot.
-   */
-  readonly children?: RemixNode
-  /**
-   * Decorative icon rendered after the label, inside the icon slot.
-   */
-  readonly endIcon?: RemixNode
-  /**
-   * Decorative icon rendered before the label, inside the icon slot.
-   */
-  readonly startIcon?: RemixNode
-  /**
-   * Visual treatment to apply to the button (default `'secondary'`).
-   */
-  readonly tone?: ButtonTone
-}
-
-/**
- * Renders a `<button>` with `baseStyle` and the resolved tone style, along with
- * optional start and end icons.
- *
- * @param handle Component handle providing the runtime API and the resolved {@link ButtonProps}.
- * @returns A render function for the button element.
- *
- * @example
- * ```tsx
- * import { Button } from '@remix-run/ui/button'
- * import { Glyph } from '@remix-run/ui/glyph'
- *
- * <Button startIcon={<Glyph name="add" />} tone="primary">
- *   Create project
- * </Button>
- * ```
- */
-export function Button(handle: Handle<ButtonProps>): () => RemixNode {
-  return () => {
-    let { children, endIcon, mix, startIcon, tone = 'secondary', ...buttonProps } = handle.props
-
-    return (
-      <button {...buttonProps} mix={[baseStyle, toneStyleByTone[tone], mix]}>
-        {startIcon ? <span mix={iconStyle}>{startIcon}</span> : null}
-        {children !== undefined ? <span mix={labelStyle}>{children}</span> : null}
-        {endIcon ? <span mix={iconStyle}>{endIcon}</span> : null}
-      </button>
-    )
-  }
-}
-
-function createButtonCss(buttonTheme: {
-  background: string
-  backgroundHover: string
-  backgroundActive: string
-  foreground: string
-  border: string
-}): CSSMixinDescriptor {
-  let borderColor = createButtonBorderColor(buttonTheme.border)
-  let hoverBorderColor = createButtonBorderColor(buttonTheme.backgroundHover)
-  let activeBorderColor = createButtonBorderColor(buttonTheme.backgroundActive)
-
-  return css({
-    backgroundColor: buttonTheme.background,
-    backgroundImage: createButtonBackgroundImage(buttonTheme.background),
-    color: buttonTheme.foreground,
-    border: `0.5px solid ${borderColor}`,
-    boxShadow: `${createButtonHighlight(buttonTheme.background)}, ${theme.shadow.xs}, ${theme.shadow.sm}`,
-    '&:hover': {
-      backgroundColor: buttonTheme.backgroundHover,
-      backgroundImage: createButtonBackgroundImage(buttonTheme.backgroundHover),
-      borderColor: hoverBorderColor,
-    },
-    '&:active': {
-      backgroundColor: buttonTheme.backgroundActive,
-      backgroundImage: createButtonBackgroundImage(buttonTheme.backgroundActive),
-      borderColor: activeBorderColor,
-      boxShadow: `${createButtonHighlight(buttonTheme.backgroundActive, 0.12)}, ${theme.shadow.xs}`,
-    },
-    '&:focus-visible': {
-      outline: `2px solid ${theme.colors.focus.ring}`,
-      outlineOffset: '2px',
-    },
-    '&:disabled': {
-      opacity: 0.6,
-      cursor: 'not-allowed',
-    },
-  })
-}
-
-function createButtonBackgroundImage(background: string) {
-  return `linear-gradient(to bottom, ${createButtonHighlightColor(background, 0.18)} 0%, ${background} 100%)`
-}
-
-function createButtonBorderColor(color: string) {
-  return `color-mix(in oklab, ${color} 74%, black)`
-}
-
-function createButtonHighlight(background: string, amount = 0.16) {
-  return `inset 0 1px 0 ${createButtonHighlightColor(background, amount)}`
-}
-
-function createButtonHighlightColor(background: string, amount: number) {
-  let alpha = Math.round(amount * 100)
-  return `color-mix(in oklab, white ${alpha}%, ${background})`
-}

package/src/components/button/demos/aliases.demo.tsx

@@ -1,28 +0,0 @@
-import { Button } from '@remix-run/ui/button'
-import { css } from '@remix-run/ui'
-import { theme } from '@remix-run/ui/theme'
-
-/**
- * @name Button Component
- * @description The Button component wraps the low-level style primitives and accepts a tone prop for quick theming.
- * @layout center
- * @order 2
- */
-export default function Example() {
-  return () => (
-    <div mix={buttonRowCss}>
-      <Button tone="primary" type="submit">
-        Save
-      </Button>
-      <Button tone="secondary">Secondary</Button>
-      <Button tone="ghost">Ghost</Button>
-      <Button tone="danger">Delete</Button>
-    </div>
-  )
-}
-
-const buttonRowCss = css({
-  display: 'flex',
-  alignItems: 'center',
-  gap: theme.space.sm,
-})

package/src/components/button/demos/basic.demo.tsx

@@ -1,31 +0,0 @@
-import { css } from '@remix-run/ui'
-import * as button from '@remix-run/ui/button'
-import { Glyph } from '@remix-run/ui/glyph'
-import { theme } from '@remix-run/ui/theme'
-
-/**
- * @name Basic Button
- * @description The default button contract supports both ordinary actions and link-shaped navigation.
- * @layout center
- * @order 1
- */
-export default function Example() {
-  return () => (
-    <div mix={buttonRowCss}>
-      <button type="submit" mix={[button.baseStyle, button.primaryStyle]}>
-        <Glyph mix={button.iconStyle} name="add" />
-        <span mix={button.labelStyle}>Publish</span>
-      </button>
-      <a href="/api/remix/ui/button/overview/" mix={[button.baseStyle, button.secondaryStyle]}>
-        <span mix={button.labelStyle}>View button docs</span>
-        <Glyph mix={button.iconStyle} name="chevronRight" />
-      </a>
-    </div>
-  )
-}
-
-const buttonRowCss = css({
-  display: 'flex',
-  alignItems: 'center',
-  gap: theme.space.sm,
-})

package/src/components/button/demos/states.demo.tsx

@@ -1,53 +0,0 @@
-import * as button from '@remix-run/ui/button'
-import { css } from '@remix-run/ui'
-import { Glyph } from '@remix-run/ui/glyph'
-import { theme } from '@remix-run/ui/theme'
-
-/**
- * @name Button States
- * @description Buttons support normal, disabled, and busy (loading) states using aria attributes.
- * @layout center
- * @order 3
- */
-export default function Example() {
-  return () => (
-    <div mix={buttonRowCss}>
-      <button mix={[button.baseStyle, button.primaryStyle]}>
-        <Glyph mix={button.iconStyle} name="add" />
-        <span mix={button.labelStyle}>New issue</span>
-      </button>
-
-      <button mix={[button.baseStyle, button.ghostStyle]}>
-        <span mix={button.labelStyle}>Open</span>
-        <Glyph mix={button.iconStyle} name="chevronRight" />
-      </button>
-
-      <button disabled mix={[button.baseStyle, button.secondaryStyle]}>
-        <span mix={button.labelStyle}>Disabled</span>
-      </button>
-
-      <button aria-busy="true" mix={[button.baseStyle, button.secondaryStyle]}>
-        <Glyph mix={[button.iconStyle, spinnerGlyphCss, spinCss]} name="spinner" />
-        <span mix={button.labelStyle}>Saving</span>
-      </button>
-    </div>
-  )
-}
-
-const buttonRowCss = css({
-  display: 'flex',
-  alignItems: 'center',
-  gap: theme.space.sm,
-})
-
-const spinnerGlyphCss = css({
-  opacity: 0.72,
-})
-
-const spinCss = css({
-  '@keyframes demo-button-spin': {
-    from: { transform: 'rotate(0deg)' },
-    to: { transform: 'rotate(360deg)' },
-  },
-  animation: 'demo-button-spin 1s linear infinite',
-})