{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "marker",
  "title": "Marker",
  "description": "A note in a conversation: a status, a system line, or a labeled break.",
  "dependencies": [
    "@base-ui/react",
    "@stylexjs/stylex"
  ],
  "registryDependencies": [
    "https://constella.aayush.cv/r/base.json"
  ],
  "files": [
    {
      "path": "src/components/ai/marker.tsx",
      "content": "import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport type { Sx } from \"@/lib/constella/styles\";\nimport { typeStyles } from \"@/lib/constella/styles\";\nimport {\n  colors,\n  durations,\n  media,\n  sizes,\n  space,\n  strokes,\n} from \"@/lib/constella/tokens.stylex\";\n\nconst markerVariants = [\"default\", \"border\", \"separator\"] as const;\n\ntype MarkerVariant = (typeof markerVariants)[number];\n\ntype Styled<T> = Omit<T, \"className\" | \"style\"> & {\n  sx?: Sx;\n};\n\ntype MarkerProps = Styled<useRender.ComponentProps<\"div\">> & {\n  variant?: MarkerVariant;\n};\n\nconst inSeparator = \":is([data-slot='marker'][data-variant='separator'] > *)\";\n\nconst rule = {\n  backgroundColor: colors.border,\n  content: \"''\",\n  flex: 1,\n  height: strokes.border,\n  minWidth: 0,\n};\n\nconst styles = stylex.create({\n  marker: {\n    alignItems: \"center\",\n    color: {\n      default: colors.textSecondary,\n      [media.hover]: { default: null, \":is(a):hover\": colors.textPrimary },\n    },\n    display: \"flex\",\n    gap: space.xs,\n    minHeight: sizes.icon,\n    position: \"relative\",\n    textAlign: \"start\",\n    textDecorationLine: { default: \"none\", \":is(a)\": \"underline\" },\n    textUnderlineOffset: space.xxs,\n    transitionDuration: durations.hover,\n    transitionProperty: \"color\",\n    transitionTimingFunction: \"ease\",\n    width: \"100%\",\n  },\n  ruled: {\n    borderBlockEndColor: colors.border,\n    borderBlockEndStyle: \"solid\",\n    borderBlockEndWidth: strokes.border,\n    paddingBlockEnd: space.xs,\n  },\n  separator: {\n    \"::after\": rule,\n    \"::before\": rule,\n  },\n  icon: {\n    display: \"flex\",\n    flexShrink: 0,\n    height: sizes.icon,\n    width: sizes.icon,\n  },\n  content: {\n    flex: { default: null, [inSeparator]: \"none\" },\n    minWidth: 0,\n    overflowWrap: \"anywhere\",\n    textAlign: { default: null, [inSeparator]: \"center\" },\n  },\n});\n\n/** A note in a conversation's flow: a status, a system line, or a labeled break. */\nfunction Marker({ render, sx, variant = \"default\", ...props }: MarkerProps) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      props,\n      stylex.props(\n        [typeStyles.textSm, styles.marker],\n        variant === \"border\" && styles.ruled,\n        variant === \"separator\" && styles.separator,\n        sx\n      )\n    ),\n    render,\n    // Base UI writes state as data attributes: `data-slot`, `data-variant`.\n    state: { slot: \"marker\", variant },\n  });\n}\n\nfunction MarkerIcon({ sx, ...props }: Styled<ComponentProps<\"span\">>) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"marker-icon\"\n      {...props}\n      {...stylex.props(styles.icon, sx)}\n    />\n  );\n}\n\nfunction MarkerContent({ sx, ...props }: Styled<ComponentProps<\"span\">>) {\n  return (\n    <span\n      data-slot=\"marker-content\"\n      {...props}\n      {...stylex.props(styles.content, sx)}\n    />\n  );\n}\n\nexport { Marker, MarkerContent, MarkerIcon, markerVariants };\nexport type { MarkerProps, MarkerVariant };\n",
      "type": "registry:component"
    }
  ],
  "docs": "Usage: https://constella.aayush.cv/docs/components/marker/index.md",
  "type": "registry:ui"
}