@nuee/registry 0.3.0 → 0.3.2

package/dist/items/alert-dialog.json

@@ -5,6 +5,10 @@
     {
       "content": "import { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { Button } from \"./button\";\nimport { getNativeStyleProps } from \"./stylex-props\";\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  backdrop: {\n    backdropFilter: \"blur(4px)\",\n    backgroundColor: \"oklch(0% 0 0 / 40%)\",\n    inset: 0,\n    position: \"fixed\",\n    transitionDuration: motionVars.durationSlow,\n    transitionProperty: \"opacity\",\n    transitionTimingFunction: motionVars.easingEnter,\n    zIndex: 50,\n    \":is([data-starting-style])\": { opacity: 0 },\n    \":is([data-ending-style])\": {\n      opacity: 0,\n      transitionDuration: motionVars.durationNormal,\n      transitionTimingFunction: motionVars.easingExit,\n    },\n  },\n  viewport: {\n    alignItems: \"center\",\n    display: \"flex\",\n    inset: 0,\n    justifyContent: \"center\",\n    padding: spacingVars.space4,\n    position: \"fixed\",\n    zIndex: 51,\n  },\n  popup: {\n    backgroundColor: colorVars.bgRaised,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    boxShadow: shadowVars.overlay,\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space4,\n    maxHeight: \"calc(100dvh - 2rem)\",\n    maxWidth: \"28rem\",\n    outline: \"none\",\n    overflow: \"auto\",\n    padding: spacingVars.space6,\n    position: \"relative\",\n    transitionDuration: motionVars.durationSlow,\n    transitionProperty: \"opacity, transform\",\n    transitionTimingFunction: motionVars.easingEnter,\n    width: \"100%\",\n    \":is([data-starting-style], [data-ending-style])\": {\n      opacity: 0,\n      transform: \"scale(0.95)\",\n    },\n    \":is([data-ending-style])\": {\n      transitionDuration: motionVars.durationNormal,\n      transitionTimingFunction: motionVars.easingExit,\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationNormal,\n      \":is([data-starting-style], [data-ending-style])\": { transform: \"scale(0.99)\" },\n    },\n  },\n  header: { display: \"flex\", flexDirection: \"column\", gap: spacingVars.space2 },\n  footer: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: spacingVars.space2,\n    justifyContent: \"flex-end\",\n  },\n  title: {\n    color: colorVars.fgPrimary,\n    fontSize: typographyVars.fontSizeLg,\n    fontWeight: typographyVars.fontWeightSemibold,\n    lineHeight: typographyVars.lineHeightTight,\n    margin: 0,\n  },\n  description: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    margin: 0,\n  },\n});\n\nexport const AlertDialog = AlertDialogPrimitive.Root;\nexport const AlertDialogTrigger = AlertDialogPrimitive.Trigger;\n\ntype AlertDialogContentProps = ComponentProps<typeof AlertDialogPrimitive.Popup> & {\n  children: ReactNode;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function AlertDialogContent({\n  children,\n  className,\n  style,\n  xstyle,\n  ...props\n}: AlertDialogContentProps) {\n  const stylexProps = stylex.props(styles.popup, xstyle);\n\n  return (\n    <AlertDialogPrimitive.Portal>\n      <AlertDialogPrimitive.Backdrop {...stylex.props(styles.backdrop)} />\n      <AlertDialogPrimitive.Viewport {...stylex.props(styles.viewport)}>\n        <AlertDialogPrimitive.Popup\n          {...props}\n          className={(state) => {\n            return [\n              stylexProps.className,\n              typeof className === \"function\" ? className(state) : className,\n            ]\n              .filter(Boolean)\n              .join(\" \");\n          }}\n          style={(state) => {\n            return {\n              ...stylexProps.style,\n              ...(typeof style === \"function\" ? style(state) : style),\n            };\n          }}\n        >\n          {children}\n        </AlertDialogPrimitive.Popup>\n      </AlertDialogPrimitive.Viewport>\n    </AlertDialogPrimitive.Portal>\n  );\n}\n\nexport function AlertDialogHeader({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<\"div\"> & { xstyle?: stylex.StyleXStyles }) {\n  return (\n    <div\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.header, xstyle), className, style)}\n    />\n  );\n}\n\nexport function AlertDialogFooter({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<\"div\"> & { xstyle?: stylex.StyleXStyles }) {\n  return (\n    <div\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.footer, xstyle), className, style)}\n    />\n  );\n}\n\nexport function AlertDialogTitle({\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  const stylexProps = stylex.props(styles.title);\n  return (\n    <AlertDialogPrimitive.Title\n      {...props}\n      className={(state) =>\n        [stylexProps.className, typeof className === \"function\" ? className(state) : className]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(state) => ({\n        ...stylexProps.style,\n        ...(typeof style === \"function\" ? style(state) : style),\n      })}\n    />\n  );\n}\n\nexport function AlertDialogDescription({\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  const stylexProps = stylex.props(styles.description);\n  return (\n    <AlertDialogPrimitive.Description\n      {...props}\n      className={(state) =>\n        [stylexProps.className, typeof className === \"function\" ? className(state) : className]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(state) => ({\n        ...stylexProps.style,\n        ...(typeof style === \"function\" ? style(state) : style),\n      })}\n    />\n  );\n}\n\ntype AlertDialogButtonProps = ComponentProps<typeof AlertDialogPrimitive.Close>;\n\nexport function AlertDialogCancel({ children, ...props }: AlertDialogButtonProps) {\n  return (\n    <AlertDialogPrimitive.Close\n      {...props}\n      render={<Button variant=\"secondary\">{children}</Button>}\n    />\n  );\n}\n\nexport function AlertDialogAction({ children, ...props }: AlertDialogButtonProps) {\n  return (\n    <AlertDialogPrimitive.Close\n      {...props}\n      render={<Button variant=\"destructive\">{children}</Button>}\n    />\n  );\n}\n",
       "path": "alert-dialog.tsx"
+    },
+    {
+      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nexport function getNativeStyleProps(\n  stylexProps: ReturnType<typeof stylex.props>,\n  className?: string,\n  style?: ComponentProps<\"div\">[\"style\"],\n): Pick<ComponentProps<\"div\">, \"className\" | \"style\"> {\n  return {\n    className: [stylexProps.className, className].filter(Boolean).join(\" \"),\n    style: { ...stylexProps.style, ...style },\n  };\n}\n",
+      "path": "stylex-props.ts"
     }
   ],
   "dependencies": [

package/dist/items/attachment.json

@@ -5,6 +5,10 @@
     {
       "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { getNativeStyleProps } from \"./stylex-props\";\n\nimport { Button, type ButtonProps } from \"./button\";\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    display: \"flex\",\n    minWidth: 0,\n    position: \"relative\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, border-color\",\n    transitionTimingFunction: motionVars.easingStandard,\n  },\n  horizontal: { flexDirection: \"row\" },\n  vertical: { alignItems: \"stretch\", flexDirection: \"column\" },\n  sizeDefault: { gap: spacingVars.space3, minHeight: \"4.5rem\", padding: spacingVars.space3 },\n  sm: { gap: spacingVars.space2, minHeight: sizeVars.touchTarget, padding: spacingVars.space2 },\n  xs: { gap: spacingVars.space2, minHeight: sizeVars.controlMd, padding: spacingVars.space1 },\n  error: {\n    backgroundColor: colorVars.bgFeedbackError,\n    borderColor: colorVars.strokeFeedbackError,\n  },\n  media: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flexShrink: 0,\n    justifyContent: \"center\",\n    overflow: \"hidden\",\n  },\n  mediaicon: {\n    backgroundColor: colorVars.bgSubtle,\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgSecondary,\n    height: sizeVars.controlLg,\n    width: sizeVars.controlLg,\n  },\n  mediaimage: {\n    borderRadius: radiusVars.sm,\n    height: \"3rem\",\n    objectFit: \"cover\",\n    width: \"3rem\",\n  },\n  content: {\n    display: \"flex\",\n    flex: 1,\n    flexDirection: \"column\",\n    gap: spacingVars.space1,\n    minWidth: 0,\n    paddingInline: spacingVars.space2,\n  },\n  title: {\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightTight,\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  description: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeXs,\n    lineHeight: typographyVars.lineHeightNormal,\n    margin: 0,\n  },\n  actions: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flexShrink: 0,\n    gap: spacingVars.space1,\n    position: \"relative\",\n    zIndex: 2,\n  },\n  action: { minWidth: sizeVars.controlSm, paddingInline: spacingVars.space2 },\n  trigger: {\n    backgroundColor: \"transparent\",\n    borderWidth: 0,\n    borderRadius: \"inherit\",\n    cursor: \"pointer\",\n    inset: 0,\n    outline: {\n      default: \"none\",\n      \":focus-visible\": `${sizeVars.focusRing} solid ${colorVars.strokeFocus}`,\n    },\n    outlineOffset: { default: 0, \":focus-visible\": 2 },\n    position: \"absolute\",\n    zIndex: 1,\n  },\n  group: {\n    display: \"flex\",\n    gap: spacingVars.space3,\n    overflowX: \"auto\",\n    paddingBlock: spacingVars.space1,\n    scrollSnapType: \"x proximity\",\n    width: \"100%\",\n  },\n});\n\nexport type AttachmentState = \"done\" | \"error\" | \"idle\" | \"processing\" | \"uploading\";\nexport type AttachmentSize = \"default\" | \"sm\" | \"xs\";\n\nexport type AttachmentProps = Omit<ComponentProps<\"div\">, \"title\"> & {\n  orientation?: \"horizontal\" | \"vertical\";\n  size?: AttachmentSize;\n  state?: AttachmentState;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Attachment({\n  className,\n  orientation = \"horizontal\",\n  size = \"default\",\n  state = \"done\",\n  style,\n  xstyle,\n  ...props\n}: AttachmentProps) {\n  return (\n    <div\n      {...props}\n      data-orientation={orientation}\n      data-state={state}\n      {...getNativeStyleProps(\n        stylex.props(\n          styles.root,\n          styles[orientation],\n          size === \"default\" ? styles.sizeDefault : styles[size],\n          state === \"error\" && styles.error,\n          xstyle,\n        ),\n        className,\n        style,\n      )}\n    />\n  );\n}\n\nexport type AttachmentMediaProps = ComponentProps<\"div\"> & {\n  variant?: \"icon\" | \"image\";\n};\n\nexport function AttachmentMedia({\n  className,\n  style,\n  variant = \"icon\",\n  ...props\n}: AttachmentMediaProps) {\n  return (\n    <div\n      {...props}\n      {...getNativeStyleProps(\n        stylex.props(styles.media, styles[`media${variant}`]),\n        className,\n        style,\n      )}\n    />\n  );\n}\n\nexport function AttachmentContent({ className, style, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div {...props} {...getNativeStyleProps(stylex.props(styles.content), className, style)} />\n  );\n}\n\nexport function AttachmentTitle({ className, style, ...props }: ComponentProps<\"div\">) {\n  return <div {...props} {...getNativeStyleProps(stylex.props(styles.title), className, style)} />;\n}\n\nexport function AttachmentDescription({ className, style, ...props }: ComponentProps<\"p\">) {\n  return (\n    <p {...props} {...getNativeStyleProps(stylex.props(styles.description), className, style)} />\n  );\n}\n\nexport function AttachmentActions({ className, style, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div {...props} {...getNativeStyleProps(stylex.props(styles.actions), className, style)} />\n  );\n}\n\nexport type AttachmentActionProps = Omit<ButtonProps, \"size\" | \"variant\">;\n\nexport function AttachmentAction({ xstyle, ...props }: AttachmentActionProps) {\n  return <Button {...props} size=\"sm\" variant=\"ghost\" xstyle={[styles.action, xstyle]} />;\n}\n\nexport function AttachmentTrigger({\n  className,\n  style,\n  type = \"button\",\n  ...props\n}: ComponentProps<\"button\">) {\n  return (\n    <button\n      {...props}\n      type={type}\n      {...getNativeStyleProps(stylex.props(styles.trigger), className, style)}\n    />\n  );\n}\n\nexport function AttachmentGroup({ className, style, ...props }: ComponentProps<\"div\">) {\n  return <div {...props} {...getNativeStyleProps(stylex.props(styles.group), className, style)} />;\n}\n",
       "path": "attachment.tsx"
+    },
+    {
+      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nexport function getNativeStyleProps(\n  stylexProps: ReturnType<typeof stylex.props>,\n  className?: string,\n  style?: ComponentProps<\"div\">[\"style\"],\n): Pick<ComponentProps<\"div\">, \"className\" | \"style\"> {\n  return {\n    className: [stylexProps.className, className].filter(Boolean).join(\" \"),\n    style: { ...stylexProps.style, ...style },\n  };\n}\n",
+      "path": "stylex-props.ts"
     }
   ],
   "dependencies": [

package/dist/items/avatar.json

@@ -5,6 +5,10 @@
     {
       "content": "import { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { getNativeStyleProps } from \"./stylex-props\";\n\nimport {\n  colorVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    backgroundColor: colorVars.bgSubtle,\n    borderColor: colorVars.bgSurface,\n    borderRadius: radiusVars.full,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgSecondary,\n    display: \"inline-flex\",\n    flexShrink: 0,\n    overflow: \"visible\",\n    position: \"relative\",\n  },\n  sm: { height: sizeVars.controlSm, width: sizeVars.controlSm },\n  md: { height: sizeVars.controlMd, width: sizeVars.controlMd },\n  lg: { height: sizeVars.controlLg, width: sizeVars.controlLg },\n  image: {\n    borderRadius: \"inherit\",\n    height: \"100%\",\n    objectFit: \"cover\",\n    overflow: \"hidden\",\n    width: \"100%\",\n  },\n  fallback: {\n    alignItems: \"center\",\n    borderRadius: \"inherit\",\n    display: \"flex\",\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightMedium,\n    height: \"100%\",\n    justifyContent: \"center\",\n    overflow: \"hidden\",\n    width: \"100%\",\n  },\n  badge: {\n    backgroundColor: colorVars.fgFeedbackSuccess,\n    borderColor: colorVars.bgSurface,\n    borderRadius: radiusVars.full,\n    borderStyle: \"solid\",\n    borderWidth: \"0.125rem\",\n    bottom: \"-0.0625rem\",\n    height: \"0.75rem\",\n    position: \"absolute\",\n    right: \"-0.0625rem\",\n    width: \"0.75rem\",\n  },\n  group: { display: \"flex\", gap: spacingVars.space1 },\n  groupCount: {\n    alignItems: \"center\",\n    backgroundColor: colorVars.bgSubtle,\n    borderColor: colorVars.bgSurface,\n    borderRadius: radiusVars.full,\n    borderStyle: \"solid\",\n    borderWidth: \"0.125rem\",\n    color: colorVars.fgSecondary,\n    display: \"inline-flex\",\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightMedium,\n    height: sizeVars.controlMd,\n    justifyContent: \"center\",\n    width: sizeVars.controlMd,\n  },\n});\n\nexport type AvatarSize = \"lg\" | \"md\" | \"sm\";\n\nexport type AvatarProps = ComponentProps<typeof AvatarPrimitive.Root> & {\n  size?: AvatarSize;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Avatar({ className, size = \"md\", style, xstyle, ...props }: AvatarProps) {\n  const stylexProps = stylex.props(styles.root, styles[size], xstyle);\n  return (\n    <AvatarPrimitive.Root\n      {...props}\n      className={(state) =>\n        [stylexProps.className, typeof className === \"function\" ? className(state) : className]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(state) => ({\n        ...stylexProps.style,\n        ...(typeof style === \"function\" ? style(state) : style),\n      })}\n    />\n  );\n}\n\nexport function AvatarImage({\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof AvatarPrimitive.Image>) {\n  const stylexProps = stylex.props(styles.image);\n  return (\n    <AvatarPrimitive.Image\n      {...props}\n      className={(state) =>\n        [stylexProps.className, typeof className === \"function\" ? className(state) : className]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(state) => ({\n        ...stylexProps.style,\n        ...(typeof style === \"function\" ? style(state) : style),\n      })}\n    />\n  );\n}\n\nexport function AvatarFallback({\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  const stylexProps = stylex.props(styles.fallback);\n  return (\n    <AvatarPrimitive.Fallback\n      {...props}\n      className={(state) =>\n        [stylexProps.className, typeof className === \"function\" ? className(state) : className]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(state) => ({\n        ...stylexProps.style,\n        ...(typeof style === \"function\" ? style(state) : style),\n      })}\n    />\n  );\n}\n\nexport function AvatarBadge({ className, style, ...props }: ComponentProps<\"span\">) {\n  return <span {...props} {...getNativeStyleProps(stylex.props(styles.badge), className, style)} />;\n}\n\nexport function AvatarGroup({ className, style, ...props }: ComponentProps<\"div\">) {\n  const stylexProps = stylex.props(styles.group);\n  return (\n    <div\n      {...props}\n      className={[stylexProps.className, className].filter(Boolean).join(\" \")}\n      style={{ ...stylexProps.style, ...style }}\n    />\n  );\n}\n\nexport function AvatarGroupCount({ className, style, ...props }: ComponentProps<\"span\">) {\n  return (\n    <span {...props} {...getNativeStyleProps(stylex.props(styles.groupCount), className, style)} />\n  );\n}\n",
       "path": "avatar.tsx"
+    },
+    {
+      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nexport function getNativeStyleProps(\n  stylexProps: ReturnType<typeof stylex.props>,\n  className?: string,\n  style?: ComponentProps<\"div\">[\"style\"],\n): Pick<ComponentProps<\"div\">, \"className\" | \"style\"> {\n  return {\n    className: [stylexProps.className, className].filter(Boolean).join(\" \"),\n    style: { ...stylexProps.style, ...style },\n  };\n}\n",
+      "path": "stylex-props.ts"
     }
   ],
   "dependencies": [

package/dist/items/breadcrumb.json

@@ -9,6 +9,10 @@
     {
       "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { Icon } from \"./Icon\";\nimport { getNativeStyleProps } from \"./stylex-props\";\nimport {\n  colorVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: { minWidth: 0 },\n  list: {\n    alignItems: \"center\",\n    color: colorVars.fgSecondary,\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    fontSize: typographyVars.fontSizeSm,\n    gap: spacingVars.space2,\n    lineHeight: typographyVars.lineHeightNormal,\n    listStyle: \"none\",\n    margin: 0,\n    padding: 0,\n  },\n  item: { alignItems: \"center\", display: \"inline-flex\", gap: spacingVars.space2 },\n  link: {\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgSecondary,\n    outline: \"none\",\n    textDecoration: \"none\",\n    \":hover\": { color: colorVars.fgPrimary, textDecoration: \"underline\" },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  page: { color: colorVars.fgPrimary, fontWeight: typographyVars.fontWeightMedium },\n  separator: { alignItems: \"center\", color: colorVars.fgTertiary, display: \"inline-flex\" },\n  ellipsis: {\n    alignItems: \"center\",\n    color: colorVars.fgTertiary,\n    display: \"inline-flex\",\n    height: sizeVars.iconMd,\n    justifyContent: \"center\",\n    width: sizeVars.iconMd,\n  },\n});\n\nexport function Breadcrumb({ className, style, ...props }: ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"Breadcrumb\"\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.root), className, style)}\n    />\n  );\n}\n\nexport function BreadcrumbList({ className, style, ...props }: ComponentProps<\"ol\">) {\n  return <ol {...props} {...getNativeStyleProps(stylex.props(styles.list), className, style)} />;\n}\n\nexport function BreadcrumbItem({ className, style, ...props }: ComponentProps<\"li\">) {\n  return <li {...props} {...getNativeStyleProps(stylex.props(styles.item), className, style)} />;\n}\n\nexport function BreadcrumbLink({ children, className, style, ...props }: ComponentProps<\"a\">) {\n  return (\n    <a {...props} {...getNativeStyleProps(stylex.props(styles.link), className, style)}>\n      {children}\n    </a>\n  );\n}\n\nexport function BreadcrumbPage({ className, style, ...props }: ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-current=\"page\"\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.page), className, style)}\n    />\n  );\n}\n\nexport function BreadcrumbSeparator({\n  children,\n  className,\n  style,\n  ...props\n}: ComponentProps<\"li\"> & { children?: ReactNode }) {\n  return (\n    <li\n      aria-hidden=\"true\"\n      role=\"presentation\"\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.separator), className, style)}\n    >\n      {children ?? <Icon name=\"chevronRight\" />}\n    </li>\n  );\n}\n\nexport function BreadcrumbEllipsis({ className, style, ...props }: ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.ellipsis), className, style)}\n    >\n      …\n    </span>\n  );\n}\n",
       "path": "breadcrumb.tsx"
+    },
+    {
+      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nexport function getNativeStyleProps(\n  stylexProps: ReturnType<typeof stylex.props>,\n  className?: string,\n  style?: ComponentProps<\"div\">[\"style\"],\n): Pick<ComponentProps<\"div\">, \"className\" | \"style\"> {\n  return {\n    className: [stylexProps.className, className].filter(Boolean).join(\" \"),\n    style: { ...stylexProps.style, ...style },\n  };\n}\n",
+      "path": "stylex-props.ts"
     }
   ],
   "dependencies": [

package/dist/items/content-row.json

@@ -5,6 +5,10 @@
     {
       "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { getNativeStyleProps } from \"./stylex-props\";\n\nimport {\n  colorVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    borderColor: \"transparent\",\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    display: \"flex\",\n    minWidth: 0,\n    width: \"100%\",\n  },\n  variantDefault: { backgroundColor: \"transparent\" },\n  muted: { backgroundColor: colorVars.bgSubtle },\n  outline: { backgroundColor: colorVars.bgSurface, borderColor: colorVars.strokeDefault },\n  xs: { gap: spacingVars.space2, minHeight: sizeVars.controlSm, padding: spacingVars.space2 },\n  sm: { gap: spacingVars.space3, minHeight: sizeVars.touchTarget, padding: spacingVars.space3 },\n  sizeDefault: { gap: spacingVars.space3, minHeight: \"4rem\", padding: spacingVars.space4 },\n  group: { display: \"flex\", flexDirection: \"column\", gap: spacingVars.space2, width: \"100%\" },\n  media: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flexShrink: 0,\n    justifyContent: \"center\",\n    overflow: \"hidden\",\n  },\n  mediaicon: {\n    backgroundColor: colorVars.bgSubtle,\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgSecondary,\n    height: sizeVars.controlMd,\n    width: sizeVars.controlMd,\n  },\n  mediaavatar: { borderRadius: radiusVars.full },\n  mediaimage: {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.touchTarget,\n    width: sizeVars.touchTarget,\n  },\n  content: {\n    display: \"flex\",\n    flex: 1,\n    flexDirection: \"column\",\n    gap: spacingVars.space1,\n    minWidth: 0,\n  },\n  title: {\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightTight,\n  },\n  description: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    margin: 0,\n  },\n  actions: { alignItems: \"center\", display: \"flex\", flexShrink: 0, gap: spacingVars.space2 },\n});\n\nexport type ContentRowSize = \"default\" | \"sm\" | \"xs\";\nexport type ContentRowVariant = \"default\" | \"muted\" | \"outline\";\n\nexport type ContentRowProps = ComponentProps<\"div\"> & {\n  size?: ContentRowSize;\n  variant?: ContentRowVariant;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function ContentRow({\n  className,\n  size = \"default\",\n  style,\n  variant = \"default\",\n  xstyle,\n  ...props\n}: ContentRowProps) {\n  return (\n    <div\n      {...props}\n      {...getNativeStyleProps(\n        stylex.props(\n          styles.root,\n          size === \"default\" ? styles.sizeDefault : styles[size],\n          variant === \"default\" ? styles.variantDefault : styles[variant],\n          xstyle,\n        ),\n        className,\n        style,\n      )}\n    />\n  );\n}\n\nexport function ContentRowGroup({ className, style, ...props }: ComponentProps<\"div\">) {\n  return <div {...props} {...getNativeStyleProps(stylex.props(styles.group), className, style)} />;\n}\n\nexport type ContentRowMediaProps = ComponentProps<\"div\"> & {\n  variant?: \"avatar\" | \"icon\" | \"image\";\n};\n\nexport function ContentRowMedia({\n  className,\n  style,\n  variant = \"icon\",\n  ...props\n}: ContentRowMediaProps) {\n  return (\n    <div\n      {...props}\n      {...getNativeStyleProps(\n        stylex.props(styles.media, styles[`media${variant}`]),\n        className,\n        style,\n      )}\n    />\n  );\n}\n\nexport function ContentRowContent({ className, style, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div {...props} {...getNativeStyleProps(stylex.props(styles.content), className, style)} />\n  );\n}\n\nexport function ContentRowTitle({ className, style, ...props }: ComponentProps<\"div\">) {\n  return <div {...props} {...getNativeStyleProps(stylex.props(styles.title), className, style)} />;\n}\n\nexport function ContentRowDescription({ className, style, ...props }: ComponentProps<\"p\">) {\n  return (\n    <p {...props} {...getNativeStyleProps(stylex.props(styles.description), className, style)} />\n  );\n}\n\nexport function ContentRowActions({ className, style, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div {...props} {...getNativeStyleProps(stylex.props(styles.actions), className, style)} />\n  );\n}\n",
       "path": "content-row.tsx"
+    },
+    {
+      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nexport function getNativeStyleProps(\n  stylexProps: ReturnType<typeof stylex.props>,\n  className?: string,\n  style?: ComponentProps<\"div\">[\"style\"],\n): Pick<ComponentProps<\"div\">, \"className\" | \"style\"> {\n  return {\n    className: [stylexProps.className, className].filter(Boolean).join(\" \"),\n    style: { ...stylexProps.style, ...style },\n  };\n}\n",
+      "path": "stylex-props.ts"
     }
   ],
   "dependencies": [

package/dist/items/dialog.json

@@ -9,6 +9,10 @@
     {
       "content": "import { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { Icon } from \"./Icon\";\nimport { getNativeStyleProps } from \"./stylex-props\";\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  backdrop: {\n    backdropFilter: \"blur(4px)\",\n    backgroundColor: \"oklch(0% 0 0 / 40%)\",\n    inset: 0,\n    position: \"fixed\",\n    transitionDuration: motionVars.durationSlow,\n    transitionProperty: \"opacity\",\n    transitionTimingFunction: motionVars.easingEnter,\n    zIndex: 50,\n    \":is([data-starting-style])\": { opacity: 0 },\n    \":is([data-ending-style])\": {\n      opacity: 0,\n      transitionDuration: motionVars.durationNormal,\n      transitionTimingFunction: motionVars.easingExit,\n    },\n  },\n  viewport: {\n    alignItems: \"center\",\n    display: \"flex\",\n    inset: 0,\n    justifyContent: \"center\",\n    padding: spacingVars.space4,\n    position: \"fixed\",\n    zIndex: 51,\n  },\n  popup: {\n    backgroundColor: colorVars.bgRaised,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    boxShadow: shadowVars.overlay,\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space4,\n    maxHeight: \"calc(100dvh - 2rem)\",\n    maxWidth: \"32rem\",\n    outline: \"none\",\n    overflow: \"auto\",\n    padding: spacingVars.space6,\n    position: \"relative\",\n    transitionDuration: motionVars.durationSlow,\n    transitionProperty: \"opacity, transform\",\n    transitionTimingFunction: motionVars.easingEnter,\n    width: \"100%\",\n    \":is([data-starting-style], [data-ending-style])\": {\n      opacity: 0,\n      transform: \"scale(0.95)\",\n    },\n    \":is([data-ending-style])\": {\n      transitionDuration: motionVars.durationNormal,\n      transitionTimingFunction: motionVars.easingExit,\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationNormal,\n      \":is([data-starting-style], [data-ending-style])\": { transform: \"scale(0.99)\" },\n    },\n  },\n  close: {\n    alignItems: \"center\",\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    borderStyle: \"none\",\n    borderWidth: 0,\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgSecondary,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    height: sizeVars.touchTarget,\n    justifyContent: \"center\",\n    outline: \"none\",\n    position: \"absolute\",\n    right: spacingVars.space3,\n    top: spacingVars.space3,\n    width: sizeVars.touchTarget,\n    \":hover\": { backgroundColor: colorVars.interactionHover, color: colorVars.fgPrimary },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  header: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space2,\n    paddingInlineEnd: spacingVars.space8,\n  },\n  footer: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: spacingVars.space2,\n    justifyContent: \"flex-end\",\n  },\n  title: {\n    color: colorVars.fgPrimary,\n    fontSize: typographyVars.fontSizeLg,\n    fontWeight: typographyVars.fontWeightSemibold,\n    lineHeight: typographyVars.lineHeightTight,\n    margin: 0,\n  },\n  description: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    margin: 0,\n  },\n});\n\nexport const Dialog = DialogPrimitive.Root;\nexport const DialogTrigger = DialogPrimitive.Trigger;\nexport const DialogClose = DialogPrimitive.Close;\n\ntype DialogContentProps = ComponentProps<typeof DialogPrimitive.Popup> & {\n  children: ReactNode;\n  /** Accessible name for the optional close button. @default \"Close\" */\n  closeLabel?: string;\n  showCloseButton?: boolean;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function DialogContent({\n  children,\n  className,\n  closeLabel = \"Close\",\n  showCloseButton = true,\n  style,\n  xstyle,\n  ...props\n}: DialogContentProps) {\n  const stylexProps = stylex.props(styles.popup, xstyle);\n  return (\n    <DialogPrimitive.Portal>\n      <DialogPrimitive.Backdrop {...stylex.props(styles.backdrop)} />\n      <DialogPrimitive.Viewport {...stylex.props(styles.viewport)}>\n        <DialogPrimitive.Popup\n          {...props}\n          className={(state) => {\n            const customClassName = typeof className === \"function\" ? className(state) : className;\n            return [stylexProps.className, customClassName].filter(Boolean).join(\" \");\n          }}\n          style={(state) => {\n            return {\n              ...stylexProps.style,\n              ...(typeof style === \"function\" ? style(state) : style),\n            };\n          }}\n        >\n          {children}\n          {showCloseButton ? (\n            <DialogPrimitive.Close aria-label={closeLabel} {...stylex.props(styles.close)}>\n              <Icon aria-hidden=\"true\" name=\"close\" />\n            </DialogPrimitive.Close>\n          ) : null}\n        </DialogPrimitive.Popup>\n      </DialogPrimitive.Viewport>\n    </DialogPrimitive.Portal>\n  );\n}\n\nexport function DialogHeader({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<\"div\"> & { xstyle?: stylex.StyleXStyles }) {\n  return (\n    <div\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.header, xstyle), className, style)}\n    />\n  );\n}\n\nexport function DialogFooter({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<\"div\"> & { xstyle?: stylex.StyleXStyles }) {\n  return (\n    <div\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.footer, xstyle), className, style)}\n    />\n  );\n}\n\nexport function DialogTitle({\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof DialogPrimitive.Title>) {\n  const stylexProps = stylex.props(styles.title);\n  return (\n    <DialogPrimitive.Title\n      {...props}\n      className={(state) =>\n        [stylexProps.className, typeof className === \"function\" ? className(state) : className]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(state) => ({\n        ...stylexProps.style,\n        ...(typeof style === \"function\" ? style(state) : style),\n      })}\n    />\n  );\n}\n\nexport function DialogDescription({\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof DialogPrimitive.Description>) {\n  const stylexProps = stylex.props(styles.description);\n  return (\n    <DialogPrimitive.Description\n      {...props}\n      className={(state) =>\n        [stylexProps.className, typeof className === \"function\" ? className(state) : className]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(state) => ({\n        ...stylexProps.style,\n        ...(typeof style === \"function\" ? style(state) : style),\n      })}\n    />\n  );\n}\n",
       "path": "dialog.tsx"
+    },
+    {
+      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nexport function getNativeStyleProps(\n  stylexProps: ReturnType<typeof stylex.props>,\n  className?: string,\n  style?: ComponentProps<\"div\">[\"style\"],\n): Pick<ComponentProps<\"div\">, \"className\" | \"style\"> {\n  return {\n    className: [stylexProps.className, className].filter(Boolean).join(\" \"),\n    style: { ...stylexProps.style, ...style },\n  };\n}\n",
+      "path": "stylex-props.ts"
     }
   ],
   "dependencies": [

package/dist/items/empty.json

@@ -5,6 +5,10 @@
     {
       "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { getNativeStyleProps } from \"./stylex-props\";\n\nimport {\n  colorVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"dashed\",\n    borderWidth: sizeVars.stroke,\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space6,\n    justifyContent: \"center\",\n    minWidth: 0,\n    padding: spacingVars.space8,\n    textAlign: \"center\",\n  },\n  header: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space2,\n    maxWidth: sizeVars.contentSm,\n  },\n  media: {\n    alignItems: \"center\",\n    backgroundColor: colorVars.bgSubtle,\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgSecondary,\n    display: \"flex\",\n    height: sizeVars.touchTarget,\n    justifyContent: \"center\",\n    width: sizeVars.touchTarget,\n  },\n  title: {\n    color: colorVars.fgPrimary,\n    fontSize: typographyVars.fontSizeLg,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightTight,\n    margin: 0,\n  },\n  description: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    margin: 0,\n  },\n  content: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space4,\n    maxWidth: sizeVars.contentSm,\n    width: \"100%\",\n  },\n});\n\ntype StyleProps = { xstyle?: stylex.StyleXStyles };\n\nexport function Empty({ className, style, xstyle, ...props }: ComponentProps<\"div\"> & StyleProps) {\n  return (\n    <div {...props} {...getNativeStyleProps(stylex.props(styles.root, xstyle), className, style)} />\n  );\n}\n\nexport function EmptyHeader({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<\"div\"> & StyleProps) {\n  return (\n    <div\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.header, xstyle), className, style)}\n    />\n  );\n}\n\nexport function EmptyMedia({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<\"div\"> & StyleProps) {\n  return (\n    <div\n      {...props}\n      aria-hidden=\"true\"\n      {...getNativeStyleProps(stylex.props(styles.media, xstyle), className, style)}\n    />\n  );\n}\n\nexport function EmptyTitle({\n  children,\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<\"h3\"> & StyleProps) {\n  return (\n    <h3 {...props} {...getNativeStyleProps(stylex.props(styles.title, xstyle), className, style)}>\n      {children}\n    </h3>\n  );\n}\n\nexport function EmptyDescription({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<\"p\"> & StyleProps) {\n  return (\n    <p\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.description, xstyle), className, style)}\n    />\n  );\n}\n\nexport function EmptyContent({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<\"div\"> & StyleProps) {\n  return (\n    <div\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.content, xstyle), className, style)}\n    />\n  );\n}\n",
       "path": "empty.tsx"
+    },
+    {
+      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nexport function getNativeStyleProps(\n  stylexProps: ReturnType<typeof stylex.props>,\n  className?: string,\n  style?: ComponentProps<\"div\">[\"style\"],\n): Pick<ComponentProps<\"div\">, \"className\" | \"style\"> {\n  return {\n    className: [stylexProps.className, className].filter(Boolean).join(\" \"),\n    style: { ...stylexProps.style, ...style },\n  };\n}\n",
+      "path": "stylex-props.ts"
     }
   ],
   "dependencies": [

package/dist/items/field.json

@@ -5,6 +5,10 @@
     {
       "content": "import { Field as FieldPrimitive } from \"@base-ui/react/field\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { getNativeStyleProps } from \"./stylex-props\";\n\nimport { colorVars, spacingVars, typographyVars } from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: { display: \"flex\", gap: spacingVars.space2, width: \"100%\" },\n  vertical: { flexDirection: \"column\" },\n  horizontal: { alignItems: \"center\", flexDirection: \"row\", gap: spacingVars.space4 },\n  label: {\n    color: colorVars.fgPrimary,\n    cursor: \"default\",\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n  description: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    margin: 0,\n  },\n  error: {\n    color: colorVars.fgFeedbackError,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n  set: {\n    borderStyle: \"none\",\n    borderWidth: 0,\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space6,\n    margin: 0,\n    minWidth: 0,\n    padding: 0,\n  },\n  legend: {\n    color: colorVars.fgPrimary,\n    fontSize: typographyVars.fontSizeMd,\n    fontWeight: typographyVars.fontWeightMedium,\n    marginBottom: spacingVars.space3,\n    padding: 0,\n  },\n  group: { display: \"flex\", flexDirection: \"column\", gap: spacingVars.space6, width: \"100%\" },\n  content: {\n    display: \"flex\",\n    flex: 1,\n    flexDirection: \"column\",\n    gap: spacingVars.space1,\n    minWidth: 0,\n  },\n  title: {\n    color: colorVars.fgPrimary,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n});\n\ntype StyleProps = { xstyle?: stylex.StyleXStyles };\ntype FieldOrientation = \"horizontal\" | \"vertical\";\n\nfunction mergeClassName<State>(\n  generatedClassName: string | undefined,\n  className: string | ((state: State) => string | undefined) | undefined,\n) {\n  if (typeof className === \"function\") {\n    return (state: State) => [generatedClassName, className(state)].filter(Boolean).join(\" \");\n  }\n\n  return [generatedClassName, className].filter(Boolean).join(\" \");\n}\n\nexport type FieldProps = ComponentProps<typeof FieldPrimitive.Root> &\n  StyleProps & { orientation?: FieldOrientation };\n\nexport function Field({\n  className,\n  orientation = \"vertical\",\n  style,\n  xstyle,\n  ...props\n}: FieldProps) {\n  const stylexProps = stylex.props(styles.root, styles[orientation], xstyle);\n\n  return (\n    <FieldPrimitive.Root\n      {...props}\n      data-orientation={orientation}\n      className={mergeClassName(stylexProps.className, className)}\n      style={{ ...stylexProps.style, ...style }}\n    />\n  );\n}\n\nexport function FieldLabel({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<typeof FieldPrimitive.Label> & StyleProps) {\n  const stylexProps = stylex.props(styles.label, xstyle);\n  return (\n    <FieldPrimitive.Label\n      {...props}\n      className={mergeClassName(stylexProps.className, className)}\n      style={{ ...stylexProps.style, ...style }}\n    />\n  );\n}\n\nexport function FieldDescription({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<typeof FieldPrimitive.Description> & StyleProps) {\n  const stylexProps = stylex.props(styles.description, xstyle);\n  return (\n    <FieldPrimitive.Description\n      {...props}\n      className={mergeClassName(stylexProps.className, className)}\n      style={{ ...stylexProps.style, ...style }}\n    />\n  );\n}\n\nexport function FieldError({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<typeof FieldPrimitive.Error> & StyleProps) {\n  const stylexProps = stylex.props(styles.error, xstyle);\n  return (\n    <FieldPrimitive.Error\n      {...props}\n      className={mergeClassName(stylexProps.className, className)}\n      style={{ ...stylexProps.style, ...style }}\n    />\n  );\n}\n\nexport function FieldSet({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<\"fieldset\"> & StyleProps) {\n  return (\n    <fieldset\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.set, xstyle), className, style)}\n    />\n  );\n}\n\nexport function FieldLegend({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<\"legend\"> & StyleProps) {\n  return (\n    <legend\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.legend, xstyle), className, style)}\n    />\n  );\n}\n\nexport function FieldGroup({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<\"div\"> & StyleProps) {\n  return (\n    <div\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.group, xstyle), className, style)}\n    />\n  );\n}\n\nexport function FieldContent({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<\"div\"> & StyleProps) {\n  return (\n    <div\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.content, xstyle), className, style)}\n    />\n  );\n}\n\nexport function FieldTitle({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<\"div\"> & StyleProps) {\n  return (\n    <div\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.title, xstyle), className, style)}\n    />\n  );\n}\n",
       "path": "field.tsx"
+    },
+    {
+      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nexport function getNativeStyleProps(\n  stylexProps: ReturnType<typeof stylex.props>,\n  className?: string,\n  style?: ComponentProps<\"div\">[\"style\"],\n): Pick<ComponentProps<\"div\">, \"className\" | \"style\"> {\n  return {\n    className: [stylexProps.className, className].filter(Boolean).join(\" \"),\n    style: { ...stylexProps.style, ...style },\n  };\n}\n",
+      "path": "stylex-props.ts"
     }
   ],
   "dependencies": [

package/dist/items/input-otp.json

@@ -5,6 +5,10 @@
     {
       "content": "import { OTPField } from \"@base-ui/react/otp-field\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { getNativeStyleProps } from \"./stylex-props\";\n\nimport {\n  colorVars,\n  motionVars,\n  opacityVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: { alignItems: \"center\", display: \"flex\", gap: spacingVars.space2 },\n  group: { display: \"flex\" },\n  slot: {\n    appearance: \"none\",\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: 0,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    fontFamily: typographyVars.fontFamily,\n    fontSize: typographyVars.fontSizeSm,\n    height: sizeVars.controlLg,\n    marginInlineStart: -1,\n    outline: \"none\",\n    textAlign: \"center\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, border-color, box-shadow, opacity\",\n    width: sizeVars.controlLg,\n    \":first-child\": {\n      borderBottomLeftRadius: radiusVars.sm,\n      borderTopLeftRadius: radiusVars.sm,\n      marginInlineStart: 0,\n    },\n    \":last-child\": { borderBottomRightRadius: radiusVars.sm, borderTopRightRadius: radiusVars.sm },\n    \":hover:not(:disabled)\": { borderColor: colorVars.strokeStrong },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n      zIndex: 1,\n    },\n    \":disabled\": { cursor: \"not-allowed\", opacity: opacityVars.disabled },\n  },\n  separator: { color: colorVars.fgTertiary, paddingInline: spacingVars.space1 },\n});\n\nexport type InputOTPProps = ComponentProps<typeof OTPField.Root> & {\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function InputOTP({ className, style, xstyle, ...props }: InputOTPProps) {\n  const resolved = stylex.props(styles.root, xstyle);\n  return (\n    <OTPField.Root\n      {...props}\n      className={(state) =>\n        [resolved.className, typeof className === \"function\" ? className(state) : className]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(state) => ({\n        ...resolved.style,\n        ...(typeof style === \"function\" ? style(state) : style),\n      })}\n    />\n  );\n}\n\nexport function InputOTPGroup({ className, style, ...props }: ComponentProps<\"div\">) {\n  return <div {...props} {...getNativeStyleProps(stylex.props(styles.group), className, style)} />;\n}\n\nexport function InputOTPSlot({\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof OTPField.Input>) {\n  const resolved = stylex.props(styles.slot);\n  return (\n    <OTPField.Input\n      {...props}\n      className={(state) =>\n        [resolved.className, typeof className === \"function\" ? className(state) : className]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(state) => ({\n        ...resolved.style,\n        ...(typeof style === \"function\" ? style(state) : style),\n      })}\n    />\n  );\n}\n\nexport function InputOTPSeparator({ className, style, ...props }: ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.separator), className, style)}\n    >\n      {props.children ?? \"–\"}\n    </span>\n  );\n}\n",
       "path": "input-otp.tsx"
+    },
+    {
+      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nexport function getNativeStyleProps(\n  stylexProps: ReturnType<typeof stylex.props>,\n  className?: string,\n  style?: ComponentProps<\"div\">[\"style\"],\n): Pick<ComponentProps<\"div\">, \"className\" | \"style\"> {\n  return {\n    className: [stylexProps.className, className].filter(Boolean).join(\" \"),\n    style: { ...stylexProps.style, ...style },\n  };\n}\n",
+      "path": "stylex-props.ts"
     }
   ],
   "dependencies": [

package/dist/items/marker.json

@@ -5,6 +5,10 @@
     {
       "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { getNativeStyleProps } from \"./stylex-props\";\n\nimport { colorVars, spacingVars, typographyVars } from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    color: colorVars.fgSecondary,\n    display: \"inline-flex\",\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightMedium,\n    gap: spacingVars.space2,\n    lineHeight: typographyVars.lineHeightNormal,\n    minWidth: 0,\n  },\n  variantDefault: {},\n  border: {\n    borderBottomColor: colorVars.strokeDefault,\n    borderBottomStyle: \"solid\",\n    borderBottomWidth: 1,\n    paddingBottom: spacingVars.space2,\n  },\n  separator: {\n    display: \"flex\",\n    width: \"100%\",\n    \"::before\": {\n      backgroundColor: colorVars.strokeDefault,\n      content: \"\",\n      flex: 1,\n      height: 1,\n    },\n    \"::after\": {\n      backgroundColor: colorVars.strokeDefault,\n      content: \"\",\n      flex: 1,\n      height: 1,\n    },\n  },\n  icon: { alignItems: \"center\", display: \"inline-flex\", flexShrink: 0 },\n  content: { overflow: \"hidden\", textOverflow: \"ellipsis\", whiteSpace: \"nowrap\" },\n});\n\nexport type MarkerProps = ComponentProps<\"div\"> & {\n  variant?: \"border\" | \"default\" | \"separator\";\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Marker({ className, style, variant = \"default\", xstyle, ...props }: MarkerProps) {\n  return (\n    <div\n      {...props}\n      {...getNativeStyleProps(\n        stylex.props(\n          styles.root,\n          variant === \"default\" ? styles.variantDefault : styles[variant],\n          xstyle,\n        ),\n        className,\n        style,\n      )}\n    />\n  );\n}\n\nexport function MarkerIcon({ className, style, ...props }: ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.icon), className, style)}\n    />\n  );\n}\n\nexport function MarkerContent({ className, style, ...props }: ComponentProps<\"span\">) {\n  return (\n    <span {...props} {...getNativeStyleProps(stylex.props(styles.content), className, style)} />\n  );\n}\n",
       "path": "marker.tsx"
+    },
+    {
+      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nexport function getNativeStyleProps(\n  stylexProps: ReturnType<typeof stylex.props>,\n  className?: string,\n  style?: ComponentProps<\"div\">[\"style\"],\n): Pick<ComponentProps<\"div\">, \"className\" | \"style\"> {\n  return {\n    className: [stylexProps.className, className].filter(Boolean).join(\" \"),\n    style: { ...stylexProps.style, ...style },\n  };\n}\n",
+      "path": "stylex-props.ts"
     }
   ],
   "dependencies": [

package/dist/items/message.json

@@ -5,6 +5,10 @@
     {
       "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { getNativeStyleProps } from \"./stylex-props\";\n\nimport { colorVars, spacingVars, typographyVars } from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: { display: \"flex\", flexDirection: \"column\", gap: spacingVars.space2, width: \"100%\" },\n  incoming: { alignItems: \"flex-start\" },\n  outgoing: { alignItems: \"flex-end\" },\n  header: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightMedium,\n  },\n  content: { display: \"flex\", flexDirection: \"column\", gap: spacingVars.space2, width: \"100%\" },\n  footer: { color: colorVars.fgTertiary, fontSize: typographyVars.fontSizeXs },\n});\n\nexport type MessageProps = ComponentProps<\"article\"> & {\n  side?: \"incoming\" | \"outgoing\";\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Message({ className, side = \"incoming\", style, xstyle, ...props }: MessageProps) {\n  return (\n    <article\n      {...props}\n      data-side={side}\n      {...getNativeStyleProps(stylex.props(styles.root, styles[side], xstyle), className, style)}\n    />\n  );\n}\n\nexport function MessageHeader({ className, style, ...props }: ComponentProps<\"header\">) {\n  return (\n    <header {...props} {...getNativeStyleProps(stylex.props(styles.header), className, style)} />\n  );\n}\n\nexport function MessageContent({ className, style, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div {...props} {...getNativeStyleProps(stylex.props(styles.content), className, style)} />\n  );\n}\n\nexport function MessageFooter({ className, style, ...props }: ComponentProps<\"footer\">) {\n  return (\n    <footer {...props} {...getNativeStyleProps(stylex.props(styles.footer), className, style)} />\n  );\n}\n",
       "path": "message.tsx"
+    },
+    {
+      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nexport function getNativeStyleProps(\n  stylexProps: ReturnType<typeof stylex.props>,\n  className?: string,\n  style?: ComponentProps<\"div\">[\"style\"],\n): Pick<ComponentProps<\"div\">, \"className\" | \"style\"> {\n  return {\n    className: [stylexProps.className, className].filter(Boolean).join(\" \"),\n    style: { ...stylexProps.style, ...style },\n  };\n}\n",
+      "path": "stylex-props.ts"
     }
   ],
   "dependencies": [

package/dist/items/pagination.json

@@ -9,6 +9,10 @@
     {
       "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { getNativeStyleProps } from \"./stylex-props\";\n\nimport { Icon } from \"./Icon\";\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: { display: \"flex\", justifyContent: \"center\", width: \"100%\" },\n  content: {\n    alignItems: \"center\",\n    display: \"flex\",\n    gap: spacingVars.space1,\n    listStyle: \"none\",\n    margin: 0,\n    padding: 0,\n  },\n  item: { display: \"inline-flex\" },\n  link: {\n    alignItems: \"center\",\n    backgroundColor: {\n      default: \"transparent\",\n      \":hover\": colorVars.interactionHover,\n      \":active\": colorVars.interactionPressed,\n    },\n    borderColor: \"transparent\",\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    display: \"inline-flex\",\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    gap: spacingVars.space1,\n    justifyContent: \"center\",\n    minHeight: sizeVars.controlMd,\n    outline: \"none\",\n    textDecoration: \"none\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, border-color\",\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \"[aria-disabled='true']\": {\n      color: colorVars.fgDisabled,\n      cursor: \"not-allowed\",\n      pointerEvents: \"none\",\n    },\n  },\n  icon: { width: sizeVars.controlMd },\n  default: { paddingInline: spacingVars.space3 },\n  active: { backgroundColor: colorVars.bgSurfacePressed, borderColor: colorVars.strokeStrong },\n  ellipsis: {\n    alignItems: \"center\",\n    color: colorVars.fgTertiary,\n    display: \"inline-flex\",\n    height: sizeVars.controlMd,\n    justifyContent: \"center\",\n    width: sizeVars.controlMd,\n  },\n});\n\nexport function Pagination({ className, style, ...props }: ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"Pagination\"\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.root), className, style)}\n    />\n  );\n}\n\nexport function PaginationContent({ className, style, ...props }: ComponentProps<\"ul\">) {\n  return <ul {...props} {...getNativeStyleProps(stylex.props(styles.content), className, style)} />;\n}\n\nexport function PaginationItem({ className, style, ...props }: ComponentProps<\"li\">) {\n  return <li {...props} {...getNativeStyleProps(stylex.props(styles.item), className, style)} />;\n}\n\nexport type PaginationLinkProps = ComponentProps<\"a\"> & {\n  isActive?: boolean;\n  size?: \"default\" | \"icon\";\n};\n\nexport function PaginationLink({\n  children,\n  className,\n  isActive = false,\n  size = \"icon\",\n  style,\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      {...props}\n      {...getNativeStyleProps(\n        stylex.props(styles.link, styles[size], isActive && styles.active),\n        className,\n        style,\n      )}\n    >\n      {children}\n    </a>\n  );\n}\n\nexport function PaginationPrevious({ children, ...props }: PaginationLinkProps) {\n  return (\n    <PaginationLink aria-label=\"Previous page\" size=\"default\" {...props}>\n      <Icon aria-hidden=\"true\" name=\"chevronLeft\" />\n      {children ?? \"Previous\"}\n    </PaginationLink>\n  );\n}\n\nexport function PaginationNext({ children, ...props }: PaginationLinkProps) {\n  return (\n    <PaginationLink aria-label=\"Next page\" size=\"default\" {...props}>\n      {children ?? \"Next\"}\n      <Icon aria-hidden=\"true\" name=\"chevronRight\" />\n    </PaginationLink>\n  );\n}\n\nexport function PaginationEllipsis({ className, style, ...props }: ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.ellipsis), className, style)}\n    >\n      …\n    </span>\n  );\n}\n",
       "path": "pagination.tsx"
+    },
+    {
+      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nexport function getNativeStyleProps(\n  stylexProps: ReturnType<typeof stylex.props>,\n  className?: string,\n  style?: ComponentProps<\"div\">[\"style\"],\n): Pick<ComponentProps<\"div\">, \"className\" | \"style\"> {\n  return {\n    className: [stylexProps.className, className].filter(Boolean).join(\" \"),\n    style: { ...stylexProps.style, ...style },\n  };\n}\n",
+      "path": "stylex-props.ts"
     }
   ],
   "dependencies": [

package/dist/items/popover.json

@@ -5,6 +5,10 @@
     {
       "content": "import { Popover as PopoverPrimitive } from \"@base-ui/react/popover\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { getNativeStyleProps } from \"./stylex-props\";\n\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  positioner: { zIndex: 60 },\n  popup: {\n    backgroundColor: colorVars.bgRaised,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    boxShadow: shadowVars.floating,\n    color: colorVars.fgPrimary,\n    maxWidth: \"calc(100vw - 2rem)\",\n    outline: \"none\",\n    padding: spacingVars.space4,\n    transform: \"scale(1)\",\n    transformOrigin: \"var(--transform-origin)\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"opacity, transform\",\n    transitionTimingFunction: motionVars.easingEnter,\n    width: \"18rem\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transform: \"none\",\n      transitionDuration: \"0.01ms\",\n    },\n  },\n  popupTransitioning: { opacity: 0, transform: \"scale(0.98)\" },\n  popupEnding: {\n    transitionDuration: motionVars.durationFast,\n    transitionTimingFunction: motionVars.easingExit,\n  },\n  header: { display: \"flex\", flexDirection: \"column\", gap: spacingVars.space1 },\n  title: {\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightNormal,\n    margin: 0,\n  },\n  description: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    margin: 0,\n  },\n});\n\nexport const Popover = PopoverPrimitive.Root;\nexport const PopoverTrigger = PopoverPrimitive.Trigger;\nexport const PopoverClose = PopoverPrimitive.Close;\n\ntype PopoverContentProps = ComponentProps<typeof PopoverPrimitive.Popup> &\n  Pick<ComponentProps<typeof PopoverPrimitive.Positioner>, \"align\" | \"side\" | \"sideOffset\"> & {\n    xstyle?: stylex.StyleXStyles;\n  };\n\nexport function PopoverContent({\n  align = \"start\",\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  style,\n  xstyle,\n  ...props\n}: PopoverContentProps) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        align={align}\n        side={side}\n        sideOffset={sideOffset}\n        {...stylex.props(styles.positioner)}\n      >\n        <PopoverPrimitive.Popup\n          {...props}\n          className={(state) => {\n            const stylexProps = stylex.props(\n              styles.popup,\n              state.transitionStatus === \"starting\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupEnding,\n              xstyle,\n            );\n            return [\n              stylexProps.className,\n              typeof className === \"function\" ? className(state) : className,\n            ]\n              .filter(Boolean)\n              .join(\" \");\n          }}\n          style={(state) => {\n            const stylexProps = stylex.props(\n              styles.popup,\n              state.transitionStatus === \"starting\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupEnding,\n              xstyle,\n            );\n            return {\n              ...stylexProps.style,\n              ...(typeof style === \"function\" ? style(state) : style),\n            };\n          }}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  );\n}\n\nexport function PopoverHeader({ className, style, ...props }: ComponentProps<\"div\">) {\n  return <div {...props} {...getNativeStyleProps(stylex.props(styles.header), className, style)} />;\n}\nexport function PopoverTitle({ children, className, style, ...props }: ComponentProps<\"h2\">) {\n  return (\n    <h2 {...props} {...getNativeStyleProps(stylex.props(styles.title), className, style)}>\n      {children}\n    </h2>\n  );\n}\nexport function PopoverDescription({ className, style, ...props }: ComponentProps<\"p\">) {\n  return (\n    <p {...props} {...getNativeStyleProps(stylex.props(styles.description), className, style)} />\n  );\n}\n",
       "path": "popover.tsx"
+    },
+    {
+      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nexport function getNativeStyleProps(\n  stylexProps: ReturnType<typeof stylex.props>,\n  className?: string,\n  style?: ComponentProps<\"div\">[\"style\"],\n): Pick<ComponentProps<\"div\">, \"className\" | \"style\"> {\n  return {\n    className: [stylexProps.className, className].filter(Boolean).join(\" \"),\n    style: { ...stylexProps.style, ...style },\n  };\n}\n",
+      "path": "stylex-props.ts"
     }
   ],
   "dependencies": [

package/dist/items/table.json

@@ -5,6 +5,10 @@
     {
       "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { getNativeStyleProps } from \"./stylex-props\";\n\nimport { colorVars, motionVars, spacingVars, typographyVars } from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  container: { overflowX: \"auto\", position: \"relative\", width: \"100%\" },\n  table: {\n    borderCollapse: \"collapse\",\n    captionSide: \"bottom\",\n    color: colorVars.fgPrimary,\n    fontSize: typographyVars.fontSizeSm,\n    width: \"100%\",\n  },\n  header: {\n    borderBottomColor: colorVars.strokeDefault,\n    borderBottomStyle: \"solid\",\n    borderBottomWidth: 1,\n  },\n  body: {},\n  footer: {\n    backgroundColor: colorVars.bgSubtle,\n    borderTopColor: colorVars.strokeDefault,\n    borderTopStyle: \"solid\",\n    borderTopWidth: 1,\n    fontWeight: typographyVars.fontWeightMedium,\n  },\n  row: {\n    borderBottomColor: colorVars.strokeDefault,\n    borderBottomStyle: \"solid\",\n    borderBottomWidth: 1,\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    backgroundColor: {\n      default: \"transparent\",\n      \":hover\": colorVars.interactionHover,\n    },\n  },\n  head: {\n    color: colorVars.fgSecondary,\n    fontWeight: typographyVars.fontWeightMedium,\n    height: \"2.5rem\",\n    paddingInline: spacingVars.space3,\n    textAlign: \"left\",\n    verticalAlign: \"middle\",\n    whiteSpace: \"nowrap\",\n  },\n  cell: {\n    paddingBlock: spacingVars.space3,\n    paddingInline: spacingVars.space3,\n    verticalAlign: \"middle\",\n    whiteSpace: \"nowrap\",\n  },\n  caption: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    marginTop: spacingVars.space4,\n    textAlign: \"left\",\n  },\n});\n\nexport type TableProps = ComponentProps<\"table\"> & {\n  containerClassName?: string;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Table({ className, containerClassName, style, xstyle, ...props }: TableProps) {\n  return (\n    <div\n      className={[stylex.props(styles.container).className, containerClassName]\n        .filter(Boolean)\n        .join(\" \")}\n    >\n      <table\n        {...props}\n        {...getNativeStyleProps(stylex.props(styles.table, xstyle), className, style)}\n      />\n    </div>\n  );\n}\n\nexport function TableHeader({ className, style, ...props }: ComponentProps<\"thead\">) {\n  return (\n    <thead {...props} {...getNativeStyleProps(stylex.props(styles.header), className, style)} />\n  );\n}\n\nexport function TableBody({ className, style, ...props }: ComponentProps<\"tbody\">) {\n  return <tbody {...props} {...getNativeStyleProps(stylex.props(styles.body), className, style)} />;\n}\n\nexport function TableFooter({ className, style, ...props }: ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot {...props} {...getNativeStyleProps(stylex.props(styles.footer), className, style)} />\n  );\n}\n\nexport function TableRow({ className, style, ...props }: ComponentProps<\"tr\">) {\n  return <tr {...props} {...getNativeStyleProps(stylex.props(styles.row), className, style)} />;\n}\n\nexport function TableHead({ className, style, ...props }: ComponentProps<\"th\">) {\n  return <th {...props} {...getNativeStyleProps(stylex.props(styles.head), className, style)} />;\n}\n\nexport function TableCell({ className, style, ...props }: ComponentProps<\"td\">) {\n  return <td {...props} {...getNativeStyleProps(stylex.props(styles.cell), className, style)} />;\n}\n\nexport function TableCaption({ className, style, ...props }: ComponentProps<\"caption\">) {\n  return (\n    <caption {...props} {...getNativeStyleProps(stylex.props(styles.caption), className, style)} />\n  );\n}\n",
       "path": "table.tsx"
+    },
+    {
+      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nexport function getNativeStyleProps(\n  stylexProps: ReturnType<typeof stylex.props>,\n  className?: string,\n  style?: ComponentProps<\"div\">[\"style\"],\n): Pick<ComponentProps<\"div\">, \"className\" | \"style\"> {\n  return {\n    className: [stylexProps.className, className].filter(Boolean).join(\" \"),\n    style: { ...stylexProps.style, ...style },\n  };\n}\n",
+      "path": "stylex-props.ts"
     }
   ],
   "dependencies": [

package/dist/items.js

@@ -5,7 +5,7 @@ export const registryItems = {
         registryDependencies: [],
     },
     "alert-dialog": {
-        files: ["alert-dialog.tsx"],
+        files: ["alert-dialog.tsx", "stylex-props.ts"],
         dependencies: ["@base-ui/react", "@nuee/tokens", "@stylexjs/stylex"],
         registryDependencies: ["button"],
     },
@@ -15,12 +15,12 @@ export const registryItems = {
         registryDependencies: [],
     },
     attachment: {
-        files: ["attachment.tsx"],
+        files: ["attachment.tsx", "stylex-props.ts"],
         dependencies: ["@nuee/tokens", "@stylexjs/stylex"],
         registryDependencies: ["button"],
     },
     avatar: {
-        files: ["avatar.tsx"],
+        files: ["avatar.tsx", "stylex-props.ts"],
         dependencies: ["@base-ui/react", "@nuee/tokens", "@stylexjs/stylex"],
         registryDependencies: [],
     },
@@ -35,7 +35,7 @@ export const registryItems = {
         registryDependencies: [],
     },
     breadcrumb: {
-        files: ["Icon.tsx", "breadcrumb.tsx"],
+        files: ["Icon.tsx", "breadcrumb.tsx", "stylex-props.ts"],
         dependencies: ["@nuee/tokens", "@phosphor-icons/react", "@stylexjs/stylex"],
         registryDependencies: [],
     },
@@ -80,7 +80,7 @@ export const registryItems = {
         registryDependencies: ["dropdown-menu"],
     },
     dialog: {
-        files: ["Icon.tsx", "dialog.tsx"],
+        files: ["Icon.tsx", "dialog.tsx", "stylex-props.ts"],
         dependencies: ["@base-ui/react", "@nuee/tokens", "@phosphor-icons/react", "@stylexjs/stylex"],
         registryDependencies: [],
     },
@@ -95,12 +95,12 @@ export const registryItems = {
         registryDependencies: [],
     },
     empty: {
-        files: ["empty.tsx"],
+        files: ["empty.tsx", "stylex-props.ts"],
         dependencies: ["@nuee/tokens", "@stylexjs/stylex"],
         registryDependencies: [],
     },
     field: {
-        files: ["field.tsx"],
+        files: ["field.tsx", "stylex-props.ts"],
         dependencies: ["@base-ui/react", "@nuee/tokens", "@stylexjs/stylex"],
         registryDependencies: [],
     },
@@ -120,12 +120,12 @@ export const registryItems = {
         registryDependencies: ["button", "input", "textarea"],
     },
     "input-otp": {
-        files: ["input-otp.tsx"],
+        files: ["input-otp.tsx", "stylex-props.ts"],
         dependencies: ["@base-ui/react", "@nuee/tokens", "@stylexjs/stylex"],
         registryDependencies: [],
     },
     "content-row": {
-        files: ["content-row.tsx"],
+        files: ["content-row.tsx", "stylex-props.ts"],
         dependencies: ["@nuee/tokens", "@stylexjs/stylex"],
         registryDependencies: [],
     },
@@ -145,7 +145,7 @@ export const registryItems = {
         registryDependencies: [],
     },
     marker: {
-        files: ["marker.tsx"],
+        files: ["marker.tsx", "stylex-props.ts"],
         dependencies: ["@nuee/tokens", "@stylexjs/stylex"],
         registryDependencies: [],
     },
@@ -155,7 +155,7 @@ export const registryItems = {
         registryDependencies: ["dropdown-menu"],
     },
     message: {
-        files: ["message.tsx"],
+        files: ["message.tsx", "stylex-props.ts"],
         dependencies: ["@nuee/tokens", "@stylexjs/stylex"],
         registryDependencies: [],
     },
@@ -175,12 +175,12 @@ export const registryItems = {
         registryDependencies: [],
     },
     pagination: {
-        files: ["Icon.tsx", "pagination.tsx"],
+        files: ["Icon.tsx", "pagination.tsx", "stylex-props.ts"],
         dependencies: ["@nuee/tokens", "@phosphor-icons/react", "@stylexjs/stylex"],
         registryDependencies: [],
     },
     popover: {
-        files: ["popover.tsx"],
+        files: ["popover.tsx", "stylex-props.ts"],
         dependencies: ["@base-ui/react", "@nuee/tokens", "@stylexjs/stylex"],
         registryDependencies: [],
     },
@@ -230,7 +230,7 @@ export const registryItems = {
         registryDependencies: [],
     },
     table: {
-        files: ["table.tsx"],
+        files: ["table.tsx", "stylex-props.ts"],
         dependencies: ["@nuee/tokens", "@stylexjs/stylex"],
         registryDependencies: [],
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuee/registry",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "private": false,
   "repository": {
     "type": "git",