@tempoxyz/ds 0.2.6 → 0.3.0

package/src/web/components/Tag.tsx

@@ -1,149 +0,0 @@
-import { useRender } from '@base-ui/react/use-render'
-import type { ComponentPropsWithRef } from 'react'
-import type * as zyzz from 'zyzz'
-import { style, variants } from '../zyzz.config.js'
-
-/**
- * A compact status or metadata label, rendered as a `span`. Pass `render`, such as
- * `<button type="button" />` or an `a` element, to make it interactive. Those tags keep the badge
- * look and add pointer, focus-visible and press feedback.
- *
- * - Keep the text to a word or two that names a status or attribute.
- * - Do not rely on `intent` color alone. The text or a leading icon must carry the meaning.
- * - Render a static tag for display. Reach for `render` only when the tag performs an action.
- *
- * @example
- * <Tag intent="positive">
- *   <Tag.Dot />
- *   Active
- * </Tag>
- *
- * @see {@link https://base-ui.com/react/utils/use-render | Base UI useRender}
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/span | MDN span element}
- * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html | WCAG 2.2 Use of Color}
- * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html | WCAG 2.2 Contrast (Minimum)}
- */
-export function Tag(props: Tag.Props) {
-  const { className, intent, ref, render, shape, size, variant, vars, ...attributes } = props
-
-  return useRender({
-    defaultTagName: 'span',
-    props: {
-      ...attributes,
-      ...styles.tag({ className, intent, shape, size, style: props.style, variant, vars }),
-    },
-    ref,
-    render,
-  })
-}
-
-export namespace Tag {
-  export type Props = ComponentPropsWithRef<'span'> &
-    zyzz.Props.Variants<typeof styles.tag> & { render?: useRender.RenderProp | undefined }
-
-  /** A 6px dot in the tag's text color, hidden from assistive technology. Place it before text. */
-  export function Dot(props: Dot.Props) {
-    const { className, vars, ...attributes } = props
-
-    return (
-      <span
-        aria-hidden="true"
-        {...attributes}
-        {...styles.dot({ className, style: props.style, vars })}
-      />
-    )
-  }
-
-  export namespace Dot {
-    export type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.dot>
-  }
-}
-
-namespace styles {
-  export const dot = style(
-    {
-      backgroundColor: 'currentColor !custom',
-      borderRadius: 'full',
-      flexShrink: '0 !custom',
-      height: '6',
-      width: '6',
-    },
-    { id: 'tds/web/tag/dot' },
-  )
-
-  export const tag = variants(
-    {
-      base: {
-        alignItems: 'center',
-        border: '1px solid !custom',
-        borderColor: 'transparent !custom',
-        boxSizing: 'border-box',
-        columnGap: '6',
-        display: 'inline-flex',
-        height: '24',
-        paddingInline: '8',
-        typography: 'label.12',
-        whiteSpace: 'nowrap',
-        selectors: {
-          '& > svg': { flexShrink: '0 !custom', height: '12', width: '12' },
-          // Button and link tags keep the badge look and add only pointer, focus and press feedback.
-          '&:is(button, a)': {
-            cursor: 'pointer',
-            outlineColor: 'transparent !custom',
-            outlineOffset: '0',
-            outlineStyle: 'solid !custom',
-            outlineWidth: '2',
-            textDecoration: 'none !custom',
-            transitionDuration: '160',
-            transitionProperty: 'opacity, outline-color, outline-offset, scale',
-            transitionTimingFunction: 'snappy',
-          },
-          '&:is(button, a):active': { scale: 'press' },
-          '&:is(button, a):focus-visible': {
-            outlineColor: 'blue.700',
-            outlineOffset: '2',
-          },
-          '&:is(button, a):hover': { opacity: '0.8 !custom' },
-          '&:is(button):disabled': { cursor: 'default', opacity: 'disabled' },
-        },
-        '@media (prefers-reduced-motion: reduce)': {
-          selectors: {
-            '&:is(button, a)': { transitionProperty: 'opacity, outline-color' },
-            '&:is(button, a):active': { scale: 'none !custom' },
-          },
-        },
-      },
-      compoundVariants: [
-        {
-          when: { variant: 'outlined' },
-          // The outline takes the text color of each intent.
-          style: { backgroundColor: 'transparent !custom', borderColor: 'currentColor !custom' },
-        },
-        {
-          when: { variant: 'plain' },
-          style: { backgroundColor: 'transparent !custom', paddingInline: '0' },
-        },
-      ],
-      defaultVariants: { intent: 'neutral', shape: 'pill', size: 'medium', variant: 'soft' },
-      variants: {
-        intent: {
-          accent: { backgroundColor: 'purple.100', color: 'purple.900' },
-          info: { backgroundColor: 'blue.100', color: 'blue.900' },
-          negative: { backgroundColor: 'red.100', color: 'red.900' },
-          neutral: { backgroundColor: 'grayAlpha.100', color: 'gray.900' },
-          positive: { backgroundColor: 'green.100', color: 'green.900' },
-          warning: { backgroundColor: 'amber.100', color: 'amber.900' },
-        },
-        shape: { pill: { borderRadius: 'full' }, rounded: { borderRadius: '8' } },
-        // Badge sizes: 20, 24 and 32px, whether the tag is static, a button or a link.
-        size: {
-          large: { height: '32', paddingInline: '12', typography: 'label.14' },
-          medium: {},
-          small: { height: '20', paddingInline: '6' },
-        },
-        variant: { outlined: {}, plain: {}, soft: {} },
-      },
-    },
-    { id: 'tds/web/tag' },
-  )
-}

package/src/web/components/internal/FieldVariant.ts

@@ -1,6 +0,0 @@
-import { createContext } from 'react'
-
-export type Variant = 'default' | 'setting' | 'stacked'
-
-/** Variant that Fieldset and Field hand to the parts beneath them. */
-export const Context = createContext<Variant | undefined>(undefined)