Interface: UiAtomBaseProps

import { css } from '@gluonjs/core';
import {
  defineUiAtom,
  type DefineUiAtomOptions,
  type LooseUiAtomProps,
  type UiAtomBaseProps,
  type UiAtomProps,
  type UiAtomStyleOptions,
} from '@gluonjs/atoms';

interface TextLinkProps extends UiAtomBaseProps {
  readonly href?: string;
}

const style = {
  id: 'goods-text-link',
  sheet: css`:where(.goods-text-link) { text-underline-offset: 0.2em; }`,
} satisfies UiAtomStyleOptions;
const options = {
  displayName: 'TextLink',
  tag: ({ href }) => href ? 'a' : 'span',
  style,
  nativeProps: ({ href, children }, tag) => ({
    class: 'goods-text-link',
    children,
    ...(tag === 'a' ? { href } : {}),
  }),
} satisfies DefineUiAtomOptions<TextLinkProps, 'a' | 'span'>;
const TextLink = defineUiAtom(options);
const props = { href: '/shop', children: 'Shop' } satisfies UiAtomProps<TextLinkProps, 'a' | 'span'>;
const legacy = { slot: { content: 'Legacy label' } } satisfies LooseUiAtomProps;
console.log(TextLink(props), legacy.slot?.content);