{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert",
  "title": "Alert",
  "description": "A callout with an icon, a title, a description and an action, its status on the icon.",
  "dependencies": [
    "@base-ui/react",
    "@stylexjs/stylex"
  ],
  "registryDependencies": [
    "https://constella.aayush.cv/r/base.json"
  ],
  "files": [
    {
      "path": "src/components/primitives/alert.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  fontWeights,\n  radii,\n  space,\n  strokes,\n} from \"@/lib/constella/tokens.stylex\";\n\nconst alertColors = [\"success\", \"info\", \"warning\", \"danger\"] as const;\n\ntype AlertColor = (typeof alertColors)[number];\n\ntype Styled<T> = Omit<T, \"className\" | \"style\"> & {\n  sx?: Sx;\n};\n\ntype AlertProps = Styled<ComponentProps<\"div\">> & { color?: AlertColor };\n\nconst hasIcon = \":has(> svg)\";\nconst hasAction = \":has(> [data-slot='alert-action'])\";\n// The title and description sit in the column after the icon, when there is one.\nconst text = {\n  default: 1,\n  \":is([data-slot='alert']:has(> svg) > *)\": 2,\n};\n\nconst narrow = \"@container (max-width: 24rem)\";\n\nconst styles = stylex.create({\n  alert: {\n    backgroundColor: colors.raised,\n    borderBlockEndColor: colors.border,\n    borderBlockStartColor: colors.border,\n    borderInlineEndColor: colors.border,\n    borderInlineStartColor: colors.border,\n    borderBlockEndStyle: \"solid\",\n    borderBlockStartStyle: \"solid\",\n    borderInlineEndStyle: \"solid\",\n    borderInlineStartStyle: \"solid\",\n    borderBlockEndWidth: strokes.border,\n    borderBlockStartWidth: strokes.border,\n    borderInlineEndWidth: strokes.border,\n    borderInlineStartWidth: strokes.border,\n    borderStartStartRadius: radii.sm,\n    borderStartEndRadius: radii.sm,\n    borderEndStartRadius: radii.sm,\n    borderEndEndRadius: radii.sm,\n    color: colors.textPrimary,\n    columnGap: space.xs,\n    // The action reads the alert's width, to drop under the text when they can't share a row.\n    containerType: \"inline-size\",\n    display: \"grid\",\n    gridTemplateColumns: {\n      default: \"minmax(0, 1fr)\",\n      [hasIcon]: \"auto minmax(0, 1fr)\",\n      [hasAction]: \"minmax(0, 1fr) auto\",\n      [`${hasIcon}${hasAction}`]: \"auto minmax(0, 1fr) auto\",\n    },\n    paddingBlockEnd: space.xs,\n    paddingBlockStart: space.xs,\n    paddingInlineEnd: space.popup,\n    paddingInlineStart: space.popup,\n    rowGap: space.xxxs,\n    textAlign: \"start\",\n    width: \"100%\",\n  },\n  title: {\n    fontWeight: fontWeights.medium,\n    gridColumnStart: text,\n    overflowWrap: \"anywhere\",\n  },\n  description: {\n    color: colors.textSecondary,\n    gridColumnStart: text,\n    overflowWrap: \"anywhere\",\n    textWrap: \"pretty\",\n  },\n  action: {\n    alignSelf: \"center\",\n    gridColumnEnd: -1,\n    gridColumnStart: { default: null, [narrow]: text },\n    gridRowEnd: { default: \"span 2\", [narrow]: \"auto\" },\n    gridRowStart: { default: 1, [narrow]: \"auto\" },\n    justifySelf: { default: null, [narrow]: \"start\" },\n    marginBlockStart: { default: null, [narrow]: space.xxs },\n  },\n});\n\nfunction Alert({ color, sx, ...props }: AlertProps) {\n  return (\n    <div\n      data-slot=\"alert\"\n      data-color={color}\n      role=\"alert\"\n      {...props}\n      {...stylex.props([typeStyles.textSm, styles.alert], sx)}\n    />\n  );\n}\n\nfunction AlertTitle({\n  render,\n  sx,\n  ...props\n}: Styled<useRender.ComponentProps<\"div\">>) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(props, stylex.props(styles.title, sx)),\n    render,\n    state: { slot: \"alert-title\" },\n  });\n}\n\nfunction AlertDescription({ sx, ...props }: Styled<ComponentProps<\"div\">>) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      {...props}\n      {...stylex.props(styles.description, sx)}\n    />\n  );\n}\n\nfunction AlertAction({ sx, ...props }: Styled<ComponentProps<\"div\">>) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      {...props}\n      {...stylex.props(styles.action, sx)}\n    />\n  );\n}\n\nexport { Alert, AlertAction, AlertDescription, alertColors, AlertTitle };\nexport type { AlertProps, AlertColor };\n",
      "type": "registry:component"
    }
  ],
  "docs": "Usage: https://constella.aayush.cv/docs/components/alert/index.md",
  "type": "registry:ui"
}