@remix-run/ui 0.2.0 → 0.4.0

package/src/shared/style-values.ts

@@ -0,0 +1,165 @@
+type ComponentActionColors = {
+  readonly background: string
+  readonly backgroundHover: string
+  readonly backgroundActive: string
+  readonly foreground: string
+  readonly border: string
+}
+
+type ComponentStyleValues = {
+  readonly space: {
+    readonly none: string
+    readonly xs: string
+    readonly sm: string
+    readonly md: string
+    readonly lg: string
+  }
+  readonly radius: {
+    readonly md: string
+    readonly lg: string
+    readonly xl: string
+    readonly full: string
+  }
+  readonly fontFamily: {
+    readonly sans: string
+  }
+  readonly fontSize: {
+    readonly xs: string
+    readonly sm: string
+    readonly md: string
+  }
+  readonly lineHeight: {
+    readonly normal: string
+    readonly relaxed: string
+  }
+  readonly fontWeight: {
+    readonly normal: string
+    readonly medium: string
+  }
+  readonly control: {
+    readonly height: {
+      readonly sm: string
+      readonly md: string
+      readonly lg: string
+    }
+  }
+  readonly surface: {
+    readonly lvl0: string
+    readonly lvl1: string
+    readonly lvl2: string
+    readonly lvl3: string
+    readonly lvl4: string
+  }
+  readonly shadow: {
+    readonly xs: string
+    readonly sm: string
+    readonly md: string
+  }
+  readonly colors: {
+    readonly text: {
+      readonly primary: string
+      readonly secondary: string
+      readonly muted: string
+    }
+    readonly border: {
+      readonly subtle: string
+      readonly default: string
+    }
+    readonly focus: {
+      readonly ring: string
+    }
+    readonly action: {
+      readonly primary: ComponentActionColors
+      readonly secondary: ComponentActionColors
+      readonly danger: ComponentActionColors
+    }
+  }
+}
+
+export const componentStyleValues: ComponentStyleValues = {
+  space: {
+    none: '0px',
+    xs: '4px',
+    sm: '8px',
+    md: '12px',
+    lg: '16px',
+  },
+  radius: {
+    md: '8px',
+    lg: '12px',
+    xl: '16px',
+    full: '9999px',
+  },
+  fontSize: {
+    xs: '12px',
+    sm: '13px',
+    md: '14px',
+  },
+  fontFamily: {
+    sans: '"Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+  },
+  lineHeight: {
+    normal: '1.45',
+    relaxed: '1.65',
+  },
+  fontWeight: {
+    normal: '400',
+    medium: '500',
+  },
+  control: {
+    height: {
+      sm: '28px',
+      md: '32px',
+      lg: '36px',
+    },
+  },
+  surface: {
+    lvl0: '#ffffff',
+    lvl1: '#f8f8f8',
+    lvl2: '#f5f5f5',
+    lvl3: '#f3f3f3',
+    lvl4: '#efefef',
+  },
+  shadow: {
+    xs: '0 1px 1px rgb(0 0 0 / 0.05)',
+    sm: '0 1px 2px rgb(0 0 0 / 0.07)',
+    md: '0 6px 18px rgb(0 0 0 / 0.08)',
+  },
+  colors: {
+    text: {
+      primary: '#151515',
+      secondary: '#4f4f4f',
+      muted: '#6d6d6d',
+    },
+    border: {
+      subtle: '#e7e7e7',
+      default: '#d1d1d1',
+    },
+    focus: {
+      ring: '#1A72FF',
+    },
+    action: {
+      primary: {
+        background: '#1A72FF',
+        backgroundHover: '#1463e0',
+        backgroundActive: '#0f55c9',
+        foreground: 'rgb(255 255 255 / 0.92)',
+        border: '#1A72FF',
+      },
+      secondary: {
+        background: '#ffffff',
+        backgroundHover: '#fbfbfb',
+        backgroundActive: '#f3f3f3',
+        foreground: '#202020',
+        border: '#d1d1d1',
+      },
+      danger: {
+        background: '#FF3000',
+        backgroundHover: '#e12b00',
+        backgroundActive: '#c52600',
+        foreground: 'rgb(255 255 255 / 0.92)',
+        border: '#FF3000',
+      },
+    },
+  },
+}

package/src/style/style.ts

@@ -141,22 +141,15 @@ function styleToCss(styles: StyleObject, selector: string = ''): string {
         continue
       }
 
-      // For nested selectors, keep them wholesale inside the base block
       // Allow nested selectors to be conditionally disabled.
       // e.g. { '&:hover': condition ? undefined : { ... } }
       let record = toRecord(value)
       if (!record) continue
 
-      let nestedContent = ''
-      for (let [prop, propValue] of Object.entries(record)) {
-        if (propValue != null) {
-          let normalizedValue = normalizeCssValue(prop, propValue)
-          nestedContent += `    ${camelToKebab(prop)}: ${normalizedValue};\n`
-        }
-      }
-      if (nestedContent) {
+      let nestedContent = nestedStyleBodyToCss(record, 4)
+      if (nestedContent.trim().length > 0) {
         // Preserve key verbatim (e.g., '&[aria-selected], &[rmx-focus]')
-        nestedBlocks.push(`  ${key} {\n${nestedContent}  }`)
+        nestedBlocks.push(`  ${key} {\n${nestedContent}\n  }`)
       }
     } else {
       // Base declaration
@@ -189,6 +182,32 @@ function styleToCss(styles: StyleObject, selector: string = ''): string {
   return css
 }
 
+function nestedStyleBodyToCss(styles: StyleObject, spaces: number): string {
+  // This renders content that is already inside a style rule. Nested selectors
+  // and nested at-rules can stay in that rule body; root at-rule placement is
+  // handled by styleToCss before entering a nested style body.
+  let pad = ' '.repeat(spaces)
+  let declarations: string[] = []
+  let nestedBlocks: string[] = []
+
+  for (let [key, value] of Object.entries(styles)) {
+    if (isComplexSelector(key)) {
+      let record = toRecord(value)
+      if (!record) continue
+
+      let nestedContent = nestedStyleBodyToCss(record, spaces + 2)
+      if (nestedContent.trim().length > 0) {
+        nestedBlocks.push(`${pad}${key} {\n${nestedContent}\n${pad}}`)
+      }
+    } else if (value != null) {
+      let normalizedValue = normalizeCssValue(key, value)
+      declarations.push(`${pad}${camelToKebab(key)}: ${normalizedValue};`)
+    }
+  }
+
+  return [...declarations, ...nestedBlocks].join('\n')
+}
+
 function indent(text: string, spaces: number): string {
   let pad = ' '.repeat(spaces)
   return text

package/src/tabs/README.md

@@ -0,0 +1,141 @@
+# tabs
+
+`Tabs` renders a tab control with one active tab and matching panels. Use it when related views share the same page space and the owning component may either control the active tab or let the tabs context manage it.
+
+## Component Usage
+
+```tsx
+import { Tabs, TabList, Tab, TabPanel } from 'remix/ui/tabs'
+
+export function ProjectTabs() {
+  return (
+    <Tabs defaultActiveTab="overview">
+      <TabList aria-label="Project sections">
+        <Tab name="overview">Overview</Tab>
+        <Tab name="activity">Activity</Tab>
+        <Tab name="settings">Settings</Tab>
+      </TabList>
+
+      <TabPanel name="overview">Project summary.</TabPanel>
+      <TabPanel name="activity">Recent changes.</TabPanel>
+      <TabPanel name="settings">Project settings.</TabPanel>
+    </Tabs>
+  )
+}
+```
+
+Control the active tab when state should live in the owning component:
+
+```tsx
+import type { Handle } from 'remix/ui'
+import { Tabs, TabList, Tab, TabPanel } from 'remix/ui/tabs'
+
+export function ControlledTabs(handle: Handle) {
+  let activeTab = 'overview'
+
+  return () => (
+    <Tabs
+      activeTab={activeTab}
+      onActiveTabChange={(nextActiveTab) => {
+        activeTab = nextActiveTab
+        void handle.update()
+      }}
+    >
+      <TabList aria-label="Project sections">
+        <Tab name="overview">Overview</Tab>
+        <Tab name="activity">Activity</Tab>
+      </TabList>
+
+      <TabPanel name="overview">Project summary.</TabPanel>
+      <TabPanel name="activity">Recent changes.</TabPanel>
+    </Tabs>
+  )
+}
+```
+
+Listen for bubbling `TabsChangeEvent` events with `onTabsChange` from `remix/ui/tabs/primitives`.
+
+```tsx
+import { onTabsChange } from 'remix/ui/tabs/primitives'
+import { Tabs, TabList, Tab, TabPanel } from 'remix/ui/tabs'
+
+export function TrackedTabs() {
+  return (
+    <div
+      mix={[
+        onTabsChange((event) => {
+          console.log(event.previousActiveTab, event.activeTab)
+        }),
+      ]}
+    >
+      <Tabs defaultActiveTab="overview">
+        <TabList aria-label="Project sections">
+          <Tab name="overview">Overview</Tab>
+          <Tab name="activity">Activity</Tab>
+        </TabList>
+        <TabPanel name="overview">Project summary.</TabPanel>
+        <TabPanel name="activity">Recent changes.</TabPanel>
+      </Tabs>
+    </div>
+  )
+}
+```
+
+## Primitive Usage
+
+Use the lower-level primitives when app code owns the markup and styles:
+
+```tsx
+import * as tabs from 'remix/ui/tabs/primitives'
+import { listStyle, panelStyle, rootStyle, tabStyle } from './tabs.styles'
+
+export function PrimitiveTabs() {
+  return (
+    <tabs.Context defaultActiveTab="overview">
+      <div mix={[rootStyle, tabs.root()]}>
+        <div mix={[listStyle, tabs.list()]} aria-label="Project sections">
+          <button mix={[tabStyle, tabs.tab({ name: 'overview' })]} type="button">
+            Overview
+          </button>
+          <button mix={[tabStyle, tabs.tab({ name: 'activity' })]} type="button">
+            Activity
+          </button>
+        </div>
+
+        <div mix={[panelStyle, tabs.panel({ name: 'overview' })]}>Project summary.</div>
+        <div mix={[panelStyle, tabs.panel({ name: 'activity' })]}>Recent changes.</div>
+      </div>
+    </tabs.Context>
+  )
+}
+```
+
+## `remix/ui/tabs`
+
+- `Tabs`: root component. Supports controlled `activeTab`, uncontrolled `defaultActiveTab`, `onActiveTabChange`, `disabled`, and `size: 'md' | 'lg'`.
+- `TabList`: tablist wrapper that lays out the tabs in a track and applies the tablist primitive.
+- `Tab`: button for one tab `name`. The active tab uses the toggle slider treatment and button-sized text. Pass `disabled` to prevent activation.
+- `TabPanel`: panel for one tab `name`.
+- `rootStyle`, `listStyle`, `tabStyle`, and `panelStyle`: flat style mixins used by the component markup.
+- `onTabsChange` and `TabsChangeEvent`: re-exported primitive event helpers.
+- `TabsProps`, `TabListProps`, `TabProps`, `TabPanelProps`, and `TabsSize`: public TypeScript types for the composed APIs.
+
+## `remix/ui/tabs/primitives`
+
+- `Context`: lower-level provider for custom tabs composition.
+- `root()`: wires the root element and bubbling change events.
+- `list()`: wires the tablist role and disabled state.
+- `tab({ name, disabled })`: wires a tab button with selected state, ids, keyboard activation, and pointer activation.
+- `panel({ name })`: wires the matching tab panel id, hidden state, inert state, and label relationship.
+- `onTabsChange(...)`: event mixin for the bubbling `TabsChangeEvent`.
+- `TabsChangeEvent`: bubbling event with `activeTab` and `previousActiveTab`.
+- `TabsContextProps`, `TabsContextValue`, `TabsRegisteredTab`, `TabsActivationDirection`, `TabsRootOptions`, `TabListOptions`, `TabOptions`, and `TabPanelOptions`: primitive prop and option types for custom composition.
+
+## Behavior Notes
+
+- If neither `activeTab` nor `defaultActiveTab` is provided, the first enabled tab becomes active.
+- Arrow keys activate the next or previous enabled tab. `Home` and `End` activate the first and last enabled tabs.
+- `Enter`, `Space`, and pointer clicks activate the focused tab.
+- Root `disabled` disables every tab. Tab `disabled` only disables that tab.
+- Tabs and panels are linked with generated ids through `aria-controls`, `aria-labelledby`, and `aria-selected`.
+- Inactive panels receive `hidden`, `inert`, and `data-state="inactive"`.

package/src/tabs/index.tsx

@@ -0,0 +1,244 @@
+import {
+  css,
+  type CSSMixinDescriptor,
+  type Handle,
+  type Props,
+  type RemixNode,
+} from '@remix-run/ui'
+import * as tabs from '@remix-run/ui/tabs/primitives'
+
+export { TabsChangeEvent, onTabsChange } from '@remix-run/ui/tabs/primitives'
+
+export type TabsSize = 'md' | 'lg'
+
+export interface TabsProps extends Omit<Props<'div'>, 'children'> {
+  activeTab?: string
+  children?: RemixNode
+  defaultActiveTab?: string
+  disabled?: boolean
+  onActiveTabChange?: (activeTab: string) => void
+  size?: TabsSize
+}
+
+export interface TabListProps extends Omit<Props<'div'>, 'children'> {
+  children?: RemixNode
+}
+
+export interface TabProps extends Omit<Props<'button'>, 'children' | 'type'> {
+  children?: RemixNode
+  disabled?: boolean
+  name: string
+  type?: 'button' | 'submit' | 'reset'
+}
+
+export interface TabPanelProps extends Omit<Props<'div'>, 'children'> {
+  children?: RemixNode
+  name: string
+}
+
+const tabSliderBackground =
+  'linear-gradient(180deg, rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.04) 100%), #FFFFFF'
+const tabSliderShadow =
+  '0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.12), 0 2px 2px -1px rgba(0, 0, 0, 0.12), 0 4px 4px -2px rgba(0, 0, 0, 0.12), inset 0 0 2px 1px #FFFFFF'
+
+const tabsRootCss: CSSMixinDescriptor = css({
+  '--rmx-tabs-height': '32px',
+  '--rmx-tabs-track-padding': '2px',
+  '--rmx-tabs-tab-padding-inline': '12px',
+  '--rmx-tabs-tab-shadow': '0 0 0 0 rgba(0, 0, 0, 0)',
+  '--rmx-tabs-tab-font-size': '12px',
+  '--rmx-tabs-tab-line-height': '17px',
+  '--rmx-tabs-gap': '12px',
+  boxSizing: 'border-box',
+  display: 'grid',
+  gap: 'var(--rmx-tabs-gap)',
+  minWidth: 0,
+})
+
+const tabsListCss: CSSMixinDescriptor = css({
+  boxSizing: 'border-box',
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: '2px',
+  width: 'max-content',
+  maxWidth: '100%',
+  minHeight: 'var(--rmx-tabs-height)',
+  padding: 'var(--rmx-tabs-track-padding)',
+  border: 0,
+  borderRadius: '9999px',
+  background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0) 100%), #EBEBEB',
+  boxShadow:
+    'inset 0 0 4px 1px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(0, 0, 0, 0.02), inset 0 2px 2px rgba(0, 0, 0, 0.02)',
+  overflowX: 'auto',
+  scrollbarWidth: 'none',
+  '&::-webkit-scrollbar': {
+    display: 'none',
+  },
+  '&[aria-disabled="true"]': {
+    opacity: 0.55,
+  },
+})
+
+const tabsTabCss: CSSMixinDescriptor = css({
+  '--rmx-tabs-tab-focus-shadow':
+    '0 0 0 1px #3573F6, var(--rmx-tabs-tab-shadow), 0 0 0 4px rgba(53, 115, 246, 0.1), 0 6px 32px 4px rgba(53, 115, 246, 0.08), inset 0 0 8px 1px rgba(53, 115, 246, 0.05)',
+  appearance: 'none',
+  margin: 0,
+  boxSizing: 'border-box',
+  position: 'relative',
+  cursor: 'pointer',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexDirection: 'row',
+  gap: '4px',
+  width: 'max-content',
+  maxWidth: '100%',
+  minWidth: 0,
+  height: 'calc(var(--rmx-tabs-height) - (var(--rmx-tabs-track-padding) * 2))',
+  minHeight: 'calc(var(--rmx-tabs-height) - (var(--rmx-tabs-track-padding) * 2))',
+  paddingBlock: 0,
+  paddingInline: 'var(--rmx-tabs-tab-padding-inline)',
+  border: 0,
+  borderRadius: '999px',
+  background: 'transparent',
+  boxShadow: 'var(--rmx-tabs-tab-shadow)',
+  color: '#707070',
+  fontFamily: '"Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif',
+  fontStyle: 'normal',
+  fontWeight: 500,
+  fontSize: 'var(--rmx-tabs-tab-font-size)',
+  lineHeight: 'var(--rmx-tabs-tab-line-height)',
+  fontFeatureSettings: '"ss01" on, "cv01" on',
+  letterSpacing: 0,
+  textAlign: 'center',
+  textDecoration: 'none',
+  textShadow: 'none',
+  userSelect: 'none',
+  WebkitUserSelect: 'none',
+  verticalAlign: 'top',
+  whiteSpace: 'nowrap',
+  '&[data-state="inactive"]:hover:not(:disabled):not([aria-disabled="true"])': {
+    background: 'rgba(16, 16, 16, 0.05)',
+    color: '#101010',
+  },
+  '&[data-state="inactive"]:active:not(:disabled):not([aria-disabled="true"])': {
+    background: 'rgba(16, 16, 16, 0.08)',
+  },
+  '&[data-state="active"]': {
+    background: tabSliderBackground,
+    '--rmx-tabs-tab-shadow': tabSliderShadow,
+    color: '#101010',
+    textShadow: '0 1px 0 #FFFFFF',
+  },
+  '&[data-state="active"]:hover:not(:disabled):not([aria-disabled="true"])': {
+    background: tabSliderBackground,
+  },
+  '&[data-state="active"]:active:not(:disabled):not([aria-disabled="true"])': {
+    background: tabSliderBackground,
+  },
+  '&:disabled, &[aria-disabled="true"]': {
+    cursor: 'not-allowed',
+    opacity: 0.55,
+  },
+  '&:focus-visible': {
+    outline: 0,
+    boxShadow: 'var(--rmx-tabs-tab-focus-shadow)',
+  },
+})
+
+const tabsPanelCss: CSSMixinDescriptor = css({
+  minWidth: 0,
+  color: '#101010',
+  fontFamily: '"Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif',
+  fontSize: '13px',
+  lineHeight: '20px',
+  letterSpacing: 0,
+  '&[hidden]': {
+    display: 'none',
+  },
+})
+
+const sizeStyles = {
+  md: css({}),
+  lg: css({
+    '--rmx-tabs-height': '36px',
+    '--rmx-tabs-tab-padding-inline': '14px',
+    '--rmx-tabs-tab-font-size': '13px',
+    '--rmx-tabs-tab-line-height': '20px',
+    '--rmx-tabs-gap': '14px',
+  }),
+} as const satisfies Record<TabsSize, CSSMixinDescriptor>
+
+export const rootStyle = tabsRootCss
+export const listStyle = tabsListCss
+export const tabStyle = tabsTabCss
+export const panelStyle = tabsPanelCss
+
+export function Tabs(handle: Handle<TabsProps>): () => RemixNode {
+  return () => {
+    let {
+      activeTab,
+      children,
+      defaultActiveTab,
+      disabled,
+      mix,
+      onActiveTabChange,
+      size = 'md',
+      ...divProps
+    } = handle.props
+
+    return (
+      <tabs.Context
+        activeTab={activeTab}
+        defaultActiveTab={defaultActiveTab}
+        disabled={disabled}
+        onActiveTabChange={onActiveTabChange}
+      >
+        <div {...divProps} mix={[rootStyle, sizeStyles[size], tabs.root(), mix]}>
+          {children}
+        </div>
+      </tabs.Context>
+    )
+  }
+}
+
+export function TabList(handle: Handle<TabListProps>): () => RemixNode {
+  return () => {
+    let { children, mix, ...divProps } = handle.props
+
+    return (
+      <div {...divProps} mix={[listStyle, tabs.list(), mix]}>
+        {children}
+      </div>
+    )
+  }
+}
+
+export function Tab(handle: Handle<TabProps>): () => RemixNode {
+  return () => {
+    let { children, disabled, mix, name, type, ...buttonProps } = handle.props
+
+    return (
+      <button
+        {...buttonProps}
+        mix={[tabStyle, tabs.tab({ disabled, name }), mix]}
+        type={type ?? 'button'}
+      >
+        {children}
+      </button>
+    )
+  }
+}
+
+export function TabPanel(handle: Handle<TabPanelProps>): () => RemixNode {
+  return () => {
+    let { children, mix, name, ...divProps } = handle.props
+
+    return (
+      <div {...divProps} mix={[panelStyle, tabs.panel({ name }), mix]}>
+        {children}
+      </div>
+    )
+  }
+}